* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* モバイル時の指定改行用クラス */
.text-mobile-break {
    display: none;

    @media screen and (max-width: 768px) {
        display: block;
    }
}

/* メインイメージ領域 */
.main_manufacture_hero_image {

    background-image: url(/src/eyes_v3pages/image/manufacturing_page/bg_manu_main_pc_01.jpg);
    background-position: center;
    background-size: cover;
    height: 100svh;
    position: relative;
    
    @media screen and (max-width: 768px) {
        background-color: rgb(1, 101, 162);
        background-position: top;
        background-repeat: no-repeat;
        background-size: contain;
        height: 100svh;
    }

    /* iohone SE */
    @media screen and (max-width: 376px) {
        height: 130svh;
    }

    & .hero_manufacture_text {
        color: #ffffff;
        font-size: 1.3rem;
        font-weight: bold;
        left: 10%;
        position: absolute;
        top: 30%;
        width: 55svw;

        @media screen and (max-width: 768px) {
            font-size: 1rem;
            left: 0%;
            line-height: 1.6;
            top: 15%;
            width: 100svw;
            z-index: 1;
        }

        @media screen and (max-width: 376px) {
            line-height: 1.8;
        }
    }

    & h1 {
        font-size: 2rem;
        padding-bottom: 0.5rem;
        text-align: start;

        @media screen and (max-width: 768px) {
            font-size: 1.8rem;
            padding: 0 0.5rem;
            text-align: center;
        }
    }

    & h3 {
        font-size: 1rem;
        text-align: start;

        @media screen and (max-width: 768px) {
            font-size: 0.8rem;
            line-height: 1.4rem;
            padding: 1rem 0.5rem;
            text-align: center;
        }
    }

    .sub_manufacture_image {
        bottom: -1%;
        /* width: 30svw; */
        height: auto;
        position: absolute;
        right: 10%;

        @media screen and (max-width: 768px) {
            bottom: 0%;
            right: 5%;
        }

        img {
            height: auto;
            width: 35svw;

            @media screen and (max-width: 768px) {
                width: 70svw;
            }

        }

    }
}

.sub_manufacture_text {
    bottom: 20%;
    color: #ffffff;
    position: absolute;
    right: 10%;

    @media screen and (max-width: 768px) {
        bottom: 15%;
        left: 10px;
        right: initial;
        width: 60svw;
    }

    h2 {
        font-size: 1.5rem;
        font-weight: normal;

        @media screen and (max-width: 768px) {
            font-size: 1.2rem;
            padding: 0 0.5rem;
            text-align: center;
        }
    }
}

/* 区切りメッセージ */
.hed_message_are {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 0rem;

    @media screen and (max-width: 768px) {
        padding: 1rem;
    }

    & .flex_message_box {
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: center;

        @media screen and (max-width: 768px) {
            flex-direction: column;
        }
    }

    & .text_color_blue {
        color: #5aabee;
    }

    & h3 {
        font-size: medium;
        font-weight: normal;
        padding-top: 0.5rem;
    }
}

.hope_list {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;

    @media screen and (max-width: 768px) {
        /* background-color: #5aabee; */
        padding: 2rem 1rem 1rem 2rem;
    }

    & .hope_list_item {
        text-align: left;

        @media screen and (max-width: 768px) {
            font-size: small;
        }
    }
}

/* 評価エリア */
.eyes_evaluation_area {
    align-items: center;
    display: flex;
    flex-direction: row;
    height: auto;
    justify-content: center;
    position: relative;

    @media screen and (max-width: 768px) {
        height: auto;
        position: initial;
    }

    & .color_blue {
        background-color: #5aabee;
        height: 100%;
        width: 100%;
    }

    & .color_green {
        background-color: #72dbf7;
        height: 100%;
        width: 100%;
    }

    & .evaluation_position {
        align-items: stretch;
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-bottom: 10px;
        margin-top: -20px;
        position: relative;
        width: 100%;

        @media screen and (max-width: 768px) {
            flex-direction: column;
            position: initial;
        }
    }

    & .evaluation_item {
        background-color: #ffffff;
        margin: 0.5rem;
        padding-bottom: 1rem;
        width: 40svw;

        @media screen and (max-width: 768px) {
            margin: 0.5rem auto;
            padding-bottom: 0;
            width: 90svw;
        }

        & .evaluation_box {
            align-items: start;
            display: flex;
            flex-direction: row;
            justify-content: center;
            padding: 1rem 0 0 1rem;

            @media screen and (max-width: 768px) {
                padding: 1rem 0;
            }

            & img {
                height: auto;
                margin-right: 2rem;
                width: 9svw;

                @media screen and (max-width: 768px) {
                    margin: 0 1rem;
                    width: 30svw;
                }
            }

            & h4 {
                background-color: rgb(102, 168, 245);
                color: white;
                font-size: 1rem;
                font-weight: bold;
                margin-bottom: 1rem;
                padding: 0.5rem 2rem;
                text-align: center;
                width: 90%;

                @media screen and (max-width: 768px) {
                    font-size: 1rem;
                    margin-right: 1rem;
                    padding: 0.3rem 0.2rem;
                }
            }

            & li {
                font-size: 0.9rem;
                padding: 0.1rem;
                text-align: left;

                @media screen and (max-width: 768px) {
                    font-size: 0.8rem;
                }
            }
        }
    }
}

/* 追加サービスエリア */
.add_service_area {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;

    & .color_line_area {
        background-color: #72dbf7;
        display: flex;
        height: 10svh;
        justify-content: center;
        position: relative;
        width: 100%;

        & .service_flex {
            align-items: center;
            display: flex;
            flex-direction: row;
            justify-content: center;
            position: absolute;
            top: 30%;

            & img {
                height: auto;
                width: 10svw;

                @media screen and (max-width: 768px) {
                    width: 30svw;
                }

            }

            & h3 {
                color: rgb(68, 169, 246);
            }
        }
    }
}

/* 区切りメッセージ */
.hed_service_message_are {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 5rem;
    padding: 4rem 0rem;

    @media screen and (max-width: 768px) {
        padding: 1rem;
    }

    & .flex_message_box {
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: center;

        @media screen and (max-width: 768px) {
            flex-direction: column;
        }
    }

    & .underline_box {
        border-bottom: solid 5px #5aabee;
        padding-bottom: 0.5rem;
    }

    & .text_color_blue {
        color: #5aabee;
    }

    & h3 {
        font-size: medium;
        font-weight: bold;
        padding-top: 0.5rem;
        text-align: center;
    }
}

/* 関連サービスエリア */
.related_service_area {
    background-image: url(/src/eyes_v3pages/image/manufacturing_page/bg_add_service_image_pc_01.jpg);
    background-position: center;
    background-size: cover;
    height: 70svh;

    @media screen and (max-width: 768px) {
        background-color: #e6f1f9;
        background-image: url(/src/eyes_v3pages/image/manufacturing_page/bg_add_service_image_sp_01.jpg);
        background-position: center top;
        background-repeat: no-repeat;
        background-size: contain;
        height: auto;
        padding: 2rem 0;
    }

    & .related_contents_box {
        display: flex;
        /* align-items: stretch; */
        flex-direction: row;
        height: 100%;
        justify-content: space-between;

        @media screen and (max-width: 768px) {
            flex-direction: column-reverse;
        }

        & h2 {
            color: rgb(66, 161, 244);
            margin: 1rem 0;

            @media screen and (max-width: 768px) {
                text-align: center;
            }
        }

        .related_service_flex {
            align-items: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 40svw;

            @media screen and (max-width: 768px) {
                height: auto;
                margin: 1rem auto;
                width: 90svw;
            }

            & h4 {
                color: rgb(1, 59, 122);
                font-size: 1rem;
                font-weight: normal;
                margin-top: 1rem;
                width: 60%;

                @media screen and (max-width: 768px) {
                    font-size: 0.8rem;
                    text-align: center;
                    width: 100%;
                }
            }
        }

        & .service_name_box {
            background-color: white;
            border-radius: 3px;
            box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
            color: #333333;
            margin: 0.5rem 0;
            padding: 0.5rem 1rem;
            width: 60%;

            @media screen and (max-width: 768px) {
                font-size: 0.8rem;
                width: 80%;
            }
        }

        & .solution_text_box {
            background-color: #309ff547;
            color: white;
            padding: 1rem;
            text-align: center;
            width: 30svw;

            @media screen and (max-width: 768px) {
                font-size: 0.6rem;
                margin-top: 2rem;
                text-align: right;
                width: 100svw;
            }

            & p {
                margin-top: 0.5rem;
            }
        }
    }
}

/* 個別サービスエリア */
.individual_service_box {
    align-items: center;
    display: flex;
    height: 70svh;
    justify-content: space-between;
    overflow: hidden;

    @media screen and (max-width: 768px) {
        height: auto;
    }

    & .service_box {
        align-items: center;
        background-image: linear-gradient(90deg, #38b1f7, #5d9ef7);
        border-radius: 0 15% 15% 0;
        color: white;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        position: relative;
        width: 40svw;

        @media screen and (max-width: 768px) {
            border-radius: 0 0 0 0;
            display: block;
            padding: 2rem 0;
            width: 70svw;

            & h2,
            p {
                padding: 0 1rem;
            }
        }

        & img {
            height: auto;
            position: absolute;
            right: -30%;
            top: 50%;
            transform: translateY(-50%);
            width: 30svw;

            @media screen and (max-width: 768px) {
                right: -40%;
                width: 40svw;

            }
        }

        & p {
            width: 50%;

            @media screen and (max-width: 768px) {
                font-size: 0.8rem;
                width: 100%;
            }
        }

        & h2 {
            @media screen and (max-width: 768px) {
                font-size: 1rem;
            }
        }
    }

}

/* サービス領域バックグランド指定 */
.service_box_image_buddycom {
    background-image: url(/src/eyes_v3pages/image/manufacturing_page/bg_black_buddycom_back_pc_01.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.service_box_color_black {
    background-color: #016dc5;
}

.service_box_image_eyes {
    background-image: url(/src/eyes_v3pages/image/manufacturing_page/bg_blue_eyes_back_pc_01.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.service_box_image_logi {
    background-image: url(/src/eyes_v3pages/image/manufacturing_page/bg_green_logi_back_pc_01.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.service_box_image_ace {
    background-image: url(/src/eyes_v3pages/image/manufacturing_page/bg_blue_ace_back_pc_01.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}


/* 個別サービスエリア 右*/
.individual_service_box_right {
    align-items: center;
    display: flex;
    height: 70svh;
    justify-content: flex-end;
    overflow: hidden;

    @media screen and (max-width: 768px) {
        height: auto;
    }

    & .service_box_right {
        align-items: center;
        background-image: linear-gradient(90deg, #38b1f7, #5d9ef7);
        border-radius: 15% 0 0 15%;
        color: white;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        position: relative;
        width: 40svw;

        @media screen and (max-width: 768px) {
            align-items: end;
            border-radius: 0 0 0 0;
            padding: 2rem 0;
            width: 70svw;

            & h2,
            p {
                padding: 0 1rem;
                z-index: 1;
            }
        }

        & img {
            height: auto;
            left: -30%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 30svw;

            @media screen and (max-width: 768px) {
                left: -44%;
                width: 40svw;
            }
        }

        & p {
            width: 50%;

            @media screen and (max-width: 768px) {
                font-size: 0.8rem;
                width: 100%;
            }
        }

        & h2 {
            @media screen and (max-width: 768px) {
                font-size: 1rem;
            }
        }
    }

}

.service_detail_box {
    color: white;
    width: 50svw;

    @media screen and (max-width: 768px) {
        display: none;
    }

    & h3 {
        margin: 1rem 0;
    }

    & p {
        margin: 0.5rem 0;
    }

    & .key_message {
        border: 5px solid white;
        padding: 0.5rem 1rem;
        width: fit-content;

        & h2 {
            font-size: large;
        }
    }

    & .more_detail_link {
        font-size: 0.9rem;
        margin-top: 1rem;

        a {
            color: white;
            font-size: medium;
            text-decoration: underline;
        }
    }
}

/* sp調整 モバイル時利用 */
.service_detail_box_sp {
    display: none;

    @media screen and (max-width: 768px) {
        align-items: center;
        background-color: #80c6ff;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 2rem 1rem;

        & h3 {
            font-size: 1rem;
        }

        & p {
            font-size: 0.7rem;
        }

        & .key_message_sp {

            border: 5px solid white;
            margin: 1rem 0;
            padding: 0.5rem 1rem;
            width: fit-content;

            & h2 {
                font-size: 0.8rem;
            }
        }

        & .more_detail_link_sp {
            font-size: 0.9rem;
            margin-top: 1rem;

            & a {
                color: white;
                font-size: medium;
                text-decoration: underline;
            }
        }

    }
}

.add_service_link_area {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 2rem 1rem 0 1rem;

    & a {
        text-decoration: none;
    }

    & .add_link_btn {
        background-color: rgb(169, 4, 169);
        border-radius: 50px;
        color: white;
        padding: 1rem;
        text-align: center;
        transition: 0.5s ease;
        width: 30svw;

        @media screen and (max-width: 768px) {
            width: 80svw;
        }

        &:hover {
            background-color: #972df4;
            box-shadow: 0 8px 16px rgb(251, 150, 251);
            transform: translateX(-3px);
        }
    }
}