/* V30告知ページCSS */
.release_main_area {
    background-image: url(/src/eyes_v3pages/image/bg_v30release_blackcolor_pc.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 110svh;
    position: relative;

    @media (max-width: 768px) {
        height: 170svh;
    }

    .header_contants_area {
        display: flex;
        justify-content: space-between;
        color: white;
        padding: 1vw 2rem;
        align-items: center;

        @media (max-width: 768px) {
            padding: 1.5rem;

            p,
            a {
                font-size: 2.7vw;
            }
        }

        .flex_area {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .header_icon {
        border: 4px solid white;
        border-radius: 20px;
        padding: 0.5rem 1rem;
        font-size: min(1.5vw, 1.5vh);
    }

    a {
        color: white;
        font-size: min(2vw, 2vh);
    }

    /* PCイメージの配置指定 */
    .pc_image_area {
        position: absolute;
        right: 10vw;
        top: 45svh;
        transform: translateY(-50%);
        z-index: 2;
        width: 40vw;

        @media (max-width: 768px) {
            top: 15svh;
            transform: initial;
            width: 90vw;
        }
    }

    /* 画面キャップチャーの配置指定 */
    .capture_image_area {
        position: absolute;
        right: 30vw;
        top: 35svh;
        transform: translateY(-50%);
        width: 35vw;
        z-index: 1;
        opacity: 30%;

        @media (max-width: 768px) {
            top: 15svh;
            right: initial;
            left: 5vw;
            transform: initial;
            width: 90vw;
        }
    }

    /* テキストエリアの配置指定 */
    .main_message_area {
        position: absolute;
        left: 15vw;
        top: 45svh;
        transform: translateY(-50%);
        z-index: 1;
        color: white;
        width: 40vw;

        @media (max-width: 768px) {
            width: auto;
            left: initial;
            top: 45svh;
            transform: initial;
            text-align: center;
        }

        p {
            font-size: min(2.2vw, 2.2vh);

            @media (max-width: 768px) {
                font-size: min(4vw, 4vh);
                width: auto;
                /* text-align: centers; */
                padding: 1rem;
            }
        }

        h1 {
            font-size: min(7vw, 7vh)
        }

        h2 {
            padding: 1rem 0;

            @media (max-width: 768px) {
                font-size: 4.5vw;
                width: auto;
            }
        }

        .link_button {
            background-image: linear-gradient(90deg, #22d3ee, #348cf7);
            border-radius: 20px;
            padding: 0.5rem 1rem;
            text-align: center;
            width: 300px;
            font-weight: bold;
            margin: 1rem 0;

            @media (max-width: 768px) {
                margin: 1rem auto;
                width: 90vw;

                span {
                    font-size: 5vw;
                }
            }

            &:hover {
                background-color: #e07903;
                background-image: initial;
                transition: 1s;
            }
        }
    }
}

.release_future_area {
    position: absolute;
    top: 81svh;
    width: auto;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;

    @media (max-width: 768px) {
        padding: 1rem;
        bottom: 2svh;
        top: 90svh;
    }

    .future_contents_box_area {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        width: 90svw;
        gap: 1rem;

        @media (max-width: 768px) {
            justify-content: center;
            width: 100vw;
            padding: 1rem 0;
        }
    }

    .future_contents_box {
        background-image: url(/src/eyes_v3pages/image/bg_release_futureMark_pc01.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: top;
        color: white;
        text-align: center;
        padding: 2rem;

        @media (max-width: 768px) {}
    }

    p {
        font-size: min(2vw, 2vh);

        @media (max-width: 768px) {
            font-size: min(4vw, 4vh);
        }
    }

    h3 {
        font-size: min(2.5vw, 2.5vh);
        font-weight: bold;
        padding: 0 1rem 1rem 1rem;

        @media (max-width: 768px) {
            font-size: min(4vw, 4vh);
        }
    }
}

/* コンセプト表示領域 */
.release_concept_area {
    background-image: url(/src/eyes_v3pages/image/bg_v30Release_business_backimage_pc_01.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100svh;
    margin-bottom: 7rem;

    @media (max-width: 768px) {
        height: auto;
        margin-bottom: initial;
    }

    .concept_header_area {
        display: flex;
        justify-content: right;
        align-items: center;
        padding: 6rem 0 6rem 0;

        .header_message {
            background-image: linear-gradient(261deg, #4facfe, #00ceff);
            color: white;
            text-align: center;
            width: 40vw;
            padding: 1rem;

            @media (max-width: 768px) {
                width: 85svw;
            }
        }
    }

    .sub_message_box {
        display: grid;
        justify-content: center;
        grid-template:
            "box1 box2" auto
            "box3 box4" auto /
            30% 30%;
        row-gap: 1rem;
        text-align: center;

        h3 {
            color: #013675;
        }

        @media (max-width: 768px) {
            grid-template:
                "box1" auto
                "box2" auto
                "box3" auto
                "box4" auto /
                80%;
            row-gap: 1rem;
        }

        .box1 {
            grid-area: box1;
        }

        .box2 {
            grid-area: box2;
        }

        .box3 {
            grid-area: box3;
        }

        .box4 {
            grid-area: box4;
        }

        p {
            font-size: min(2vw, 2vh);
            padding: 1rem;
            text-align: justify;
            text-justify: inter-ideograph;

            @media (max-width: 768px) {
                font-size: min(4vw, 4vh);
            }
        }
    }
}

.sub_message_area {
    display: flex;
    justify-content: center;
    margin: 4rem 0 3rem 0;

    h2 {
        font-size: large;
        border-bottom: #0277b6 2px solid;
    }
}

/* メリット訴求エリア */
.merit_message_area {

    text-align: center;

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

    h2 {
        color: #348cf7;
        font-size: large;
        font-weight: bold;
        padding: 1rem;
    }

    h3 {
        color: #024a70;
        /* height: 5vw; */
        padding: 1rem 0 2rem 0;
    }

    p {
        color: rgb(54, 54, 54);
        font-size: medium;
    }

    .merit_contents_box {
        display: flex;
        justify-content: center;
        /* gap: 0.5rem; */

        @media (max-width: 768px) {
            flex-wrap: wrap;
        }

        .merit_image_box {
            position: relative;

            .merit_number {
                position: absolute;
                top: 10px;
                left: 30%;
                color: white;
                font-size: xx-large;
            }

            .merit_image_text {
                position: absolute;
                top: 20%;
                left: 50%;
                transform: translateX(-50%);
                width: 25vw;

                @media (max-width: 768px) {
                    width: 90vw;

                    p {
                        font-size: min(4vw, 4vh);
                        color: #00090e;
                    }
                }

                h1 {
                    padding: 1rem;
                    /* border-bottom: 2px solid rgb(102, 101, 101); */
                }

                .space_set {
                    padding: 1rem;
                }
            }
        }
    }
}

/* 事前商談受付エリア */
.imfomation_call_area {
    text-align: center;
    margin-bottom: 3rem;

    h1 {
        color: #1ea3fc;
        /* font-size: larger; */
        font-size: min(6vw, 6vh);
        padding: 1rem;

        @media (max-width: 768px) {
            font-size: min(20vw, 20vh);
            padding: initial;
        }
    }

    h2 {
        padding: 1rem;
        color: #00ceff;

        @media (max-width: 768px) {
            padding: initial;
        }
    }

    h3 {
        margin: 2rem;
        color: #024a70;
        height: 10vh;

        @media (max-width: 768px) {
            height: auto;
            font-size: min(5vw, 5vh);
            margin: initial;
            padding: 0 1rem;
        }
    }

    p {
        font-size: min(2vw, 2vh);

        @media (max-width: 768px) {
            font-size: min(4vw, 4vh);
            padding: 1.5rem;
        }
    }

    .flex_area {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .infomation_box {
        width: 20vw;
        padding: 1rem;
        margin: 2rem 0;

        @media (max-width: 768px) {
            width: 80vw;
            background-color: #d5f1f8;
            margin: 1rem 0;
        }

        &.left_line {
            border-left: #079ff1 solid 1px;

            @media (max-width: 768px) {
                border-left: none;
            }
        }

        &.right_line {
            border-right: #079ff1 solid 1px;

            @media (max-width: 768px) {
                border-right: none;
            }
        }
    }

    .link_button {
        color: white;
        /* background-image: linear-gradient(90deg, #22d3ee, #348cf7); */
        background-color: #1ea3fc;
        border-radius: 20px;
        padding: 0.5rem 1rem;
        text-align: center;
        width: 300px;
        font-weight: bold;
        /* margin: 1rem 0; */

        @media (max-width: 768px) {
            margin: 1rem auto;
            width: 90vw;

            a {
                font-size: 5vw;
            }
        }

        &:hover {
            background-color: #ec9b04;
            background-image: initial;
            transition: 0.5s;
        }
    }
}

/* 最下部コンタクト領域 */
.merit_contact_area {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(135deg, #31b4d1, #330867);
    text-align: center;
    height: 10vw;

    @media (max-width: 768px) {
        height: 20vh;
        padding: 0 1rem;
    }

    a {
        color: white;
    }


    h2 {
        @media (max-width: 768px) {
            font-size: min(4vw, 4vh);
        }
    }

    .flex_box {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }
}

/* テキストホバーリンク用 */
.textlink {
    padding: 10px;
    background-image: linear-gradient(#84d1fa, #079ff1);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 0 100%;
    transition: color 0.5s, background-size 0.5s;
}

.textlink:hover {
    color: #FFF;
    background-position: bottom left;
    background-size: 100% 100%;
}

/* キーフレームアニメーション指定 */
/* 初回のみメインテキストの出現アニメーション */
.appear {
    transform-origin: center top;
    animation: show 1s both;
}

span.appear {
    display: inline-block;
}

.d1 {
    animation-delay: 1.5s;
}

.d2 {
    animation-delay: 2.5s;
}

.d3 {
    animation-delay: 3s;
}

/* .d4 {animation-delay:4s;}
.d6 {animation-delay:6s;}
.d8 {animation-delay:8s;}
.d10 {animation-delay:10s;}
.d12 {animation-delay:12s;} */

@keyframes show {
    0% {
        transform: translate(0, 2em);
        opacity: 0;
        text-shadow: 0 0 0 rgb(41, 138, 248);
    }

    50% {
        text-shadow: 0 0 0.5em rgb(47, 208, 248);
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
        text-shadow: none;
    }
}