/* 色　はじめ */

    #dodgerblue {
        color: hsla(210, 100%, 56%, 1);
        /* font-weight: 550; */
    }

    #pink {
        color: hsla(330, 100%, 56%, 1);
    }

    #orange {
        color: darkorange;
    }

    /* 色　おわり */

    html {
        font-size: 62.5%;
        animation: html 1s;
    }

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

        100% {
            opacity: 1;
        }
    }

    body {
        -webkit-appearance: none;
        font-family: sans-serif;
        margin: 0;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .area {
        margin-bottom: 7vw;
        width: 100%;
        /* height: 100vw; */
        box-sizing: border-box;
    }

    a {
        text-decoration: none;
    }

    b {
        font-weight: 600;
    }

    .title {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: .5vw;
        height: 6vw;
        font-weight: bold;
        text-align: center;
        color: hsla(210, 100%, 56%, 1);
        font-size: 2vw;
    }

    h1 {
        font-size: 2.2vw;
    }

    h2 {
        margin: 0;
        text-align: center;
        color: hsla(210, 0%, 56%, 1);
        font-size: 1.8vw;
    }

    h3 {
        font-size: 1.5vw;
        font-size: 1.2vw;
        line-height: 3vw;
        line-height: 2.1vw;
        font-weight: 100;
        font: gray;
    }

    hr {
        border: none;
        border-top: .2vw solid hsla(210, 100%, 56%, 1);
        width: 80vw;
        text-align: center;
    }

    .content {
        /* background: lightgrey; */
        margin: 0 auto;
        width: 50vw;
        /* height: 60vw; */
    }

    .outline {
        display: grid;
        width: 100%;
        height: 100%;
        grid-template-columns: 30% 40% 30%;
        grid-template-rows: 50% 50%;
        box-sizing: border-box;
    }

    /* left_upper はじめ */

    .left_upper {
        padding: 3vw;
        width: 100%;
        height: 100%;
        grid-column: 1/2;
        grid-row: 1/2;
        box-sizing: border-box;
    }

    .cover_left_upper {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: none;
        box-sizing: border-box;
        transition: background .5s;
        cursor: pointer;
        animation: cover_left_upper 4s;
        animation: SlideOut 2s;
        border-radius: 50%;
    }

    .cover_left_upper:hover {
        background: red;
        box-shadow: .3vw .3vw.5vw gray;
    }


    .inside_left_upper {
        display: flex;
        padding: 2vw;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        color: black;
        font-size: 2vw;
        transition: background .5s, color 1s;
        box-sizing: border-box;
        animation: inside_left_upper 4s;
        border-radius: 50%;
    }

    .inside_left_upper:hover {
        background-image: url(file/tell_icon_02.png);
        object-fit: cover;
        color: white;
        font-weight: bold;
    }

    @keyframes inside_left_upper {
        0% {
            background: none;
            box-shadow: none;
        }

        50% {
            background: none;
            box-shadow: none;

        }

        90% {
            background:red;
            color: white;
            font-weight: bold;

            box-shadow: .3vw .3vw.5vw gray;
        }

        100% {
            background-color: none;
            box-shadow: none;
        }
    }


    /* left_upper おわり */

    /* .left_bottom はじめ */

    .left_bottom {
        padding: 3vw;
        width: 100%;
        height: 100%;
        grid-column: 1/2;
        grid-row: 2/3;
        box-sizing: border-box;
    }

    .cover_left_bottom {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: none;
        box-sizing: border-box;
        transition: background .5s;
        cursor: pointer;
        border-radius: 50%;
        0
    }

    .cover_left_bottom:hover {
        background: blue;
        box-shadow: .3vw .3vw .5vw gray;
    }

    .inside_left_bottom {
        display: flex;
        padding: 2vw;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        color: black;
        font-size: 1.4vw;
        transition: background .5s, color 1s;
        animation: SlideIn 2s, inside_left_bottom 6s;
        box-sizing: border-box;
        border-radius: 50%;
    }

    .inside_left_bottom:hover {
        background-image: url(file/tell_icon_03.png);
        color: white;
        font-weight: bold;
    }

    @keyframes inside_left_bottom {
        0% {
            background: none;
            box-shadow: none;
        }

        50% {
            background: none;
            box-shadow: none;

        }

        90% {
            background: blue;
            color: white;
            font-weight: bold;

            box-shadow: .3vw .3vw.5vw gray;
        }

        100% {
            background-color: none;
            box-shadow: none;
        }
    }

    /* left_bottom　おわり */

    /* center はじめ */

    .center {
        /* background: chartreuse; */
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        grid-column: 2/3;
        grid-row: 1/3;
        /* transform: scale(.3); */
    }

    .outline_center {
        width: 100%;
        height: 40%;
        border-radius: 50%;
        transition: background .5s;
    }

    .outline_center:hover {
        background: dodgerblue;
    }

    .inside_center {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: black;
        font-size: 2.1vw;
        transition: color 1s, font-weight;
        animation: center 3s, inside_center 8s;
    }

    @keyframes center {
        0% {
            transform: scale(0);
        }

        50% {
            transform: scale(1.5);
        }

        100% {
            transform: scale(1);
        }
    }

    .inside_center:hover {
        color: white;
        font-weight: bold;
    }

    @keyframes inside_center {
        0% {
            background: none;
            box-shadow: none;
        }

        50% {
            background: none;
            box-shadow: none;
        }

        90% {
            background: dodgerblue;
            color: white;
            font-weight: bold;
            border-radius: 50%;
            box-shadow: .3vw .3vw.5vw gray;
        }

        100% {
            background-color: none;
            box-shadow: none;
        }
    }

    /* center おわり */

    /* right_upper はじめ */

    .right_upper {
        padding: 3vw;
        width: 100%;
        height: 100%;
        grid-column: 3/4;
        grid-row: 1/2;
        box-sizing: border-box;
        border-radius: 50%;
    }

    .cover_right_upper {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: none;
        box-sizing: border-box;
        transition: background .5s;
        cursor: pointer;
        border-radius: 50%;
    }

    .cover_right_upper:hover {
        background: hsl(330, 100%, 56%);
        box-shadow: .3vw .3vw .5vw gray;
    }

    .inside_right_upper {
        display: flex;
        padding: 2vw;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        color: black;
        font-size: 2vw;
        transition: background .5s, color 1s;
        animation: SlideOut 2s,inside_right_upper 5s ;
        box-sizing: border-box;
        border-radius: 50%;
    }

    .inside_right_upper:hover {
        background-image: url(file/tell_icon_03.png);
        color: white;
        font-weight: bold;
    }


    @keyframes inside_right_upper {
        0% {
            background: none;
            box-shadow: none;
        }

        50% {
            background: none;
            box-shadow: none;

        }

        90% {
            background: hsl(330, 100%, 56%);
            color: white;
            font-weight: bold;

            box-shadow: .3vw .3vw.5vw gray;
        }

        100% {
            background-color: none;
            box-shadow: none;
        }
    }



    /* right_upper おわり */

    /* right_bottom はじめ */

    .right_bottom {
        padding: 3vw;
        width: 100%;
        height: 100%;
        grid-column: 1/2;
        grid-row: 2/3;
        grid-column: 3/4;
        grid-row: 2/3;
        box-sizing: border-box;
    }

    .cover_right_bottom {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: none;
        box-sizing: border-box;
        transition: background .5s;
        cursor: pointer;
        border-radius: 50%;
    }

    .cover_right_bottom:hover {
        background: green;
        box-shadow: .3vw .3vw .5vw gray;
    }

    .inside_right_bottom {
        display: flex;
        padding: 2vw;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        color: black;
        font-size: 1.4vw;
        transition: background .5s, color 1s;
        animation: SlideIn 2s, inside_right_bottom 7s;
        box-sizing: border-box;
        border-radius: 50%;
    }

    .inside_right_bottom:hover {
        background-image: url(file/tell_icon_02.png);
        color: white;
        font-weight: bold;
    }

    @keyframes inside_right_bottom {
        0% {
            background: none;
            box-shadow: none;
        }

        50% {
            background: none;
            box-shadow: none;

        }

        90% {
            background: green;
            color: white;
            font-weight: bold;

            box-shadow: .3vw .3vw.5vw gray;
        }

        100% {
            background-color: none;
            box-shadow: none;
        }
    }

    /* right_bottom おわり */

    /* firstエリア　はじめ */

    .first {
        padding: 2vw;
        height: 100vh;
    }

    /* firstエリア　おわり */

    /* secondエリア　はじめ */

    #img_second_1 {
        display: block;
        margin: 3vw auto 7vw auto;
        width: 40vw;
        transition: transform 1s;
    }

    #img_second_1:hover {
        transform: scale(.7);
    }

    .para {
        margin: 3vw auto 5vw auto;
        width: 40%;
        text-align: center;
        box-sizing: border-box;
        transition: transform 1s;
    }

    .para:hover {
        transform: scale(.85);
    }

    #img_second_2, #img_second_3 {
        margin: 0;
        height: 8vw;
        cursor: pointer;
    }

    .sharp {
        margin: 3rem auto;
        font-family: Arial;
        font-size: 5vw;
        color: lightgrey;
        text-align: center;
        font-weight: 800;
        cursor: pointer;
        transition: transform 1s, color 2s;
    }

    .sharp:hover {
        transform: scale(.85);
        color: hsla(330, 100%, 56%, 1);
    }

    .imgs {
        width: 27vw;
        margin: 0 auto;
        box-sizing: border-box;
        text-align: center;
        cursor: pointer;
    }



    .imgs img {
        /* background: orange; */
        /* padding: .3vw; */
        width: 5vw;
        box-sizing: border-box;
        transition: background .3s, transform .7s;
    }

    .imgs img:hover {
        transform: scale(1.5);
    }

    .color_1:hover {
        background: hsla(210, 100%, 56%, 1);
    }

    .color_2:hover {
        background: hsla(300, 100%, 56%, 1);
    }

    .color_3:hover {
        background: hsla(390, 100%, 56%, 1);
    }

    .color_4:hover {
        background: hsla(480, 100%, 56%, 1);
    }

    #img_second_4:hover {
        border-radius: 50%;
        background: hsl(330, 100%, 56%);
    }

    /* secondエリア　おわり */

    /* third エリア　はじめ */

    .second_2 {
        display: flex;
        margin: 0 auto;
        vertical-align: bottom;
        justify-content: center;
        width: 90%;
        height: 5vw;
        line-height: 5vw;
        font-size: 5vw;
        font-weight: 900;
        font-family: Arial;
        color: black;
        text-align: center;
        transition: transform 1s, color 1s, text-shadow 2s;
        box-sizing: border-box;
        cursor: pointer;
    }

    .second_2:hover {
        transform: scale(1.1);
        color: white;
        text-shadow: .2vw .2vw 0 hsla(330, 100%, 56%, 1);
    }

    .second_2 img {
        height: 100%
    }

    #img_second_5 {
        display: block;
        margin: 0 auto;
        text-align: center;
        background: hsla(330, 100%, 56%, 1);
        border-radius: 50%;
        width: 12vw;
        height: 12vw;
        transition: width 2s, transform 2s, background 2s, border-radius 2s;
    }

    #img_second_5:hover {
        transform: rotate(720deg) scale(.8);
        background: none;
        width: auto;
        /* height: 8vw; */
        /* width: 8vw; */
        /* border-radius: 50%; */
        border-radius: 0;
    }

    /* third エリア　おわり */

    /* firth エリア　はじめ */

    .forth {
        margin-bottom: 25vw;
    }

    .third_icon {
        margin: 5vw;
        position: relative;
    }

    #img_forth_1 {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        transform: scale(.9);
        height: 10vw;
        height: 10vw;
    }

    #img_forth_2 {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        width: 10vw;
        height: 10vw;
        opacity: 0;
        background: white;
        transition: opacity 1s;
        /* transform: scale(.5); */
    }

    #img_forth_2:hover {
        opacity: 1;
        width: auto;
    }

    /* firth エリア　おわり */

    /* fifth はじめ */

    .fifth_icon {
        margin: 5rem;
        text-align: center;
    }

    .img_fifth_1 {
        width: 3vw;
        cursor: pointer;
    }

    .color_number_1 {
        transition: transform .5s, background .5s;
    }

    .color_number_1:hover {
        transform: scale(2);
        background: hsla(210, 100%, 56%, 1);
    }

    .color_number_2:hover {
        transform: scale(2);
        background: hsla(300, 100%, 56%, 1);
    }

    .color_number_3:hover {
        transform: scale(2);
        background: hsla(390, 100%, 56%, 1);
    }

    .color_number_4:hover {
        transform: scale(2);
        background: hsla(480, 100%, 56%, 1);
    }

    /* fifth おわり */

    /* sixth はじめ */

    .sixth {
        height: 100vh;
    }

    /* sixth おわり */

    /* bottom　はじめ */

    .bottom {
        vertical-align: middle;
        padding: 1.5vw;
        box-sizing: border-box;
    }

    button {
        display: block;
        margin: 0 auto 1.5vw auto;
        height: 5vw;
        width: 50vw;
        border: none;
        font-size: 1.3vw;
        color: white;
        transition: opacity .5s;
        box-shadow: .3vw .3vw .5vw lightgray;
    }

    button:hover {
        opacity: .4;
    }

    #new {
        background: hsla(210, 100%, 56%, 1);
    }

    #demo {
        background: hsla(390, 100%, 56%, 1);
    }

    #howto {
        background: hsla(480, 100%, 56%, 1);
    }

    #bottom_img {
        width: 25vw;
        margin: 5vw auto;
        /* background: red; */
        display: block;
        filter: drop-shadow(.3vw .3vw .5vw gray);
        text-align: center;
    }

    #bottom_img:hover {
        /* box-shadow: .3vw .3vw .5vw lightgray; */
        animation: hover 1s;
    }

    @keyframes hover {
        0% {
            transform: scale(1);
        }

        20% {
            transform: scale(.8);
            background: hsla(210, 100%, 56%, 1);
        }

        40% {
            background: hsla(480, 100%, 56%, 1);
        }

        80% {
            transform: scale(1.2);
            background: hsla(300, 100%, 56%, 1);
        }

        100% {
            transform: scale(1);
        }
    }

    /* bottom　おわり */

    @keyframes SlideIn {
        0% {
            opacity: 0;
            /*初期状態では透明に*/
            transform: translateY(-200%);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes SlideOut {
        0% {
            opacity: 0;
            /*初期状態では透明に*/
            transform: translateY(200%);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .scroll_area {
        /* background: red; */
        display: none;
        position: fixed;
        width: 3.5vw;
        height: 3.5vw;
        padding: 1vw;
        bottom: 0;
        right: 0;
        animation: scroll 2s;
    }

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

        100% {
            opacity: 1;
        }
    }

    .scroll {
        background: hsla(210, 100%, 56%, .4);
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 10%;
        font-size: 1.2vw;
        font-weight: bold;
        color: white;
        transition: background .5s, box-shadow .5s;
    }

    .scroll:hover {
        background: hsla(210, 100%, 56%, 1);
        box-shadow: .3vw .3vw .5vw gray;
    }

    .mobile {
        display: none;
    }