/* トップメッセージ */
.top-page-area {
    width: 100%;

    .top-page {
        .top-page-content-area {
            .base-img-area {
                .base-img {
                    width: 100%;
                    height: 100vh;
                    background-size: cover;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        z-index: -1;
                    }

                }

                .front-img {
                    width: 100%;
                    height: 50vh;
                    margin-top: -70vh;
                    position: relative;

                    img {
                        width: 100%;
                        object-fit: cover;
                        position: absolute;
                        top: 0;
                    }
                }
            }

            .top-page-content {
                max-width: 1200px;
                width: 80%;
                z-index: 1;
                position: relative;
                margin: 0 auto;
                margin-top: -22vh;

                .top-page-content-title-area {
                    color: white;
                    font-weight: bold;
                    font-weight: 700;

                    .top-page-content-title {
                        font-size: 60px;
                    }

                    .top-page-content-sub-title {
                        color: white;
                        font-size: 20px;
                        margin-bottom: 40px;
                        font-weight: bold;
                    }

                }

                .top-page-content-text-area {
                    display: flex;
                    margin-top: 140px;

                    .top-page-content-text-img {
                        width: 50%;
                        margin: 0 auto;

                        img {
                            width: 85%;
                            display: block;
                            object-fit: cover;
                        }
                    }

                    .top-page-content-text {
                        width: 100%;
                        color: white;
                        font-size: 20px;
                        line-height: 2;

                        .page-text {
                            width: 80%;
                            margin: 0 auto;
                            position: relative;

                            /* .top-up-text {} */

                            .top-under-text {
                                margin-top: 40px;
                            }

                            .president-name-area {
                                position: absolute;
                                right: 0;

                                .president-area {
                                    font-size: 18px;
                                }

                                .president-name {
                                    font-size: 32px;
                                    font-weight: bold;
                                }

                                .president-name-en {
                                    font-size: 18px;
                                }
                            }
                        }

                    }

                }
            }
        }
    }
}

/* カンパニー */
.company-page-area {
    width: 100%;
    margin-top: 35vh;
    position: relative;

    .company-page {
        max-width: 1200px;
        width: 80%;
        margin: 0 auto;
        margin-top: 150px;

        .company-page-title-area {
            .company-page-title {
                font-weight: bold;
                font-size: 50px;
            }

            .company-page-sub-title {
                font-size: 20px;
                font-weight: 1000;
            }
        }

        .company-page-content-area {
            display: flex;
            margin-top: 50px;
            gap: 3vw;

            .company-page-content-img {
                width: 50%;
                margin: 0 auto;

                img {
                    display: block;
                    width: 100%;
                    object-fit: cover;
                }
            }

            .company-detail-area {
                width: 50%;
                margin: 0 auto;

                ul {
                    .company-detail {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-bottom: 12px;
                        position: relative;
                        padding-bottom: 15px;

                        &::before {
                            content: "";
                            position: absolute;
                            bottom: -2px;
                            left: -10px;
                            width: 80%;
                            height: 2px;
                            background-color: #FF7227;
                        }

                        &::after {
                            content: "";
                            position: absolute;
                            bottom: -2px;
                            left: 110px;
                            width: 80%;
                            height: 2px;
                            background-color: #CBCBCB;
                        }

                        .company-detail-title {
                            width: 30%;
                            font-weight: bold;
                        }

                        .company-detail-content {
                            width: 65%;
                            font-weight: bold;
                        }
                    }
                }
            }

        }
    }
}

/* マップ */
.map-area {
    width: 100%;
    margin: 0 auto;
    margin-top: 120px;
}


.swiper-main {
    width: 100%;
    height: 100%;
}

.swiper-main .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Swiperスライダーエリア */
.company-profile-bottom-img-box {
    width: 100%;
    height: 30%;
    /* サブスライダーの高さ */
    margin-top: 50px;
    position: relative;
}

.swiper-sub {
    width: 100%;
    height: 100%;
}

.swiper-sub .swiper-slide {
    width: 25%;
    /* 1スライドの幅を25%に設定 */
    height: 100%;
}

.swiper-sub .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Swiperのナビゲーションボタンのカスタマイズ */
.swiper-button-next,
.swiper-button-prev {
    color: white;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.swiper-button-prev {
    left: 10px;
}

.swiper-button-next {
    right: 10px;
}

.company-profile-container {
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* メイン画像エリア */
.company-profile-top-img-box {
    width: 100%;
    height: 70%;
    /* メイン画像の高さ */
    position: relative;
}