.p-mv {
    position: relative;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    &::after {
        position: absolute;
        content: "";
        bottom: 0;
        left: 0;
        width: 70%;
        height: 100%;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        pointer-events: none;
        z-index: 1;
        mask-image: 
            linear-gradient(to bottom, 
                transparent 0%,
                rgba(0, 0, 0, 0.6) 20%,
                rgba(0, 0, 0, 1) 40%
            ),
            linear-gradient(135deg, 
                rgba(0, 0, 0, 1) 0%,
                rgba(0, 0, 0, 0.4) 50%,
                rgba(0, 0, 0, 0) 80%,
                transparent 100%
            );
        -webkit-mask-image: 
            linear-gradient(to bottom, 
                transparent 0%,
                rgba(0, 0, 0, 0.6) 20%,
                rgba(0, 0, 0, 1) 40%
            ),
            linear-gradient(135deg, 
                rgba(0, 0, 0, 1) 0%,
                rgba(0, 0, 0, 0.4) 50%,
                rgba(0, 0, 0, 0) 80%,
                transparent 100%
            );
        mask-composite: intersect;
        -webkit-mask-composite: source-in;
    }
    & .p-mv__img {
        position: absolute; /* relativeからabsoluteに変更 */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 4s ease-in-out;
        /* &:not(:first-child)のmargin-topを削除 */
        &.active {
            opacity: 1;
        }
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
    }
    & .p-mv__news {
        z-index: 3;
        position: absolute;
        content: "";
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        width: 100%;
        height: 100px;
        color: var(--color-bk02);
        background: linear-gradient(to right, var(--color-wh), #FFFFFFCC);
        & .l-inner {
            display: flex;
            @media (768px > width) {
                flex-direction: column;
                align-items: flex-start;
            }
            time {
                display: inline-block;
                padding-right: 1.125rem;
                margin-right: 1.125rem;
                border-right: 1px solid var(--color-bk02);
                @media (768px > width) {
                    padding-right: 0;
                    margin-right: 0;
                    border-right: none;
                }
            }
            & .p-mv__newsTitle {
                text-decoration: underline;
            }
        }
    }
    & .p-mv__content {
        position: absolute;
        content: "";
        bottom: 20%;
        left: 10%;
        @media (768px > width) {
            left: 0;
            padding: 0 1.25rem;
        }
        & .p-mv__title {
            position: relative;
            z-index: 2;
            margin-bottom: 1.625rem;
            line-height: calc(75/46);
            font-size: 2.875rem;
            font-weight: 500;
            color: var(--color-wh);
            text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);
            @media (768px > width) {
                font-size: 1.625rem;
            }
        }
        & .p-mv__text {
            position: relative;
            z-index: 2;
            font-size: 1.0625rem;
            line-height: calc(33/17);
            color: var(--color-wh);
            text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);
            @media (768px > width) {
                font-size: .8125rem;
            }
        }
    }
}
.p-company {
    position: relative;
    padding: 8.5rem 0 6.375rem;
    > img {
        position: absolute;
        top: 250px;
        left: 0;
        display: block;
        width: 100%;
        height: auto;
        z-index: -1;
    }
    @media (768px > width) {
        padding: 3rem 0 3.5rem;
    }
    & .p-company__title {
        @media (768px > width) {
            margin-bottom: 1rem;
        }
    }
    & .p-company__text {
        p {
            margin-bottom: 2.125rem;
            line-height: calc(35/17);
            font-size: 1.0625rem;
            font-weight: 500;
            @media (768px > width) {
                margin-bottom: 1.375rem;
                font-size: 1rem;
            }
        }
    }
    & .p-company__content {
        display: flex;
        justify-content: space-between;
        margin-bottom: 6.25rem;
        @media (768px > width) {
            flex-direction: column;
        }
        + img {
            margin-bottom: 7rem;
        }
    }
    & .p-companyInterview {
        display: flex;
        align-items: center;
        justify-content: space-between;
        @media (768px > width) {
            flex-direction: column-reverse;
            margin-bottom: 2.5rem;
        }
        img {
            width: calc(610 / 1440 * 100vw);
            height: auto;
            object-fit: cover;
            margin-left: calc(50% - 50vw);
            max-width: none;
            @media (768px > width) {
                width: 100vw;
            }
        }
        & .p-companyInterview__copy {
            margin-bottom: 1.5rem;
            font-size: 2.25rem;
            @media (1024px > width) {
                font-size: 1.875rem;
            }
            @media (768px > width) {
                margin-bottom: 1rem;
                font-size: 1.5rem;
            }
        }
        & .p-companyInterview__text {
            margin-bottom: 2.125rem;
            font-weight: 500;
            @media (768px > width) {
                margin-bottom: 0;
            }
        }
        & .p-companyInterview__content {
            width: 45%;
            @media (768px > width) {
                width: 100%;
                margin-bottom: 2rem;
            }
        }
    }
    & .c-button {
        @media (768px > width) {
            margin: 0 auto;
        }
    }
}
.p-products {
    position: relative;
    padding: 6rem 0 8.25rem;
    background: var(--color-main);
    @media (768px > width) {
        padding: 1.875rem 0;
    }
    &::after {
        position: absolute;
        content: PRODUCTS;
        bottom: 0;
        left: 0;
        width: 100vw;
        font-size: 204px;
        font-weight: 700;
    }
    & .p-products__title {
        margin-bottom: 4.75rem;
        color: var(--color-wh);
        @media (768px > width) {
            margin-bottom: 1.75rem;
        }
        & .c-title {
            p {
                white-space: nowrap;
            }
        }
        & .c-title--en {
            color: var(--color-wh);
        }
    }
    & .p-products__content {
        display: flex;
        gap: 2rem;
        @media (768px > width) {
            flex-direction: column-reverse;
        }
        & .p-products__list {
            width: calc(100% - 530px);
            @media (1024px > width) {
                width: calc(100% - 330px);
            }
            @media (768px > width) {
                width: 100%;
            }
        }
        & .p-products__item {
            max-width: 390px;
            border-bottom: 1px solid var(--color-wh);
            cursor: pointer;
            opacity: 0.6; 
            transition: opacity 0.3s;
            @media (768px > width) {
                max-width: 100%;
            }
            &.is-active {
                opacity: 1;
                font-weight: bold;
            }
        }
        & .p-products__link {
            position: relative;
            display: block;
            padding: 1.75rem 1.75rem 1.75rem 4.625rem;
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--color-wh);
            @media (1024px > width) {
                padding: 1.5rem 1.75rem 1.5rem 4.625rem;
                font-size: 1rem;
            }
            @media (768px > width) {
                padding: 1.25rem 1.25rem 1.25rem 3.75rem;
                font-size: .9375rem;
            }
            &::before {
                position: absolute;
                content: "";
                width: 13px;
                height: 13px;
                top: 50%;
                left: 1.625rem;
                transform: translateY(-50%);
                border-radius: 50%;
                background: #5C9CD3;
            }
        }
    }
    & .p-products__thumb {
        display: none;
        animation: fadeIn 0.5s ease;
        max-width: 530px;
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        &.is-active {
            display: block;
        }
        & .p-products__img {
            margin: 0 0 1.75rem;
            img {
                object-fit: contain;
                width: calc(530/1100 * 100vw);
                max-width: 530px;
                aspect-ratio: 530/371;
                padding-bottom: .375rem;
                @media (768px > width) {
                    width: 100%;
                }
            }
            figcaption {
                text-align: left;
                color: var(--color-wh);
                @media (768px > width) {
                    font-size: .875rem;
                }
            }
        }
        & .c-button--wh {
            @media (768px > width) {
                margin: 0 auto;
            }
        }
    }
}
.p-activity {
    position: relative;
    padding: 8rem 0 0;
    @media (768px > width) {
        padding: 3.75rem 0 0;
    }
    > img {
        position: absolute;
        top: -3rem;
        right: 0;
        display: block;
        width: auto;
        max-width: 590px;
        height: auto;
        z-index: -1;
        @media (768px > width) {
            right: -11rem;
            width: 100%;
            height: auto;
        }
    }
    & .p-activity__title {
        display: flex;
        align-items: flex-end;
        gap: 1.25rem;
        margin-bottom: 2.375rem;
        @media (768px > width) {
            flex-direction: column;
            align-items: flex-start;
            margin-bottom: 1.375rem;
        }
        > p {
            transform: translateY(-.75rem);
            @media (768px > width) {
                line-height: calc(35/16);
            }
        }
    }
    & .p-activity__list {
        display: flex;
        margin-bottom: 2.5rem;
        @media (768px > width) {
            flex-direction: column;
            margin-bottom: 1.5rem;
        }
        & .p-activity__item {
            overflow: hidden;
            @media (768px > width) {
                width: 100vw;
                margin: 0 calc(50% - 50vw);
            }
            &:hover {
                img {
                    transform: scale(1.05);
                }
            }
            & .p-activity__link {
                overflow: hidden;
                position: relative;
                display: block;
                line-height: 1;
                img {
                    transition: .3s ease;
                    vertical-align: middle;
                }
            }
        }

        & .p-activityContent {
            position: absolute;
            content: "";
            bottom: 7.5%;
            left: 0;
            padding: 0 1.25rem;
            & .p-activityContent__title {
                margin-bottom: .75rem;
                font-size: 2.5rem;
                font-weight: 600;
                color: var(--color-wh);
                @media (1024px > width) {
                    font-size: 1.5625rem;
                }
            }
            & .p-activityContent__text {
                font-weight: 400;
                color: var(--color-wh);
                @media (1024px > width) {
                    line-height: calc(19/14);
                    font-size: .875rem;
                }
            }
        }
    }
    & .p-activity__bnr {
        max-width: 800px;
        margin: 0 auto;
        text-align: center;
        figcaption {
            padding-bottom: .75rem;
            color: var(--color-bk02);
        }
    }
}

.p-news {
    padding: 4.75rem 0 7rem;
    @media (768px > width) {
        padding: 3.25rem 0;
    }
    & .p-news__title {
        margin-bottom: 1.9375rem;
    }
    & .p-news__content {
        display: flex;
        justify-content: space-between;
        gap: 4.5rem;
        margin-bottom: 3.125rem;
        @media (768px > width) {
            flex-direction: column;
            gap: 1.25rem;
            margin-bottom: 1.875rem;
        }
    }
    & .c-category__title {
        display: none;
    }
    & .c-category__list {
        @media (768px > width) {
            display: flex;
            flex-wrap: wrap;
            gap: .3125rem;
        }
    }
    & .c-category__item {
        width: 150px;
        align-content: center;
        text-align: center;
        line-height: 1.25;
        border-radius: 17.5px;
        border: 1px solid var(--color-dark);
        @media (768px > width) {
            width: 80px;
        }
        &:not(:last-of-type) {
            margin-bottom: .625rem;
            @media (768px > width) {
                margin-bottom: 0;
            }
        }
        a {
            display: block;
            padding: .3125rem 0;
            color: var(--color-dark);
            @media (768px > width) {
                font-size: .8125rem;
            }
        }
        &.active {
            border: 1px solid var(--color-main);
            background: var(--color-main);
            a {
                color: var(--color-wh);
            }
        }
    }
    & .c-button {
        margin: 0 auto;
    }
    & .p-news__list {
        width: 100%;
        max-width: 810px;
    }
    & .p-news__item {
        position: relative;
        border-bottom: 1px solid #A0A6A67A;
        &::after {
            position: absolute;
            content: "";

        }
    }
    & .p-news__link {
        display: flex;
        align-items: center;
        padding: 1.25rem 1.25rem;
        @media (768px > width) {
            flex-direction: column;
            align-items: flex-start;
            gap: .625rem;
            padding: .75rem 0 1rem;
        }
        &::before {
            position: absolute;
            content: "";
            top: 50%;
            right: calc(1.375rem + 24px);
            transform: translateY(-50%);
            width: 0;
            height: 2px;
            background: transparent;
            transition: .3s ease;
        }
        &::after {
            position: absolute;
            content: "";
            top: 50%;
            right: 1.25rem;
            transform: translateY(-50%);
            width: 8px;
            height: 16px;
            background: url(../images/arrow-navy.png), top center / contain no-repeat;
        }
        &:hover {
            background: var(--color-hover);
            &::before {
                right: 1.375rem;
                width: 24px;
                height: 2px;
                background: var(--color-main);
            }
            & .p-news__subject {
                color: var(--color-main);
            }
        }
        & .p-news__tag {
            display: flex;
            align-items: center;
        }
        & .p-news__date {
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--color-main);
            @media (768px > width) {
                font-size: 1rem;
            }
        }
        & .p-news__category {
            text-align: center;
            min-width: 85px;
            margin-left: 1.25rem;
            padding: .375rem 0;
            border-radius: 1rem;
            line-height: 1;
            font-size: .8125rem;
            font-weight: 500;
            color: var(--color-main);
            border: 1px solid var(--color-main);
            @media (768px > width) {
                /* margin-left: 0; */
            }
        }
        & .p-news__subject {
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            margin-left: 1.125rem;
            font-size: 1rem;
            font-weight: 500;
            color: var(--color-bk);
            @media (768px > width) {
                margin-left: 0;
            }
        }
    }
    & .p-news__button {
        position: relative;
        display: block;
        text-align: center;
        width: 180px;
        margin-top: 3.75rem;
        padding: .625rem 0;
        color: var(--color-main);
        border: 2px solid var(--color-main);
        border-radius: 60px;
        @media (768px > width) {
            margin: 2.5rem auto 0;
        }
        &::before {
            position: absolute;
            content: "";
            top: 50%;
            right: 1.75rem;
            transform: translateY(-50%);
            width: 6px;
            height: 11px;
            background: url('../images/arrow-navy-button.png'), top center / contain no-repeat;
        }
    }
}
.p-access {
    padding: 4.625rem 0 4rem;
    background: var(--color-bg03);
    @media (768px > width) {
        padding: 2.125rem 0 2.75rem;
    }
    & .p-access__title {
        margin-bottom: 2.125rem;
        @media (768px > width) {
            margin-bottom: 1.5rem;
        }
    }
    & .p-access__content {
        text-align: center;
        margin-bottom: 2.375rem;
        @media (768px > width) {
            margin-bottom: 1.875rem;
        }
        iframe {
            width: 100%;
            padding-bottom: .5rem;
        }
    }
    & .c-button {
        margin: 0 auto;
    }
}