@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500&display=swap');

html {
    overflow-x: hidden;
}
main.p-front {
    padding-top: 5.625rem;
    @media (768px > width) {
        padding-top: 4rem;
    }
}
.p-frontMv {
    --front-mv-inner-max-width: 1140px;
    --front-mv-inner-gutter: 2.5rem;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 62vh;
    min-height: 31.5rem;
    @media (768px > width) {
        height: auto;
        min-height: 30rem;
    }
    & .p-frontMv__bgList {
        position: absolute;
        inset: 0;
        z-index: 0;
    }
    & .p-frontMv__bg {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 0.9s ease;
        background-image: var(--mv-bg-pc);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        @media (820px > width) {
            background-image: var(--mv-bg-sp, var(--mv-bg-pc));
        }
        &.is-active {
            opacity: 1;
        }
    }
    & .p-frontMv__inner {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
    }
    & .swiper-wrapper {
        height: 100%;
    }
    & .p-frontMv__item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        flex-shrink: 0;
    }
    & .p-frontMv__itemInner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;
        margin-top: -4rem;
        width: min(var(--front-mv-inner-max-width), calc(100% - (var(--front-mv-inner-gutter) * 2)));
        margin-inline: auto;
        @media (820px > width) {
            flex-direction: column;
            align-items: flex-start;
            gap: 1.75rem;
            width: calc(100% - 2rem);
            margin-top: 0;
            padding: 2.5rem 0 1rem;
        }
    }
    & .p-frontMv__item picture {
        display: block;
        width: 100%;
        height: 100%;
    }
    & .p-frontMv__content {
        > img {

        }
        > p {
            font-size: 1.25rem;
            line-height: calc(34/20);
            color: var(--color-wh);
            @media (768px > width) {
                font-size: .8125rem;
                line-height: calc(27/13);
            }
        }
        & .p-frontMv__title {
            height: 32vh;
            min-height: 200px;
            max-height: 240px;
            align-content: center;
            @media (768px > width) {
                height: auto;
                min-height: 160px;
                max-height: 260px;
            }
            h2 {
                margin-bottom: .75rem;
                font-size: 1.625rem;
                font-weight: 500;
                color: var(--color-wh);
                @media (768px > width) {
                    font-size: 1.125rem;
                }
            }
            p {
                line-height: calc(86/80);
                font-size: 4.75rem;
                font-weight: 500;
                font-family: 'Outfit', sans-serif;
                color: var(--color-wh);
                @media (768px > width) {
                    font-size: 3.5rem;
                }
            }
        }
    }
    & .p-frontMv__itemInner > img {
        display: block;
        width: calc(592/1200* 100%);
        margin-top: 2rem;
        @media (768px > width) {
            width: min(78vw, 21rem);
            max-width: none;
            min-height: 250px;
            margin: 0 auto;
            object-fit: contain;
        }
    }
    & .p-frontMv__pagination {
        display: flex;
        gap: 12px;
        bottom: 6%!important;
        left: max(var(--front-mv-inner-gutter), calc((100% - var(--front-mv-inner-max-width)) / 2)) !important;
        width: max-content !important;
        @media (768px > width) {
            bottom: 5%!important;
            left: 50% !important;
            transform: translateX(-50%);
        }
    }
    & .p-frontMv__pagination .swiper-pagination-bullet {
        width: 0.625rem;
        height: 0.625rem;
        margin: 0!important;
        background: rgba(255, 255, 255, 0.55);
        opacity: 1;
    }
    & .p-frontMv__pagination .swiper-pagination-bullet-active {
        background: #ffffff;
    }
}

.p-mv {
    position: relative;
    padding: 5.625rem 0 0;
    @media (768px > width) {
        padding: 4rem 0 0;
    }
    & .p-mv__news {
        position: absolute;
        content: "";
        bottom: 28%;
        right: 0;
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 500px;
        padding: 1rem 1rem 1rem 1.375rem;
        border-top-left-radius: 3.75rem;
        border-bottom-left-radius: 3.75rem;
        background: var(--color-sub02);
        @media (1280px > width) {
            bottom: 32%;
        }
        @media (768px > width) {
            bottom: 35%;
            width: calc(100% - 1.25rem);
            padding: 1rem .75rem;
        }
        time {
            font-size: .75rem;
            font-weight: 600;
            color: var(--color-wh);
        }
        p {
            position: relative;
            align-content: center;
            width: calc(100% - 90px);
            margin-left: .9375rem;
            padding-left: .9375rem;
            padding-right: 1.625rem;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            height: 36px;
            font-size: .75rem;
            font-weight: 600;
            color: var(--color-wh);
            @media (768px > width) {
                margin-left: .625rem;
                padding-left: .625rem;
                padding-right: 1rem;
            }
            &::before {
                position: absolute;
                content: "";
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                width: 1px;
                height: 100%;
                background: var(--color-wh);
            }
            &::after {
                position: absolute;
                content: "";
                top: 51%;
                right: 1rem;
                transform: translateY(-50%);
                width: 7px;
                height: 12px;
                background: url('../images/arrow-white-button.png'), top center / contain no-repeat;
                @media (768px > width) {
                    right: 0;
                }
            }
        }
    }
    & .p-mv__list {
        position: relative;
        padding: .5rem 3.125rem 1rem;
        background: var(--color-wh);
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto;
        max-width: 1000px;
        margin: -4rem auto 0;
        border-top-left-radius: 3rem;
        border-top-right-radius: 3rem;
        @media (768px > width) {
            grid-template-columns: repeat(3, 1fr);
            margin: -2rem auto 0;
            padding: 0 0 .75rem;
        }
        & .p-mv__item {
            position: relative;
            display: grid;
            padding: .5rem;
            text-align: center;
            transition: .3s ease;
            background: var(--color-wh);
            @media (768px > width) {
                padding: .375rem;
            }
            &:first-of-type {
                border-top-left-radius: 3rem;
                & .p-mv__link {
                    &::before {
                        @media (768px > width) {
                            position: absolute;
                            content: "";
                            bottom: -8px;
                            left: 50%;
                            transform: translateX(-50%);
                            width: 42px;
                            height: 1px;
                            background: var(--color-border02);
                        }
                    }
                }
            }
            &:nth-of-type(2) {
                & .p-mv__link {
                    &::before {
                        @media (768px > width) {
                            position: absolute;
                            content: "";
                            bottom: -8px;
                            left: 50%;
                            transform: translateX(-50%);
                            width: 42px;
                            height: 1px;
                            background: var(--color-border02);
                        }
                    }
                }
            }
            &:nth-of-type(3) {
                @media (768px > width) {
                    border-top-right-radius: 3rem;
                }
                & .p-mv__link {
                    &::before {
                        @media (768px > width) {
                            position: absolute;
                            content: "";
                            bottom: -8px;
                            left: 50%;
                            transform: translateX(-50%);
                            width: 42px;
                            height: 1px;
                            background: var(--color-border02);
                        }
                    }
                }
            }
            &:last-of-type {
                border-top-right-radius: 3rem;
                @media (768px > width) {
                    border-top-right-radius:0;
                }
            }
            &:not(:last-of-type) {
                &::after {
                    position: absolute;
                    content: "";
                    top: 50%;
                    right: 0;
                    transform: translateY(-50%);
                    width: 1px;
                    height: 42px;
                    background: var(--color-border02);
                }
            }
            &:hover {
                a {
                    @media (768px < width) {
                        border-radius: .625rem;
                        background: #E6E8EF80;
                    }
                    &::after {
                        @media (768px < width) {
                            transform: translateX(-50%) scale(1);
                            transform-origin: center;
                        }
                    }
                }
                img {
                    @media (768px < width) {
                        transform: scale(.9);
                    }
                }
            }
            & .p-mv__link {
                position: relative;
                display: grid;
                grid-template-rows: subgrid;
                grid-row: span 3;
                gap: .375rem;
                text-align: center;
                padding: 1.5rem .75rem;
                line-height: 1;
                @media (768px > width) {
                    padding: .625rem;
                }
                & .p-mv__linkText {
                    margin-top: .5rem;
                    font-size: .875rem;
                    font-weight: 700;
                    color: var(--color-main);
                    @media (768px > width) {
                        margin-top: .25rem;
                    }
                }
                & .p-mv__linkTextEn {
                    font-size: .625rem;
                    color: var(--color-main);
                }
                &::after {
                    position: absolute;
                    content: "";
                    top: 12%;
                    left: 50%;
                    transform: translateX(-50%) scale(0);
                    transform-origin: center;
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    transition: .3s ease;
                    background: var(--color-wh);
                    z-index: 1;
                }
                img {
                    width: 32px;
                    height: 30px;
                    margin: 0 auto;
                    transition: .3s ease;
                    z-index: 2;
                    &.features {
                        width: 27px;
                        height: 32px;
                    }
                    &.departments {
                        width: 21px;
                        height: 29px;
                    }
                    &.staff {
                        width: 28px;
                        height: 35px;
                    }
                    &.news {
                        width: 22px;
                        height: 33px;
                    }
                    &.beginner {
                        width: 21px;
                        height: 32px;
                    }
                }
            }
        }
    }
    .p-about__img {
        width: 100%;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}
.p-business {
    position: relative;
    padding: 4.625rem 0 4.375rem;
    box-shadow: 0 0 20px #7D8FD080;
    @media (768px > width) {
        padding: 3.125rem 0 3.75rem;
    }
    & .p-business__inner {
        display: flex;
        justify-content: center;
        gap: clamp(2.75rem, 8vw, 5.75rem);
        @media (768px > width) {
            flex-direction: column;
        }
        & .p-business__table {
            margin-top: 1.125rem;
        }
        & .p-business__date {
            width: 100%;
            min-width: 335px;
            @media (1024px > width) {
                width: auto;
            }
        }
        & .p-business__content {
            .c-cta__link {
                @media (1024px > width) {
                    flex-wrap: wrap;
                }
                @media (768px > width) {
                    gap: 0;
                }
            }
            @media (768px > width) {
                margin-top: 0;
            }
        }
        & .c-cta__content {
            &:not(:first-of-type) {
                margin-top: 1.5rem;
            }
        }
        & .c-cta__title {
            color: var(--color-main);
            @media (768px > width) {
                flex-direction: column;
            }
        }
        & .c-cta__button {
            margin-top: 1.375rem;
            &.tel {
                color: var(--color-sub);
                border: 2px solid var(--color-sub);
                &::before {
                    left: 9%;
                    background: url(../images/icon-tel-orange.png), top center / contain no-repeat;
                    @media (768px > width) {
                        left: 14%;
                    }
                }
                &::after {
                    content: none;
                }
                > div {
                    &::before {
                        position: absolute;
                        content: "";
                        top: 50%;
                        left: 85%;
                        transform: translateY(-50%);
                        width: 0;
                        height: 2px;
                        background: transparent;
                        transition: .3s ease;
                    }
                    &::after {
                        position: absolute;
                        content: "";
                        top: 50%;
                        right: 1rem;
                        transform: translateY(-50%);
                        width: 7px;
                        height: 12px;
                        background: url(../images/arrow-org-button.png), top center / contain no-repeat;
                    }
                }
                &:hover {
                    > div {
                        position: relative;
                        &::before {
                            width: calc(7% + 2.5px);
                            height: 2px;
                            background: var(--color-sub);
                        }
                    }
                }
            }
            &::after {
                content: none;
            }
            > div {
                position: relative;
                &::before {
                    position: absolute;
                    content: "";
                    top: 50%;
                    left: 85%;
                    transform: translateY(-50%);
                    width: 0;
                    height: 2px;
                    background: transparent;
                    transition: .3s ease;
                }
                &::after {
                    position: absolute;
                    content: "";
                    top: 50%;
                    right: 1rem;
                    transform: translateY(-50%);
                    width: 7px;
                    height: 12px;
                    background: url(../images/arrow-white-button.png), top center / contain no-repeat;
                }
            }
            &:hover {
                > div {
                    position: relative;
                    &::before {
                        width: calc(7% + 2.5px);
                        height: 2px;
                        background: var(--color-wh);
                    }
                }
            }
            &.access {
                @media (768px > width) {
                    width: 245px;
                    margin: 1.375rem auto 0;
                }
            }
        }
    }
}
.p-about {
    padding: 10.625rem 0 calc(154/1400 * 100vw);
    @media (768px > width) {
        padding: 4.125rem 0 0;
    }
    & .p-about__inner {
        position: relative;
        display: flex;
        justify-content: flex-end;
        @media (1024px > width) {
            flex-direction: column;
        }
        & .p-about__img {
            z-index: 2;
            position: absolute;
            top: 0;
            left: 0;
            width: calc(699/1400 * 100vw);
            height: 600px;
            margin-top: -4.625rem;
            margin-left: calc(50% - 50vw);
            @media (1024px > width) {
                width: calc(350/375 * 100vw);
                height: calc(370/375 * 100vw);
                margin-top: 0;
            }
            & .p-about__imgContent {
                width: 100%;
                height: 100%;
                background-image: url(../images/about-img01.webp);
                background-position: center top;
                background-size: cover;
                background-repeat: no-repeat;
                z-index: 1;
                border-top-right-radius: 1rem;
                border-bottom-right-radius: 1rem;
                @media (768px > width) {
                    background-image: url(../images/about-img01-sp.webp);
                }
            }
        }
        & .p-about__content {
            margin: 0 calc(50% - 50vw) 0 auto;
            padding: 0 max(1.25rem, calc((100% - 1100px) / 2)) 5.25rem  calc(226/1400 * 100%);
            width: calc(850/1400 * 100vw);
            border-bottom-left-radius: .625rem;
            border-bottom-right-radius: .625rem;
            background: var(--color-bg02);
            /* @media (1280px > width) {
                padding: 0 calc(112/1400 * 100%) 4.25rem calc(186/1400 * 100%);
            } */
            @media (1024px > width) {
                position: static;
                width: 100%;
                margin: calc(362/375 * 100%) 0 auto;
                padding: 0 1.25rem 3.75rem;
            }
            & .p-about__title {
                position: relative;
                display: flex;
                justify-content: space-between;
                margin-top: -1.5rem;
                z-index: 2;
                & .c-title {
                    @media (1024px > width) {
                        text-align: left;
                    }
                    @media (768px > width) {
                        margin-left: 2.125rem;
                    }
                    p {
                        display: inline-block;
                    }
                    &::before {
                        margin: -.625rem 0 0 -10.125rem;
                        @media (1024px > width) {
                            margin: -0.625rem 0 0 -3.125rem;
                        }
                        @media (768px > width) {
                            margin: -.625rem 0 0 -2.25rem;
                        }
                    }
                }
            }
            & .p-about__subTitle {
                margin-top: 3rem;
                letter-spacing: .1rem;
                font-size: 1.875rem;
                font-weight: 600;
                @media (768px > width) {
                    margin-top: 2rem;
                    font-size: 1.5rem;
                }
            }
            & .p-about__text {
                margin-top: 2.1875rem;
                line-height: calc(28/15);
                font-weight: 500;
                @media (768px > width) {
                    margin-top: 1.875rem;
                    font-size: .9375rem;
                }
            }
            & .p-about__list {
                margin-top: 3.25rem;
                @media (768px > width) {
                    margin-top: 3rem;
                }
                & .p-about__item {
                    position: relative;
                    padding: .125rem 0;
                    background-image : linear-gradient(to right, var(--color-border), var(--color-border) 4px, transparent 2px, transparent 8px);  /* 幅2の線を作る */
                    background-size: 10px 2px;          /* グラデーションの幅・高さを指定 */
                    background-position: left bottom;  /* 背景の開始位置を指定 */
                    background-repeat: repeat-x;
                    &::before {
                        position: absolute;
                        content: "";
                        top: 50%;
                        right: 3rem;
                        transform: translateY(-50%);
                        width: 0;
                        height: 1px;
                        background: transparent;
                        transition: .3s ease;
                    }
                    &::after {
                        position: absolute;
                        content: "";
                        top: 50%;
                        right: 1rem;
                        transform: translateY(-50%);
                        width: 8px;
                        height: 16px;
                        background: url(../images/arrow-navy.png), top center / contain no-repeat;
                    }
                    &:first-of-type {
                        background-image: 
                        linear-gradient(to right, var(--color-border), var(--color-border) 4px, transparent 2px, transparent 8px),
                        linear-gradient(to right, var(--color-border), var(--color-border) 4px, transparent 2px, transparent 8px);
                        background-position: left top, left bottom;
                        background-repeat: repeat-x, repeat-x;
                        background-size: 10px 2px, 10px 2px;
                    }
                    & .p-about__link {
                        display: flex;
                        align-items: center;
                        gap: 1.5rem;
                        padding: .875rem 0 .875rem 1rem;
                        font-size: 1.125rem;
                        font-weight: 600;
                        color: var(--color-bk);
                        img {
                            width: 50px;
                        }
                        &:hover {
                            opacity: 1;
                            color: var(--color-main);
                            background: var(--color-hover);
                        }
                    }
                    &:hover {
                        &::before {
                            width: 30px;
                            height: 2px;
                            right: 1.125rem;
                            background: var(--color-main);
                            opacity: 1;
                        }
                    }
                }
            }
        }
    }
}
.p-features {
    overflow-x: hidden;
    padding: 1rem 0 0;
    @media (768px > width) {
        padding: 3.75rem 0 0;
    }
    & .p-features__title {
        display: flex;
        justify-content: space-between;
        @media (768px > width) {
            flex-direction: column;
            gap: 1.125rem;
        }
    }
    & .p-features__text {
        margin-top: 1.875rem;
        font-weight: 500;
        @media (768px > width) {
            margin-top: .75rem;
        }
    }
    .swiper {
        display: flex;
        width: 94.4125vw;
        margin-top: 3.75rem;
        @media (768px > width) {
            width: 100%;
            margin-top: 1.25rem;
            padding-bottom: 3rem;
        }
        .swiper-pagination {
            position: static;
            display: flex;
            flex-direction: column;
            gap: 2rem;
            padding-top: .25rem;
            padding-right: calc(367/1400 * 100vw);
            background: var(--color-wh);
            @media (1024px > width) {
               gap: 1.5rem;
            }
            @media (768px > width) {
                position: absolute;
                bottom: 10px;
                margin: 0 auto;
                flex-direction: row;
                justify-content: center;
                gap: 1.125rem;
                padding-right: 0;
                background: transparent;
            }
            & .swiper-nav-list {
                display: flex;
                align-items: center;
                & .bullet-text {
                    white-space: nowrap;
                    padding-left: 2rem;
                    font-size: 1.0625rem;
                    font-weight: 500;
                    color: var(--color-bk);
                    opacity: 1;
                    @media (1024px > width) {
                        font-size: .9375rem;
                    }
                }
            }
            & .swiper-pagination-bullet {
                width: 14px;
                height: 14px;
                margin: 0;
                opacity: 1;
                background: var(--color-border02);
                &.swiper-pagination-bullet-active {
                    background: var(--color-sub);
                }
            }
        }
        /* & .swiper-button-prev {
            transform: translateY(-50%);
            content: "";
            top: 50%;
            left: -20px;
            width: 54px;
            height: 54px;
            border: 1.5px solid var(--color-main);
            border-radius: 50%;
            background: var(--color-wh);
            @media (1024px > width) {
                width: 40px;
                height: 40px;
            }
            &::after {
                position: absolute;
                content: "";
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 7px;
                height: 12px;
                background: url(../images/arrow-navy-prev.png), top center / contain no-repeat;
            }
        }
        & .swiper-button-next {
            transform: translateY(-50%);
            content: "";
            top: 50%;
            left: unset;
            right: -20px;
            width: 54px;
            height: 54px;
            border: 1.5px solid var(--color-main);
            border-radius: 50%;
            background: var(--color-wh);
            @media (1024px > width) {
                width: 40px;
                height: 40px;
            }
            &::after {
                position: absolute;
                content: "";
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 7px;
                height: 12px;
                background: url(../images/arrow-navy-next.png), top center / contain no-repeat;
            }
        } */
    }
    & .p-features__arrow {
        position: relative;
        margin-top: 1rem;
        @media (1280px > width) {
            margin-top: 2.5rem;
        }
        @media (768px > width) {
            position: static;
        }
        &.sp-parent {
            @media (768px > width) {
                position: relative;
                margin-top: 0;
            }
        }
        & .swiper-button-prev {
            top: unset;
            content: "";
            bottom: 0;
            left: 0;
            width: 54px;
            height: 54px;
            border: 1.5px solid var(--color-main);
            border-radius: 50%;
            background: var(--color-wh);
            @media (1280px > width) {
                bottom: -1rem;
            }
            @media (1024px > width) {
                width: 40px;
                height: 40px;
            }
            @media (768px > width) {
                bottom: unset;
                top: 50%;
                transform: translateY(-50%);
                left: -16px;
            }
            &::after {
                position: absolute;
                content: "";
                left: 50%;
                transform: translateX(-50%);
                width: 7px;
                height: 12px;
                background: url(../images/arrow-navy-prev.png), top center / contain no-repeat;
            }
            &:hover {
                background: var(--color-main);
                &::after {
                    background: url(../images/arrow-navy-prev-white.png), top center / contain no-repeat;
                }
            }
        }
        & .swiper-button-next {
            top: unset;
            content: "";
            bottom: 0;
            right: unset;
            left: 76px;
            width: 54px;
            height: 54px;
            border: 1.5px solid var(--color-main);
            border-radius: 50%;
            background: var(--color-wh);
            transition: .3s ease;
            @media (1280px > width) {
                bottom: -1rem;
            }
            @media (1024px > width) {
                width: 40px;
                height: 40px;
            }
            @media (768px > width) {
                bottom: unset;
                top: 50%;
                transform: translateY(-50%);
                left: unset;
                right: -16px;
            }
            &::after {
                position: absolute;
                content: "";
                left: 52%;
                transform: translateX(-50%);
                width: 7px;
                height: 12px;
                background: url(../images/arrow-navy-next.png), top center / contain no-repeat;
            }
            &:hover {
                background: var(--color-main);
                &::after {
                    background: url(../images/arrow-navy-next-white.png), top center / contain no-repeat;
                }
            }
        }
    }
}

.p-departments  {
    background: linear-gradient(to bottom, var(--color-wh) 0%, var(--color-wh) 34.9%, var(--color-bg02) 35%,var(--color-bg02) 100%);
    padding: 7rem 0;
    @media (768px > width) {
        padding: 3.75rem 0;
        background: linear-gradient(to bottom, var(--color-wh) 0%, var(--color-wh) 24.9%, var(--color-bg02) 25%,var(--color-bg02) 100%);
    }
    & .p-departments__title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 3.75rem;
        @media (768px > width) {
            flex-direction: column;
            gap: 1.125rem;
        }
        & .c-title {
            &::before {
                @media (768px > width) {
                    width: 100vw;
                }
            }
        }
    }
    & .p-departments__list {
        display: flex;
        justify-content: center;
        gap: 3.75rem;
        margin: 0 auto;
        padding: 0;
        @media (1280px > width) {
            gap: 2rem;
        }
        @media (768px > width) {
            flex-direction: column;
            align-items: center;
            gap: 3.75rem;
        }
        & .p-departments__item {
            display: flex;
            flex-direction: column;
            width: calc(100% / 3);
            max-width: 326px;
            border-radius: .625rem;
            /* box-shadow: 0 0 .625rem #00000040; */
            @media (768px > width) {
                width: 100%;
                max-width: fit-content;
            }
            & .p-departments__link {
                overflow: hidden;
                position: relative;
                display: flex;
                flex-direction: column;
                border-radius: .75rem;
                font-size: .875rem;
                transition: .4s ease;
                @media (768px > width) {
                    margin: 0 auto .5rem;
                }
                img {
                    transition: .4s ease;
                }
                &:hover {
                    img {
                        transform: scale(1.05);
                    }
                    & .p-departments__content {
                        & .p-departments__button {
                            color: var(--color-main);
                            background: var(--color-wh);
                        }
                    }

                }
                & .p-departments__content {
                    position: absolute;
                    content: "";
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    & .p-departments__subject {
                        text-align: center;
                        margin-bottom: 1.375rem;
                        font-size: 1.375rem;
                        font-weight: 600;
                        color: var(--color-wh);
                    }
                    & .p-departments__button {
                        white-space: nowrap;
                        padding: .375rem 1.5rem;
                        border: 2px solid var(--color-wh);
                        color: var(--color-wh);
                        font-weight: 700;
                        border-radius: 3.75rem;
                    }
                }
            }
            & .p-departmentsDetail {
                position: relative;
                flex-grow: 1;
                text-align: center;
                margin-top: 1.875rem;
                padding: 2.625rem 0 0;
                background: var(--color-bg03);
                border-radius: .625rem;
                img {
                    position: absolute;
                    top: -25px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 50px;
                }
                & .p-departmentsDetail__title {
                    font-size: 1.125rem;
                    font-weight: 600;
                    color: var(--color-main);
                }
                & .p-departmentsDetail__list {
                    display: grid;
                    justify-content: center;
                    grid-template-columns: 1fr 1fr 1fr;
                    gap: .625rem;
                    padding: 1rem 1.875rem 1rem;
                    border-radius: .625rem;
                    line-height: 1.25;
                    &.parent{
                        grid-template-columns: 1fr;
                        gap: 0;
                        margin-top: 1.375rem;
                        padding: 0;
                        & .p-departmentsDetail__item {
                            position: relative;
                            padding: .125rem 0;
                            background-image: linear-gradient(to right, var(--color-border), var(--color-border) 4px, transparent 2px, transparent 8px);
                            background-size: 10px 2px;
                            background-position: left top;
                            background-repeat: repeat-x;
                            &:last-of-type {
                                padding: .125rem 0 0;
                                & .p-departmentsDetail__link {
                                    padding: 1.25rem 0 1.25rem 1.875rem;
                                }
                            }
                            &::before {
                                position: absolute;
                                content: "";
                                top: 50%;
                                right: calc(2rem + 28px);
                                transform: translateY(-50%);
                                width: 0;
                                height: 2px;
                                background: transparent;
                                transition: .3s ease;
                            }
                            &::after {
                                position: absolute;
                                content: "";
                                top: 50%;
                                right: 2rem;
                                transform: translateY(-50%);
                                width: 6px;
                                height: 12px;
                                background: url('../images/arrow-bk.png'), top center / cover no-repeat;
                            }
                            & .p-departmentsDetail__link {
                                display: block;
                                padding: 1.125rem 0 1.125rem 1.875rem;
                                font-size: .9375rem;
                                font-weight: 600;
                                color: var(--color-bk);
                            }
                            &:hover {
                                &::before {
                                    right: 2rem;
                                    width: 28px;
                                    background: var(--color-bk);
                                }
                                & .p-departmentsDetail__link {
                                    opacity: 1;
                                    color: var(--color-main);
                                    background: var(--color-hover);
                                    border-bottom-left-radius: 0.625rem;
                                    border-bottom-right-radius: 0.625rem;
                                }
                            }
                        }
                    }
                    &.double {
                        grid-template-columns: 1fr 1fr;
                        /* padding: 0; */
                    }
                    & .p-departmentsDetail__item {
                        text-align: left;
                        font-size: .9375rem;
                        font-weight: 500;
                        span {
                            display: inline-block;
                            width: 8px;
                            height: 8px;
                            transform: translate(-6px, -1px);
                            border-radius: 50%;
                            background: var(--color-main);
                        }
                    }
                }
            }
        }  
    }
    & .p-departments__bnr {
        display: block;
        margin-top: 5rem;
        transition: .3s ease;
        &:hover {
            opacity: .8;
        }
    }
}


.p-news {
    padding: 7rem 0;
    background: var(--color-bg02);
    @media (768px > width) {
        padding: 3.25rem 0 3.75rem;
    }
    & .p-news__content {
        display: flex;
        justify-content: space-between;
        @media (768px > width) {
            flex-direction: column;
        }
    }
    & .p-news__bnr {
        display: block;
        margin-top: 5rem;
        @media (768px > width) {
            margin-top: 3.75rem;
        }
        &:hover {
            opacity: .8;
        }
    }
    & .p-news__list {
        width: 100%;
        max-width: 700px;
        /* margin-top: 2.75rem; */
        margin-left: 1rem;
        @media (768px > width) {
            margin-top: 2.5rem;
            margin-left: 0;
        }
    }
    & .p-news__item {
        position: relative;
        padding: .125rem 0;
        background-image: linear-gradient(to right, var(--color-border), var(--color-border) 4px, transparent 2px, transparent 8px);
        background-size: 10px 2px;
        background-position: left bottom;
        background-repeat: repeat-x;
        &:first-of-type {
            background-image: 
            linear-gradient(to right, var(--color-border), var(--color-border) 4px, transparent 2px, transparent 8px),
            linear-gradient(to right, var(--color-border), var(--color-border) 4px, transparent 2px, transparent 8px);
            background-position: left top, left bottom;
            background-repeat: repeat-x, repeat-x;
            background-size: 10px 2px, 10px 2px;
        }
    }
    & .p-news__link {
        display: flex;
        align-items: center;
        padding: 1.25rem 2rem 1.25rem 1.25rem;
        @media (768px > width) {
            flex-direction: column;
            align-items: flex-start;
            gap: .625rem;
            padding: 1.125rem 2rem 1.125rem 0;
        }
        &::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 {
            @media (768px < width) {
                background: var(--color-hover);
            }
            &::before {
                @media (768px < width) {
                    right: 1.375rem;
                    width: 24px;
                    height: 2px;
                    background: var(--color-main);
                }
            }
            & .p-news__subject {
                @media (768px < width) {
                    color: var(--color-main);
                }
            }
        }
        & .p-news__tag {
            display: flex;
            align-items: center;
        }
        & .p-news__date {
            font-size: .875rem;
            font-weight: 500;
            color: var(--color-bk);
            @media (768px > width) {
                font-size: .75rem;
            }
        }
        & .p-news__category {
            overflow: hidden;
            display: inline-block;
            min-width: 64px;
            max-width: 110px;
            white-space: nowrap;
            margin-left: 1.25rem;
            padding: .25rem .375rem;
            border-radius: .1875rem;
            line-height: 1;
            font-size: .8125rem;
            font-weight: 700;
            color: var(--color-wh);
            background-color: var(--color-sub);
            @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;
            transition: .3s ease;
        }
        &:hover {
            &::before {
                transform: translate(6px, -50%);
            }
        }
    }
}

/* トップ Product Information / メーカー（Figma 833:10419） */
.p-frontProducts {
    position: relative;
    overflow: hidden;
    padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem);
    background: #fff;
    & .p-frontProducts__stripe {
        position: absolute;
        left: -25%;
        top: 8%;
        width: 150%;
        height: 22rem;
        background: linear-gradient(90deg, #f6f6f6 0%, #ffffff 45%);
        transform: rotate(25.84deg);
        transform-origin: center center;
        pointer-events: none;
        z-index: 0;
        @media (768px > width) {
            height: 12rem;
            top: 4%;
        }
    }
    & .p-frontProducts__inner {
        position: relative;
        z-index: 1;
    }
    & .p-frontProducts__header {
        text-align: center;
        margin-bottom: clamp(1.5rem, 3vw, 2rem);
    }
    & .p-frontProducts__titleEn {
        margin: 0;
        font-size: clamp(2rem, 5vw, 3.8125rem);
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: 0.01em;
        color: #0e1a82;
    }
    & .p-frontProducts__titleJa {
        margin: 0.35rem 0 0;
        font-size: clamp(1.25rem, 2.8vw, 1.8125rem);
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: 0.1em;
        color: #0e1a82;
    }
    & .p-frontProducts__titleRule {
        display: block;
        width: 4.25rem;
        height: 3px;
        margin: 0.85rem auto 0;
        background: #0e1a82;
    }
    & .p-frontProducts__intro {
        text-align: left;
        max-width: 61.4375rem;
        margin: 0 auto clamp(2rem, 4vw, 7rem);
        font-size: 1.125rem;
        font-weight: 400;
        line-height: calc(30 / 18);
        letter-spacing: 0.1em;
        color: rgba(25, 28, 53, 0.6);
        @media (768px > width) {
            font-size: .9375rem;
        }
    }
    & .p-frontProducts__subhead {
        margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
        font-size: clamp(1.25rem, 2.2vw, 1.8125rem);
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: 0.1em;
        text-align: center;
        color: #0e1a82;
    }
    & .p-frontProducts__block {
        margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
        &:last-child {
            margin-bottom: 0;
        }
    }
    & .p-frontProducts__band {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 3.4375rem;
        margin-bottom: 1.875rem;
        padding: 0.65rem 1rem;
        background: #f4f4f4;
        box-sizing: border-box;
        @media (768px > width) {
            margin-bottom: 1rem;
        }
    }
    & .p-frontProducts__bandTitle {
        margin: 0;
        font-size: clamp(1.0625rem, 2vw, 1.4375rem);
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: 0.1em;
        text-align: center;
        color: #0e1a82;
    }
    & .p-frontProducts__grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .9375rem;
        margin: 0;
        padding: 0;
        list-style: none;
        width: 100%;
        @media (1024px > width) {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        &.p-frontProducts__grid--overseas {
            display: block;
            & .p-frontProducts__list--overseas {
                display: grid;
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: .9375rem;
                margin: 0;
                padding: 0;
                list-style: none;
                width: 100%;
                @media (1024px > width) {
                    grid-template-columns: repeat(3, minmax(0, 1fr));
                }
            }
        }
        &.p-frontProducts__grid--domestic {
            & .p-frontProducts__col {
                flex: 0 0 25%;
                min-width: 0;
                @media (1024px > width) {
                    flex: none;
                    width: 100%;
                }
            }
        }
    }
    & .p-frontProducts__col {
        margin: 0;
        padding: 0;
        list-style: none;
        @media (1024px > width) {
            border-right: none;
        }
    }
    & .p-frontProducts__col:last-child {
        @media (1024px > width) {
            border-bottom: none;
        }
    }
    & .p-frontProducts__cell {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    & .p-frontProducts__col .p-frontProducts__cell:last-child {
        border-bottom: none;
    }
    & .p-frontProducts__card {
        position: relative;
        display: block;
        min-height: 17.5625rem;
        color: inherit;
        text-decoration: none;
        transition: background 0.2s ease;
        @media (1024px > width) {
            min-height: auto;
        }
        &:hover {
            background: #fafbff;
        }
    }
    & .p-frontProducts__cardInner {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 17.5625rem;
        background: #fff;
        border-bottom: 1px solid #e4e4e4;
        box-sizing: border-box;
        @media (1024px > width) {
            min-height: auto;
        }
    }
    & .p-frontProducts__photoWrap {
        position: relative;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.625rem 10.5% 0.75rem;
        box-sizing: border-box;
    }
    & .p-frontProducts__photo {
        width: 100%;
        aspect-ratio: 416 / 375;
        object-fit: cover;
        display: block;
        border-radius: 2px;
        &.p-frontProducts__photo--placeholder {
            background: linear-gradient(160deg, #eef0f5 0%, #e2e5ec 100%);
        }
    }
    & .p-frontProducts__photoLabel {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        background: rgba(14, 26, 130, 0.88);
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: 0.08em;
        text-align: center;
        color: #fff;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
        pointer-events: none;
        z-index: 2;
    }
    & .p-frontProducts__logoWrap {
        display: none;
        align-items: center;
        justify-content: center;
        min-height: 3.25rem;
        padding: 0.5rem 12.5% 1.25rem;
        box-sizing: border-box;
    }
    & .p-frontProducts__logo {
        max-width: 100%;
        max-height: 2.75rem;
        width: auto;
        height: auto;
        object-fit: contain;
    }
    & .p-frontProducts__logoText {
        font-size: 0.8125rem;
        font-weight: 700;
        line-height: 1.35;
        letter-spacing: 0.05em;
        text-align: center;
        color: #0e1a82;
    }
    & .p-frontProducts__card:hover .p-frontProducts__photoLabel,
    & .p-frontProducts__card:focus-visible .p-frontProducts__photoLabel {
        opacity: 1;
        visibility: visible;
    }
}

/* トップ Company Information（Figma 833:10391） */
.p-frontCompany {
    position: relative;
    overflow: hidden;
    padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(4rem, 8vw, 6rem);
    background: #fff;
    & .p-frontCompany__stripe {
        position: absolute;
        left: -25%;
        top: 12%;
        width: 150%;
        height: 22rem;
        background: linear-gradient(90deg, #f6f6f6 0%, #ffffff 45%);
        transform: rotate(25.84deg);
        transform-origin: center center;
        pointer-events: none;
        z-index: 0;
        @media (768px > width) {
            height: 13rem;
            top: 6%;
        }
    }
    & .p-frontCompany__inner {
        position: relative;
        z-index: 1;
    }
    & .p-frontCompany__header {
        text-align: center;
        margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
    }
    & .p-frontCompany__hgroup {
        margin-bottom: 5.625rem;
        text-align: center;
        @media (768px > width) {
            margin-bottom: 3.75rem;
        }
    }
    & .p-frontCompany__titleEn {
        margin: 0;
        font-size: clamp(2rem, 5vw, 3.8125rem);
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: 0.01em;
        color: #0e1a82;
    }
    & .p-frontCompany__titleJa {
        margin: 0.35rem 0 0;
        font-size: clamp(1.25rem, 2.8vw, 1.8125rem);
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: 0.1em;
        color: #0e1a82;
    }
    & .p-frontCompany__titleRule {
        display: block;
        width: 4.25rem;
        height: 3px;
        margin: 0.85rem auto 0;
        background: #0e1a82;
    }
    & .p-frontCompany__layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 38.6875rem);
        gap: clamp(2rem, 5vw, 3.75rem);
        align-items: start;
        @media (1024px > width) {
            grid-template-columns: 1fr;
        }
    }
    & .p-frontCompany__body {
        min-width: 0;
    }
    & .p-frontCompany__text {
        max-width: 35.625rem;
        font-size: 1.125rem;
        font-weight: 500;
        line-height: calc(31 / 18);
        letter-spacing: 0.1em;
        color: rgba(25, 28, 53, 0.6);
        & p {
            margin: 0 0 1.25rem;
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
    & .p-frontCompany__btn {
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        max-width: 327px;
        margin: 2rem 1rem 0 auto;
        padding: 1.875rem 3.5rem 1.875rem 4rem;
        border: 1px solid #0e1a82;
        background: #fff;
        color: #0e1a82;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: 0.1em;
        text-decoration: none;
        transform: skewX(-11deg);
        transition: background 0.2s ease, color 0.2s ease;
        @media (768px > width) {
            margin: 2rem auto 0;
            padding: 1.375rem 3.5rem 1.375rem 4rem;
        }
        & .p-frontCompany__btnLabel {
            display: block;
            transform: skewX(11deg);
        }
        &::after {
            position: absolute;
            content: "";
            top: 50%;
            right: 2.375rem;
            transform: translateY(-50%) skewX(11deg);
            width: 21px;
            height: 21px;
            background: url(../images/icon-arrow-right.png) top center / cover no-repeat;
            border-radius: 0;
        }
        &:hover {
            background: #0e1a82;
            color: #fff;
            &::after {
                background: url(../images/icon-arrow-hover.png) top center / cover no-repeat;
            }
        }
    }
    & .p-frontCompany__media {
        position: relative;
        justify-self: end;
        width: 100%;
        max-width: 38.6875rem;
        @media (1024px > width) {
            justify-self: stretch;
            max-width: none;
        }
    }
    & .p-frontCompany__mediaShadow {
        position: absolute;
        right: 0.25rem;
        top: 1.5rem;
        width: 86%;
        height: 66%;
        background: #515151;
        opacity: 0.16;
        filter: blur(12px);
        border-radius: 2px;
        z-index: 0;
        pointer-events: none;
    }
    & .p-frontCompany__mediaFrame {
        position: relative;
        z-index: 1;
        overflow: hidden;
        border-radius: 2px;
        aspect-ratio: 619 / 449;
    }
    & .p-frontCompany__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}

/* トップ News（Figma 833:10390）— news CPT 最新3件 */
.p-frontNews {
    position: relative;
    overflow: hidden;
    padding: clamp(3.5rem, 7vw, 5.75rem) 0;
    background: #0e1a82;
    color: #fff;
    & .p-frontNews__decor {
        position: absolute;
        left: 0;
        bottom: 0;
        width: min(45vw, 40.875rem);
        height: min(52vw, 25rem);
        background: linear-gradient(
            148deg,
            rgba(164, 172, 244, 0.28) 0%,
            rgba(164, 172, 244, 0.08) 42%,
            rgba(14, 26, 130, 0) 70%
        );
        pointer-events: none;
    }
    & .p-frontNews__inner {
        position: relative;
        z-index: 1;
    }
    & .p-frontNews__layout {
        display: grid;
        grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
        gap: clamp(2rem, 5vw, 5rem);
        align-items: start;
        @media (960px > width) {
            grid-template-columns: 1fr;
        }
    }
    & .p-frontNews__head {
        padding-top: 0.25rem;
    }
    & .p-frontNews__title {
        margin: 0 0 1rem;
        font-size: clamp(2rem, 5vw, 2.8125rem);
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0.1em;
        color: #fff;
    }
    & .p-frontNews__more {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 1rem;
        font-weight: 500;
        line-height: calc(28 / 16);
        letter-spacing: 0.1em;
        color: #fff;
        text-decoration: none;
        transition: opacity 0.2s ease;
        &:hover {
            opacity: 0.85;
        }
    }
    & .p-frontNews__moreIcon {
        display: flex;
        line-height: 0;
        color: #fff;
    }
    & .p-frontNews__list {
        margin: 0;
        padding: 0;
        list-style: none;
        width: 100%;
        max-width: 50rem;
        margin-left: auto;
        border-top: 1px solid #fff;
        @media (960px > width) {
            margin-left: 0;
            max-width: none;
        }
    }
    & .p-frontNews__item {
        border-bottom: 1px solid #fff;
    }
    & .p-frontNews__link {
        position: relative;
        display: block;
        min-height: 8.1875rem;
        padding: 1.75rem 3.5rem 1.75rem 1.6875rem;
        box-sizing: border-box;
        color: inherit;
        text-decoration: none;
        transition: background 0.2s ease;
        &:hover {
            background: rgba(255, 255, 255, 0.06);
        }
        @media (768px > width) {
            min-height: 0;
            padding: 1.25rem 2.75rem 1.25rem 0;
        }
    }
    & .p-frontNews__row--meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.25rem 0.75rem;
        margin-bottom: 0.5rem;
    }
    & .p-frontNews__date {
        font-family: 'Outfit', var(--font-main);
        font-size: 0.9375rem;
        font-weight: 500;
        line-height: calc(28 / 15);
        letter-spacing: 0.05em;
        color: #a4acf4;
    }
    & .p-frontNews__sep {
        width: 1px;
        height: 11px;
        background: #a4acf4;
        flex-shrink: 0;
        opacity: 0.95;
    }
    & .p-frontNews__cat {
        font-size: 0.875rem;
        font-weight: 500;
        line-height: calc(28 / 14);
        letter-spacing: 0.05em;
        color: #a4acf4;
    }
    & .p-frontNews__subject {
        margin: 0;
        padding-right: 0.5rem;
        font-size: 1.125rem;
        font-weight: 500;
        line-height: calc(28 / 18);
        letter-spacing: 0.1em;
        color: #fff;
    }
    & .p-frontNews__arrow {
        position: absolute;
        top: 50%;
        right: 1.25rem;
        transform: translateY(-50%);
        display: flex;
        line-height: 0;
        color: #fff;
        opacity: 0.95;
        @media (768px > width) {
            right: 0.25rem;
        }
    }
    & .p-frontNews__empty {
        margin: 0;
        padding: 2rem 0 0;
        font-size: 0.9375rem;
        color: #a4acf4;
        max-width: 50rem;
        margin-left: auto;
        @media (960px > width) {
            margin-left: 0;
        }
    }
}