@charset "UTF-8";

/* **************************************************
Name: feature.css

Description: 30th_anniversary feature

Create: 2025.06.23
Update: xxxx.xx.xx

Copyright 2024 Hitachi, Ltd. 
***************************************************** */


/* ==================== */
/* main-title */
/* ==================== */
#main-title-box {
    background-color: #333;
    background-image: url(/Prod/comp/soft1/hirdb/30th_anniversary/images/feature/branding.jpg);
    background-position:  center center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    position: relative;
    z-index: 1;
}

#main-title-box::after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(10deg, rgba(0, 0, 0, .5) 0%, transparent 44%);
}

#main-title-box-inner {
    height: 400px;
    display: flex;
    align-items: center;
}

#main-title-label {
    font-size: 1.375rem;
    color: var(--color-secondary2-contrast);
    background-color: var(--color-secondary2);
    border-radius: 3px;
    line-height: 1;
    padding: 4px 23px;
    width: fit-content;
    margin-bottom: 15px;
}

#main-title {
    font-size: clamp(1.5rem ,3.6vw ,2.25rem);
    font-weight: bold;
    text-shadow: 0 0 10px #000, 0 0 10px #000, 0 0 20px #000, 0 0 20px #000, 0 0 30px #000;
    line-height: 1.6;
}

#main-subtitle {
    font-size: clamp(1rem, 2.35vw ,1.5rem);
    font-weight: bold;
    text-shadow: 0 0 10px #000, 0 0 10px #000, 0 0 20px #000, 0 0 20px #000, 0 0 30px #000;
    line-height: 1.6;
}

@media (max-width: 1304px) {
    #main-title-box {
        margin-left: calc(var(--side-space) * -1);
        padding-left: var(--side-space);
        padding-right: var(--side-space);
        width: calc(100% + var(--side-space-both));
        box-sizing: border-box;
    }
}

@media (max-width: 767px) {
    #main-title-box {
        background-image: url(/Prod/comp/soft1/hirdb/30th_anniversary/images/feature/branding-sp.jpg);
    }

    #main-title-box::after {
        background: linear-gradient(10deg, rgba(0, 0, 0, .4) 0%, transparent 60%);
    }

    #main-title-box-inner {
        height: auto;
        aspect-ratio: 7 / 6;
        max-height: 400px;
    }

    #main-title-label {
        font-size: 1rem;
    }
}

/* ==================== */
/* infrastructure */
/* ==================== */
#infrastructure-movie-inner {
    display: flex;
    align-items: center;
    gap: calc(50 / 1275 * 100%);
}

#infrastructure-movie-player {
    width: calc(728 / 1275 * 100%);
    margin-top: -90px;
    margin-bottom: -90px;
    aspect-ratio: 16 / 9;
}

#infrastructure-movie-player .YouTubeBox {
    margin: 0;
    background-color: transparent;
    height: 100%;
}

#infrastructure-movie-player .YouTubeBox .Movie {
    width: 100%;
    height: 100%;
}

#infrastructure-movie-player iframe {
    width: 100%;
    height: 100%;
}


#infrastructure-movie-txts {
    flex: 1;
}

@media (max-width: 1304px) {
    #infrastructure-movie-player .YouTubeBox .Movie {
        position: static;
        padding-bottom: 0;
    }

    #infrastructure-movie-player iframe {
        position: static;
    }
}

@media (max-width: 767px) {
    #infrastructure-movie-inner {
        display: block;
    }

    #infrastructure-movie-player {
        width: 100%;
        margin: 0 0 var(--content-space-ss);
    }
}

/* ==================== */
/* mars */
/* ==================== */
#mars-article-head {
    display: flex;
    gap: calc(50 / 1275 * 100%);
    align-items: center;
    margin-bottom: 50px;
}

#mars-article-heading-box {
    width: calc(510 / 1275 * 100%);
}

#mars-article-head-txts {
    flex: 1;
}

#mars-article-subheading {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 10px;
}

#mars-article-subheading::before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 16px;
    background: url(/Prod/comp/soft1/hirdb/30th_anniversary/images/lead-txt.png) center center no-repeat;
    background-size: 100% auto;
    margin-right: 0.25em;
}

#mars-article-heading {
    font-size: clamp(1.25rem, 3.1vw,  1.75rem);
    font-weight: bold;
    word-break: keep-all;
    color: var(--color-default);
    line-height: 1.6;
}

#mars .btns-list {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    #mars-article-head {
        display: block;
    }

    #mars-article-heading-box {
        width: 100%;
    }
}