#main_visual.hero-rotation-active .p-mainVisual__slideTitle {
    color: #eee;
    text-shadow: 0 1px 3px rgba(24, 31, 34, .38);
}

@media (min-width: 768px) and (min-height: 520px) {
    #main_visual.hero-rotation-active .p-mainVisual__slideTitle {
        font-size: clamp(32px, 4.6vw, 44px) !important;
    }
}

@media (min-width: 960px) {
    #main_visual.hero-rotation-active .p-mainVisual__slideTitle {
        font-size: clamp(46px, 4.1vw, 58px) !important;
        margin-bottom: 0;
    }
}

#main_visual .hero-title-mobile-break {
    display: none;
}

#main_visual.hero-rotation-active .p-mainVisual__slideTitle.hero-title-four-lines {
    font-size: min(clamp(25px, 9vw, 40px), calc(var(--hero-title-width) / 8.2)) !important;
    line-height: 1.22;
    text-align: left;
    white-space: nowrap;
}

#main_visual .hero-title-four-lines .hero-title-mobile-break {
    display: initial;
}

#main_visual .hero-rotation-shade {
    --shade-under-text: .26;
    --shade-bottom: .32;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    border-radius: 8px;
    background: linear-gradient(to bottom,
        rgba(27, 33, 34, 0),
        rgba(27, 33, 34, .18) var(--shade-ramp),
        rgba(27, 33, 34, var(--shade-under-text)) var(--shade-text-end),
        rgba(27, 33, 34, var(--shade-bottom)));
    mask-image: linear-gradient(to right, transparent, #000 2%, #000 var(--shade-span), transparent var(--shade-fade));
}

#main_visual .hero-rotation-shade.hero-shade-portrait {
    --shade-under-text: .23;
    --shade-bottom: .15;
}