/* ****************************** */
/* 記事ページメインビジュアル */
/* ****************************** */
/* トップエリア */
.article_top_area {
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    height: 80vh;
    position: relative;

    @media (max-width: 768px) {
        background-size: cover;
        height: 100dvh;
    }

    .article_main_message_box {
        left: 8vw;
        position: absolute;
        text-align: right;
        top: 50vh;
        transform: translateY(-50%);
        max-width: 43dvw;

        @media (max-width: 768px) {
            left: 0vh;
            padding: 1rem;
            top: 45dvh;
            max-width: initial;
        }
    }

    h1 {
        font-size: min(2.7vw, 2.7vh);
        padding: 0.5rem 0;

        @media (max-width: 768px) {
            background-color: rgba(44, 148, 246, 0.645);
            color: white;
            font-size: min(5vw, 5vh);
            padding: 1rem;
            text-align: center;
        }
    }

    .article_icon_box {
        display: flex;
        justify-content: right;
        text-align: right;

        p {
            background-color: rgb(8, 96, 196);
            color: white;
            padding: 0.5rem;
            width: fit-content;

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

    /* 関連記事エリア */
    .article_related_info {
        background-color: rgba(24, 126, 251, 0.543);
        border-radius: 10px;
        color: white;
        padding: 1rem;
        position: absolute;
        right: 5vw;
        top: 50vh;
        transform: translateY(-50%);
        max-width: 40dvw;

        @media (max-width: 768px) {
            right: 0vw;
            top: 100dvh;
            transform: translateY(-100%);
            width: 100vw;
            max-width: initial;
        }

        P {
            font-size: min(2vw, 2vh);
            line-height: 2.2;
            color: white;

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

        .flex_box {
            display: flex;
            align-items: center;
            width: 100%;
            border-bottom: 1px solid white;
            gap: 2px;
        }

        .material-symbols-outlined {
            font-variation-settings:
                'FILL' 0,
                'wght' 400,
                'GRAD' 0,
                'opsz' 24
        }
    }

    /* 目次記載エリア */
    .article_contents_box {
        font-size: min(2vw, 2vh);
        line-height: 2;
        padding: 0.5rem;
        text-align: left;

        @media (max-width: 768px) {
            background-color: rgba(255, 255, 255, 0.645);
            font-size: min(3vw, 3vh);
            font-weight: bold;
            padding: 1rem;
        }

        li {
            color: black;
        }
    }
}

/* 個別画像指定 */
/* 記事ページ毎に個別指定 */
.article_image01 {
    background-image: url(/src/eyes_v3pages/image/bg_article_businessImage_pc_01.png);
}
.article_image02 {
    background-image: url(/src/eyes_v3pages/image/bg_article_businessImage_pc_02.png);
}
.article_image03 {
    background-image: url(/src/eyes_v3pages/image/bg_article_businessImage_pc_03.png);
}
.article_image04 {
    background-image: url(/src/eyes_v3pages/image/bg_article_businessImage_pc_04.png);
}

/* ****************************** */
/* 記事文面エリア */
/* ****************************** */
.article_main_area {
    display: grid;
    grid-template:
        "box0 box0" auto
        "box1 box2" auto
        "box3 box4" auto
        "box5 box6" auto "box7 box7" auto /
        auto auto;
    padding: 3vw;

    .article_box0 {
        grid-area: box0;
    }

    .article_box1 {
        grid-area: box1;
    }

    .article_box2 {
        grid-area: box2;
    }

    .article_box3 {
        grid-area: box3;
    }

    .article_box4 {
        grid-area: box4;
    }

    .article_box5 {
        grid-area: box5;
    }

    .article_box6 {
        grid-area: box6;
    }

    .article_box7 {
        grid-area: box7;
    }

    @media (max-width: 768px) {
        grid-template:
            "box0" auto
            "box1" auto
            "box2" auto
            "box3" auto
            "box4" auto
            "box5" auto
            "box6" auto "box7" auto /
            auto;
    }

    /* 表題指定（共通） */
    h3 {
        border-bottom: 1px solid rgb(82, 81, 81);
        font-size: min(2.3vw, 2.3vh);
        font-weight: bold;
        margin: 1rem 1rem;

        @media (max-width: 768px) {
            font-size: min(4.5vw, 4.5vh);
            margin: 1rem 0.5rem;
        }
    }

    /* 文章指定（共通） */
    p {
        font-size: min(2vw, 2vh);
        margin: 0 1rem;
        padding: 0.5rem 0;
        text-align: justify;
        text-indent: 5px;
        text-justify: inter-ideograph;

        @media (max-width: 768px) {
            font-size: min(3vw, 3vh);
            margin: 0 0.5rem;
            padding: 0.3rem;
        }

        span {
            color: rgb(5, 100, 215);
            font-weight: bold;
        }
    }
}

/* ****************************** */
/* リンクエリア */
/* ****************************** */
.article_contact_link_area {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;

    .color_bule {
        background-color: rgb(3, 133, 194);

        &:hover {
            background-color: rgb(3, 31, 63);
            transition: 0.5s;
        }
    }

    .color_orange {
        background-color: orange;

        &:hover {
            background-color: rgb(214, 9, 6);
            transition: 0.5s;
        }
    }

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

.article_contact_link {
    border-radius: 20px;
    color: white;
    font-size: min(2.5vw, 2.5vh);
    padding: 0.5rem 2rem;

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