* {
    box-sizing: border-box;
    font-family: -apple-system, YuGothic, "Yu Gothic Medium", "Yu Gothic", BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, Verdana, Meiryo, sans-serif;
    margin: 0;
    padding: 0;

    /* 検証用コード */
    /* border: red solid 1px; */
    /* overflow: hidden; */
}

html {
    scroll-behavior: smooth;
}

body {
    /* --blue_base_color: rgb(64, 156, 236); */
    --blue_base_color: #1d75bc;
    --blue_sub_color: rgba(209, 234, 251, 0.637);
    animation: loading 2s;
}

@keyframes loading {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* ベースのテキストサイズ */
/* 標準 */
.text_base {
    font-size: min(1.2rem, 1, 2vw);
    font-weight: 300;
    line-height: 1.5;
}

.text_base_bold {
    border-bottom: 1px solid var(--blue_base_color);
    font-weight: bold;
}

.text_base_white {
    color: white;
    font-size: min(1.2rem, 1, 2vw);
}

.text_shadow {
    padding: 1rem;
    text-shadow: 1px 1px 3px rgb(255, 255, 255);
}

.text_base_large {
    font-size: min(1.3rem, 1.3vw);
    font-weight: bold;
}

/* ヘッダー */
.text_header {
    font-size: min(3rem, 3vw);
}

/* サブヘッダー */
.text_sub_header {
    color: var(--blue_base_color);
    font-size: min(2rem, 2vw)
}

.text_sub_header_black {
    color: black;
    font-size: min(2rem, 1.8vw);
    font-weight: bold
}


/* 表題・キーメッセージ共有領域 */
.copy_message_contaier {
    display: block;
    padding-bottom: min(5vh, 5vw);
    padding-top: min(10vh, 10vw);
    text-align: center;
}

.copy_message_flex_box {
    display: flex;
    justify-content: center;
}

/* ********************************* */
/* 新コンタクト領域(下部） */
/* ********************************* */
.etc_contact_area {
    display: flex;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;

    .etc_contents {
        padding: 2rem;
        border-top: 1px solid rgb(172, 171, 171);
        width: 50vw;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;

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

        a{
            text-decoration: none;
            color: #0d70c0;
        }

        a:first-child {
            border-right: 1px solid rgb(108, 107, 107);
            padding: 0 1rem;
        }
    }

    p {
        font-size: min(2.2vw, 2.2vh);
        font-weight: bold;
        /* テキストと下線の間隔 */
        padding-bottom: 3px;
        background-image: linear-gradient(#000, #000);
        background-repeat: no-repeat;
        background-position: bottom right;
        background-size: 0 1px;
        transition: background-size 0.3s;

        &:hover {
            background-position: bottom left;
            background-size: 100% 1px;
        }

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

.contact_base_area {
    background-image: url(/src/eyes_v3pages/image/bg_contact_area_blueimage_pc_01.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 2rem 0;
    text-align: center;

    h3 {
        color: white;
        font-size: min(4vw, 4vh);
        line-height: 2;
    }

    .link_box_area {
        display: flex;
        gap: 2rem;
        justify-content: center;
        margin: 5vh 0;
        flex-wrap: wrap;
    }

    .contact_box {
        background-color: white;
        border-radius: 10px;
        height: auto;
        padding: 2rem;
        width: 20vw;

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

        .link_button {
            position: relative;
            background-color: #167ccf;
            border-radius: 5px;
            color: white;
            margin: 1rem 0;
            padding: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;

            &:hover {
                background-color: #05b8ef;
                transition: 0.5s;
            }
        }

        img {
            height: 10vh;
            max-width: 10vw;

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

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

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

        .material-symbols-outlined {
            position: absolute;
            right: 8px;
            /* font-variation-settings:
                'FILL' 0,
                'wght' 400,
                'GRAD' 0,
                'opsz' 20 */
        }
    }
}

/* ********************************* */
/* ドキュメントダウンロード */
/* ********************************* */
.download_document_area {
    display: flex;
    justify-content: center;
    margin: 1rem;

    .document_box {
        padding: 2rem;
        width: 80vw;
        display: flex;
        justify-content: space-evenly;
        text-align: center;
        align-items: center;

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

        .document_left {
            color: white;

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

            .document_link_btn {
                margin: 1rem 0 0 0;
                background-color: white;
                font-weight: bold;
                border-radius: 10px;
                padding: 0.5rem 1rem;

                a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-decoration: none;
                    color: #055da5;
                }

                &:hover {
                    background-color: #afe7f8;
                    transition: 0.5s;
                }
            }
        }

        img {
            width: 25vw;
             @media (max-width: 768px) {
                width: 60vw;
             }
        }
    }

    .bg_download_color_1{
          /* background-color: #35a0f7; */
           background-image: linear-gradient(80deg, #22d3ee, #5d97f7);
    }
    .bg_download_color_2{
          background-color: #0c77cf;
    }

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

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

}

/* リンクボタンの共通領域 */
.base_button_link_contaier {
    align-items: center;
    column-gap: min(1rem, 1vw);
    display: grid;
    grid-template:
        "bubox1 bubox2" auto
        "bubox3 bubox4" auto /
        26vw 26vw;
    justify-content: center;
    margin-bottom: min(2vh, 3vw);
    margin-top: min(2vh, 3vw);
    row-gap: min(1rem, 1vw);
    text-align: center;
}

.base_button_link_box1 {
    grid-area: bubox1;
}

.base_button_link_box2 {
    grid-area: bubox2;
}

.base_button_link_box3 {
    grid-area: bubox3;
}

.base_button_link_box4 {
    grid-area: bubox4;
}

.base_button_link_box {
    align-items: center;
    display: flex;
    justify-content: space-around;
    width: 40vw;
}

/* ****************************************************** */
/* 文字左右のLine描画 */
/* ****************************************************** */
.text_line {
    align-items: center;
    /* font-size: 1.2rem;
    font-weight: 100; */
    display: flex;
}

.text_line::after,
.text_line::before {
    border-top: 1px solid black;
    content: "";
    width: 20px;
}

.text_line::after {
    margin-left: 2rem;
}

.text_line::before {
    margin-right: 2rem;
}

.text_base_padding {
    padding: min(1.5rem, 1.5vw);
}

/* ******************************** */
/* モバイルメニュー PC非表示*/
/* ******************************** */
.sp-header-menu {
    display: none;
}

/* **************************** */
/* メイン領域 */
/* **************************** */
.main_eyes_contaier {
    /* background-image: url(/src/eyes_v3pages/image/image_main_eyes_pc_02.jpg); */
    background-image: url(/src/eyes_v3pages/image/bg_eyes_new_top_blueBase_pc_01.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 110vh;
    position: relative;
    z-index: 0;

    @media (max-width: 768px) {
        height: 115vh;
    }
}

.main_eyes_text_area {
    height: 50vh;
    position: relative;
    text-align: center;
}

/* メインエリア改修 */
/* メディアクエリ記述変更 */
/* クラス定義内で個別調整記述に補正 */
.main_eyes_textBox {
    left: 8vw;
    position: absolute;
    top: 28vh;

    @media (max-width: 768px) {
        left: 50%;
        position: absolute;
        top: 20vh;
        transform: translateX(-50%);
        width: 90vw;
    }

    h1 {
        background-color: rgba(255, 255, 255, 0.785);
        color: var(--blue_base_color);
        font-size: min(5vw, 5vh);
        line-height: 1.4;
        margin: 1rem 0;
        padding: 0.2rem 1rem;
        text-align: left;

        @media (max-width: 768px) {
            font-size: min(6rem, 6vw);
            font-weight: bold;
            text-align: center;
        }
    }

    h2 {
        color: white;
        font-size: min(2.5vw, 2.5vh);
        font-weight: 100;
        text-align: left;

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

    }

    .main_visual_btn_aera {
        align-items: center;
        display: flex;

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

    .main_visual_btn {
        align-items: center;
        border-radius: 20px;
        color: white;
        display: flex;
        font-size: min(2.5dvw, 2.5dvh);
        justify-content: center;
        margin: 1rem 1rem 0 0;
        padding: 0.3rem 1rem;
        text-align: center;
        width: min(300px, 15vw);

        @media (max-width: 768px) {
            font-size: min(5dvw, 5dvh);
            margin: 0.5rem 0;
            width: 90vw;
        }
    }

    .btn_blue {
        background-color: #023a68;

        &:hover {
            background-color: #1d75bc;
            transition: 0.5s;
        }
    }

    .btn_orange {
        background-color: orange;

        &:hover {
            background-color: #e74e01;
            transition: 0.5s;
        }
    }
}

.main_eyes_image_pc_box {
    height: auto;
    position: absolute;
    right: 5vw;
    top: 28vh;
    width: 48dvw;
    z-index: -1;

    @media (max-width: 768px) {
        bottom: 30vh;
        min-width: 95vw;
        top: initial;
    }
}

.main_eyes_image_capture_box {
    bottom: -15vh;
    position: absolute;
    right: 5vw;
    width: 45dvw;

    @media (max-width: 768px) {
        bottom: -2vh;
        left: 50%;
        min-width: 60vw;
        right: initial;
        transform: translateX(-50%);
    }
}

.main_eyes_news_article_box {
    bottom: 8vh;
    color: white;
    left: 8vw;
    position: absolute;
    width: 35vw;

    @media (max-width: 768px) {
        bottom: 15vh;
        left: 50%;
        transform: translateX(-50%);
        width: 95vw;
    }

    .heaed_flex_area {
        align-items: center;
        border-bottom: solid 1px white;
        display: flex;
        gap: 1rem;
        justify-content: space-between;
    }

    h3 {
        font-size: min(1.2rem, 2vw);
        font-weight: 400;

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

    a {
        color: white;
    }

    .caption_flex_area {
        align-items: center;
        display: flex;
        gap: 1rem;
        padding: 0.2rem 0;

        h4 {
            background-color: rgba(255, 255, 255, 0.719);
            padding: 0 0.2rem;
            text-align: center;
            width: min(50px, 10vw);

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

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

        .color_pink {
            color: palevioletred;
        }

        .color_blue {
            color: #023a68;
        }
    }
}

/* **************************** */
/* EYESがもたらす価値エリア */
/* **************************** */
.contents_value_copy_area {
    text-align: center;

    .value_flex {
        display: flex;
        gap: 1rem;
        justify-content: center;

        h2 {
            color: white;
            font-size: min(1.5rem, 2vw);
            padding: 0 0.5rem;

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

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

    .bg_color_darkblue {
        background-color: #023a68;
    }

    .bg_color_lightblue {
        background-color: #167ccf;
    }

    .bg_color_softblue {
        background-color: #419fec;
    }

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

        span {
            color: #1d75bc;
        }

        @media (max-width: 768px) {
            font-size: min(2rem, 3vw);
            padding: 1rem;
            text-align: center;
        }
    }
}

/* **************************** */
/* サブメイン領域 */
/* **************************** */
.contents_tabdevice_area {
    background-image: url(/src/eyes_v3pages/image/image_contents_tab_pc_01.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    /* サイズ注意 */
    height: min(120vh, 100vw);
    position: relative;
}

/* 丸円マーク配置 */
.main_contents_contaier_a {
    bottom: 20vh;
    column-gap: min(2rem, 2vw);
    /* right: 50%;
    transform: translateX(-50%); */
    display: grid;
    grid-template:
        "box0 box0" auto
        "box1 box2" auto
        "box3 box3" auto
        "box4 box4" auto /
        auto auto;
    position: absolute;
    right: 14vw;
    row-gap: min(2rem, 2vw);
}

.contents_box0 {
    display: flex;
    grid-area: box0;
    justify-content: center;
    text-align: center;
}

.contents_box1 {
    display: flex;
    grid-area: box1;
    justify-content: center;
}

.contents_box2 {
    display: flex;
    grid-area: box2;
    justify-content: center;
}

.contents_box3 {
    display: flex;
    grid-area: box3;
    justify-content: center;
}

.contents_box4 {
    display: flex;
    grid-area: box4;
    justify-content: center;
}

/* リンク用丸型コンテンツ */
/* メディアクリエ記述補正 */
.contents_mark {
    align-items: center;
    /* background-image: linear-gradient(90deg, rgba(58, 99, 255, 1), rgba(42, 179, 252, 1) 90%); */
    background-image: url(/src/eyes_v3pages/image/bg_eyes_new_top_blueBase_pc_01.jpg);
    background-position: left bottom;
    border-radius: 50%;
    box-shadow: 4px 4px rgba(78, 77, 77, 0.279);
    color: white;
    display: flex;
    height: min(200px, 15vw);
    justify-content: center;
    width: min(200px, 15vw);

    @media (max-width: 768px) {
        height: min(200px, 30vw);
        width: min(200px, 30vw);
    }

    .contents_box {
        display: block;
        margin: 0 auto;
        text-align: center;
    }

    h4 {
        font-size: min(1.8vw, 1.8rem);
        font-weight: bold;

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

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

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

/* **************************** */
/* EYESとは領域 */
/* **************************** */
.contents_what_area {
    align-items: stretch;
    column-gap: min(2rem, 2vw);
    display: grid;
    grid-template:
        "wbox1 wbox2" auto
        "wbox3 wbox4" auto /
        30vw 30vw;
    justify-content: center;
    row-gap: min(2rem, 2vw);
}

.contents_what_box1 {
    /* background-color: var(--blue_sub_color); */
    background-image: url(/src/eyes_v3pages/image/bg_eyes_pc_01.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    grid-area: wbox1;
    height: auto;
}

.contents_what_box2 {
    background-image: url(/src/eyes_v3pages/image/bg_eyes_pc_02.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    grid-area: wbox2;
    height: auto;
}

.contents_what_box3 {
    background-image: url(/src/eyes_v3pages/image/bg_eyes_pc_03.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    grid-area: wbox3;
    height: auto;
}

.contents_what_box4 {
    background-image: url(/src/eyes_v3pages/image/bg_eyes_pc_04.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    grid-area: wbox4;
    height: auto;
}

.what_area_icon {
    height: min(150px, 10vw);
    opacity: 0.2;
    padding: min(1rem, 1vw);
    width: min(150px, 10vw);
}

/* *************************** */
/* Functionエリア */
/* *************************** */
.contents_function_area {
    align-items: center;
    background-image: url(/src/eyes_v3pages/image/bg_function_image01_pc.png);
    background-position: right;
    background-repeat: no-repeat;
    column-gap: min(2rem, 2vw);

    display: grid;
    grid-template:
        "fbox1 fbox2" auto
        "fbox3 fbox2" auto /
        40vw 40vw;
    height: 70vh;
    justify-content: center;
    row-gap: min(2rem, 2vw);
}

.function_box1 {
    grid-area: fbox1;

    h2 {
        font-size: min(2.2rem, 2.2vw);
        font-weight: bold;
    }

    p {
        font-size: min(1.2rem, 1.2vw);
        font-weight: 400;
    }

    span {
        color: rgb(248, 122, 32);
    }
}

.function_box2 {
    grid-area: fbox2;
    text-align: center;

    img {
        height: auto;
        width: min(35vw, 800px);
    }
}

.function_box3 {
    grid-area: fbox3;
    text-align: left;
    text-shadow: rgb(250, 249, 247) 1px 0 10px;

    p {
        font-size: min(1.2rem, 1.2vw);
        text-align: justify;
        text-justify: inter-ideograph;
    }
}

/* *************************** */
/* 特徴領域 */
/* *************************** */
.features_contaier {
    text-align: center;

    img {
        height: auto;
        width: 50vw;
    }

    span {
        color: rgb(3, 122, 207);
    }

    h2 {
        font-size: min(1.8rem, 1.8vw);
        font-weight: bold;
    }

    p {
        font-size: min(1.5rem, 1.5vw);
        font-weight: bold;
        padding: 1rem;
    }
}

/* *************************** */
/* 機能詳細（Detail）領域 */
/* *************************** */
.function_detail_contaier {
    align-items: stretch;
    column-gap: min(2rem, 2vw);
    display: grid;
    grid-template:
        "fdbox1 fdbox2 fdbox3" auto
        "fdbox4 fdbox5 fdbox6" auto
        "fdbox7 fdbox8 fdbox9" auto /
        20vw 20vw 20vw;
    justify-content: center;
    row-gap: min(2rem, 2vw);
    text-align: center;
}

.function_detail_box1 {
    align-items: center;
    align-items: stretch;
    background-color: var(--blue_sub_color);
    border-radius: 10px;
    display: flex;
    grid-area: fdbox1;
    /* height: min(45vh,24vw); */
    /* height: auto; */
    padding: min(1rem, 1vw);
    position: relative
}

.function_detail_box2 {
    align-items: center;
    background-color: var(--blue_sub_color);
    border-radius: 10px;
    display: flex;
    grid-area: fdbox2;
    /* height: min(45vh,24vw); */
    /* height: auto; */
    padding: min(1rem, 1vw);
    position: relative;
}

.function_detail_box3 {
    align-items: center;
    background-color: var(--blue_sub_color);
    border-radius: 10px;
    display: flex;
    grid-area: fdbox3;
    /* height: min(45vh,24vw); */
    /* height: auto; */
    padding: min(1rem, 1vw);
    position: relative;
}

.function_detail_box4 {
    align-items: center;
    background-color: var(--blue_sub_color);
    border-radius: 10px;
    display: flex;
    grid-area: fdbox4;
    /* height: min(45vh,24vw); */
    padding: min(1rem, 1vw);
    position: relative;
}

.function_detail_box5 {
    align-items: center;
    background-color: var(--blue_sub_color);
    border-radius: 10px;
    display: flex;
    grid-area: fdbox5;
    padding: min(1rem, 1vw);
    position: relative;
}

.function_detail_box6 {
    align-items: center;
    background-color: var(--blue_sub_color);
    border-radius: 10px;
    display: flex;
    grid-area: fdbox6;
    padding: min(1rem, 1vw);
    position: relative;
}

.function_detail_box7 {
    background-color: var(--blue_sub_color);
    border-radius: 10px;
    grid-area: fdbox7;
    padding: min(1rem, 1vw);
    position: relative;
}

.function_detail_box8 {
    background-color: var(--blue_sub_color);
    border-radius: 10px;
    grid-area: fdbox8;
    height: min(45vh, 24vw);
    padding: min(1rem, 1vw);
    position: relative;
}

.function_detail_box9 {
    background-color: var(--blue_sub_color);
    border-radius: 10px;
    grid-area: fdbox9;
    height: min(45vh, 24vw);
    padding: min(1rem, 1vw);
    position: relative;
}

.function_detail_image {
    box-shadow: 2px 2px 4px gray;
    height: auto;
    width: min(250px, 15vw);
}

.function_detail_text_head {
    font-size: min(3vw, 3rem);
    font-weight: bold;
    left: 10px;
    position: absolute;
    top: 10px;
    z-index: 10;
}

.function_detail_mark_img {
    height: auto;
    left: 10px;
    position: absolute;
    top: 50px;
    width: 80px;
}

/* ****************************** */
/* バージョンアップ領域 */
/* ****************************** */
.version_up_contaier {
    background-image: url(/src/eyes_v3pages/image/bg_versionup_base_pc_02.jpg);
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    height: 60vh;
    position: relative;
}

.version_up_text_box {
    left: min(20vw, 20vh);
    position: absolute;
    top: 5.5vh;
    z-index: 10;
}

.version_up_image_box {
    height: auto;
    left: min(21vw, 21vh);
    opacity: 0.3;
    position: absolute;
    top: 8.5vh;
    /* width: max(12vw, 500px); */
    width: max(35vw, 540px);
}

.version_news_box {
    background-color: var(--blue_base_color);
    border-radius: 14px;
    color: white;
    font-size: min(1.2rem, 1.2vw);
    margin: min(1rem, 14vw);
    padding: min(0.5rem, 0.5vw);
    text-align: center;
    width: min(600px, 17vw);
}

.version_news_box:hover {
    background-color: rgb(20, 192, 146);
    transition: 0.5s;
}

/* *************************** */
/* フッターエリア */
/* *************************** */
/* マージン保持にのみ利用 */
.footer_contaier {
    margin-top: 5rem;
}

/* *************************** */
/* メディアクエリ */
/* *************************** */
@media (max-width: 768px) {

    /* ベースのテキストサイズ */
    /* 標準 */
    .text_base {
        font-size: min(3rem, 3vw);
        line-height: 2;
    }

    .text_base_large {
        font-size: min(3.5rem, 3.5vw);
    }

    .text_base_white {
        font-size: min(3rem, 3vw);
    }

    /* ヘッダー */
    .text_header {
        font-size: min(6rem, 6vw);
    }

    /* サブヘッダー */
    .text_sub_header {
        font-size: min(4rem, 4vw);
    }

    .text_sub_header_black {
        font-size: min(4rem, 4vw);
    }

    .text_base_padding {
        padding: min(4rem, 4vw);
    }

    /* ******************************** */
    /* 共通キャッチコピー */
    /* ******************************** */
    /* 表題・キーメッセージ共有領域 */
    .copy_message_contaier {
        padding-bottom: min(5vh, 5vw);
        padding-left: 2vw;
        padding-right: 2vw;
        padding-top: min(5vh, 5vw);
    }

    /* ******************************** */
    /* 共通ボタンリンク領域 */
    /* ******************************** */
    /* リンクボタンの共通領域 */
    .base_button_link_contaier {
        grid-template:
            "bubox1" auto
            "bubox3" auto
            "bubox2" auto
            "bubox4" auto /
            80vw;
        margin-bottom: min(2vh, 3vw);
        margin-top: min(2vh, 3vw);
    }

    /* ******************************** */
    /* モバイルメニュー */
    /* ******************************** */
    .sp-header-menu {
        display: block;
    }

    /* ******************************** */
    /* サブメインコンテンツ */
    /* ******************************** */
    .contents_tabdevice_area {

        /* サイズ注意 */
        /* height: 600px; */
        height: 100vh;
    }

    /* 丸円マーク配置 */
    .main_contents_contaier_a {
        bottom: 35vh;
        /* bottom: 120px; */
        column-gap: min(2rem, 2vw);
        display: grid;
        grid-template:
            "box0 box0" auto
            "box1 box2" auto
            "box3 box3" auto
            "box4 box4" auto /
            50vw 50vw;
        position: absolute;
        right: 0;
        row-gap: min(2rem, 2vw);
    }

    .contents_box4 {
        background-color: rgba(255, 255, 255, 0.475);
        display: flex;
        grid-area: box4;
        justify-content: center;
        text-align: center;
    }

    /* ******************************** */
    /* コンテンツWahtエリア */
    /* ******************************** */
    .contents_what_area {
        align-items: center;
        column-gap: min(2rem, 2vw);
        display: grid;
        grid-template:
            "wbox1" auto "wbox2" auto
            "wbox3" auto
            "wbox4" auto /
            90vw;
        justify-content: center;
        row-gap: min(2rem, 2vw);
    }

    .what_area_icon {
        height: min(200px, 20vw);
        opacity: 0.2;
        padding: min(2rem, 2vw);
        width: min(200px, 20vw);
    }

    .contents_what_box1 {
        height: auto;
    }

    .contents_what_box2 {
        height: auto;
    }

    .contents_what_box3 {
        height: auto;
    }

    .contents_what_box4 {
        height: auto;
    }

    /* *************************** */
    /* Functionエリア */
    /* *************************** */
    .contents_function_area {
        background-position: bottom;
        /*注意*/
        grid-template:
            "fbox1" auto
            "fbox2" auto
            "fbox3" auto /
            90vw;
        height: auto;
    }

    .function_box1 {
        text-align: center;

        h2 {
            font-size: min(5rem, 5vw);
            font-weight: bold;
        }

        p {
            font-size: min(3rem, 3vw);
            font-weight: 400;
        }

        span {
            color: rgb(248, 122, 32);
        }
    }

    .function_box2 {
        text-align: center;

        img {
            height: auto;
            width: min(60vw, 500px);
        }
    }

    .function_box3 {
        grid-area: fbox3;
        padding: 1rem;
        text-align: center;
        text-shadow: none;

        p {
            color: white;
            font-size: min(3.6rem, 3.6vw);
        }
    }

    /* *************************** */
    /* 特徴領域 */
    /* *************************** */
    .features_contaier {
        img {
            height: auto;
            width: 90vw;
        }

        h2 {
            font-size: min(4rem, 4vw);
            font-weight: bold;
        }

        p {
            font-size: min(3.1rem, 3.1vw);
            font-weight: bold;
            padding: 1rem;
        }
    }

    /* *************************** */
    /* 機能詳細（Detail）領域 */
    /* *************************** */
    .function_detail_contaier {
        grid-template:
            "fdbox1" auto
            "fdbox2" auto
            "fdbox3" auto
            "fdbox4" auto
            "fdbox5" auto
            "fdbox6" auto
            "fdbox7" auto
            "fdbox8" auto
            "fdbox9" auto /
            90vw;
    }

    .function_detail_image {
        margin-top: 1rem;
        width: min(250px, 70vw);
    }

    .function_detail_text_head {
        font-size: min(12vw, 12rem);
    }

    .function_detail_box1 {
        height: auto;
    }

    .function_detail_box2 {
        height: auto;
    }

    .function_detail_box3 {
        height: auto;
    }

    .function_detail_box4 {
        height: auto;
    }

    .function_detail_box5 {
        height: auto;
    }

    .function_detail_box6 {
        height: auto;
    }

    .function_detail_box7 {
        height: auto;
    }

    .function_detail_box8 {
        height: auto;
    }

    .function_detail_box9 {
        height: auto;
    }

    /* ****************************** */
    /* バージョンアップ領域 */
    /* ****************************** */
    .version_up_contaier {
        background-position: right;
        background-size: contain;
        height: 35vh;
    }

    .version_up_text_box {
        left: 10vw;
        position: absolute;
        top: 5vh;
        z-index: 10;
    }

    .version_up_image_box {
        height: auto;
        left: 10vw;
        opacity: 0.3;
        position: absolute;
        top: 10vh;
        width: min(50vw, 200px);
    }

    .version_news_box {
        font-size: min(3.5rem, 3.5vw);
        width: min(400px, 50vw);
    }

    .version_news_box:hover {
        background-color: rgb(20, 192, 146);
        transition: 0.5s;
    }

}