/* セクション共通 */
.common-section {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    color: white;
}

/* セクション1（背景画像付き） */
.top-view-container {
    background-image: url("../../image/top.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
    justify-self: center;
    background-position: center center; /* 中心を基準に配置 */
}

.top-view-text,
.top-view-text-p {
    position: absolute;
    color: #fff;
    z-index: 3;
}

.top-view-text {
    width: 100%;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5vw;
    /* font-size: 3vw; */
    font-weight: 900;
}

.top-view-text-p {
    text-align: center;
    line-height: 1.4;
    /* font-size: 1.5vw; */
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    font-size: 1.4em;
    p{
        font-size: 1.4em; 
    }
    p:nth-child(2){
        margin: 0.1vw 0;
    }
}

/* 背景に暗いオーバーレイを追加 */
.top-view-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 130%;
    background: rgba(0, 0, 0, 0.3);
    /* 半透明の黒 */
    z-index: -1;
    img{
        height: auto;
    }
}

/*mission*/

.top-mission-container {
    background-color: white;
    color: black;
    z-index: 2;
    padding-top: 80px;
    transform: translateY(-80px);
    /* もう少し重ねる */
    border-top-left-radius:70% 100px;
    /* より丸みを強調 */
    border-top-right-radius: 70% 100px;
    box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.1);
    width: 100vw;
    height: 60vh;
    margin: 0 auto;
    margin-top: -10px;

    .top-mission-bg {
        background: 
        linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)), /* 半透明レイヤー */
        url("../../image/mask.png");
        background-size: cover;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100%;

        .top-mission-text-box {
            h2 {
                color: #ea553a;
                /* font-size: 3.2vw; */
                font-weight: 700;
                margin-bottom: 5vw;
            }

            p {
                text-align: center;
                font-size: 1.5em;
                font-weight: 700;
                line-height: 2;
            }
        }
    }
}

/*top-news*/
.top-news-container {
    width: 70vw;
    margin: 0 auto;
    margin-top: 5vw;

    h2 {
        text-align: center;
        color: #ea553a;
        font-weight: 700;
    }

    .top-news-flexbox-container {
        margin: 5vw 0;

        .top-news-flexbox {
            display: flex;
            padding: 2vw 5vw;
            border-bottom: 1px solid #000;

            .top-news-text-box {
                border: #ea553a 1px solid;
                background-color: #ea553a;
                color: #fff;
                padding: 10px;
            }

            .top-news-flex-right {
                display: flex;
                align-items: center;
                margin-left: 5vw;

                p:nth-child(2) {
                    margin-left: 1.5vw;
                }
            }
        }
    }
}

.readmore-btn {
    width: 300px;
    border: #ea553a 1px solid;
    background-color: #ea553a;
    padding: 1vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    justify-self: anchor-center;
    font-size: 16px;
    font-weight: 200;
    line-height: 1.5;
    color: #fff;

    img {
        height: 1lh;
    }
}

/*top-various*/

.top-various-container-left {
    width: 80vw;
    margin: 5vw auto;
    position: relative;

    .various-left-bg {
        background-image: url("../../image/home.jpg");
        width: 80%;
        height: 50vh;
        object-fit: cover;
        background-position: center center; /* 中央に配置 */
        background-repeat: no-repeat;
        background-size: 100% auto;
    }

    .various-left-box-red,
    .various-left-box-white {
        position: absolute;
        padding: 30px;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 300px;
        height: 200px;
    }

    .various-left-box-red {
        background-color: #ea553a;
    }

    .various-left-box-white {
        background-color: #fff;
        clip-path: polygon(25% 0, 100% 0, 100% 75%, 75% 100%, 0 100%, 0 25%);
    }

    .various-left-text-box {
        position: absolute;
        padding: 30px;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        z-index: 3;

        h3 {
            margin-top: 0;
            justify-self: left;
            color: #ea553a;
            /* font-size: 2vw; */
            font-weight: 600;
        }

        p {
            margin: 1vw auto;
        }
    }
}

.top-various-container-right {
    width: 80vw;
    margin: 10vw auto;
    position: relative;

    .various-right-bg {
        background-image: url("../../image/message_img.jpg");
        width: 80%;
        height: 50vh;
        object-fit: cover;
        /* justify-self: right; */
        /* background-position: center center; */
        background-repeat: no-repeat;
        background-size: 100% auto;
        margin-left: auto; /* ← これで右端に寄る */
    }
    .bg2 {
        background-image: url("../../image/business1.jpeg");
    }

    .various-right-box-red,
    .various-right-box-white {
        position: absolute;
        padding: 30px;
        top: 50%;
        right: left;
        transform: translateY(-50%);
        width: 300px;
        height: 200px;
    }

    .various-right-box-red {
        background-color: #ea553a;
    }

    .various-right-box-white {
        background-color: #fff;
        clip-path: polygon(25% 0, 100% 0, 100% 75%, 75% 100%, 0 100%, 0 25%);
    }

    .various-right-text-box {
        position: absolute;
        padding: 30px;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        z-index: 3;

        h3 {
            margin-top: 0;
            justify-self: left;
            color: #ea553a;
            /* font-size: 2vw; */
            font-weight: 600;
        }

        p {
            margin: 1vw auto;
        }
    }
}

.top-various-container-right-margin{
    margin-bottom: 0;
}

.various-readmore-btn {
    width: 200px;
    border: #ea553a 1px solid;
    background-color: #ea553a;

    padding: 10px;
    padding-left: 5px;
    align-items: center;
    font-size: 0.9em;
    font-weight: 200;
    line-height: 1.5;
    color: #fff;
    a{
        display: flex;
        justify-content: space-between;
        color: #fff;
    }
    img {
        height: 1lh;
    }
}

.top-news-flexbox-container {
    margin: 5vw 0;

    .top-news-flexbox {
        display: flex;
        align-items: center;
        padding: 0 auto;
        border-bottom: 1px solid #000;

        .top-news-text-box {
            font-size: 0.8em;
            border: #ea553a 1px solid;
            background-color: #ea553a;
            color: #fff;
            padding: 5px 15px;
            margin: 10px 0;
        }

        .top-news-flex-right {
            display: flex;
            align-items: center;
            margin-left: 2vw;
            gap: 20px;

            a {
                color: #ea553a;
                text-decoration: underline;
            }
            p{
                font-size: 1.2em;
            }
            p:nth-child(2) {
                margin-left: 1.5vw;
            }
        }

    }
}