body{
    background: url('../img/bg.png') right bottom no-repeat #000;
    @media screen and (max-width: 800px) {
        background: #000;
    }
}

.main{
    background: url('../img/main_visual.jpg') center top no-repeat;
    background-size: contain;
    position: relative;
    height: 75vw;
    @media screen and (max-width: 800px) {
        height: 85vw;
    }

    h1{
        position: absolute;
        top: 65px;
        left: 6vw;
        width: 52vw;
        @media screen and (max-width: 800px) {
            line-height: 1;
            top: 0;
            width: 70vw;
        }
        img{
            max-width: 100%;
        }
    }
    .name{
        position: absolute;
        right: 5vw;
        bottom: 32vw;
        opacity: 0.5;
        @media screen and (max-width: 800px) {
            top: 40vw;
            bottom: auto;
            font-size: 10px;
        }
    }
   .photo{
        position: absolute;
        bottom: 0;
        width: 100%;
       ul{
            max-width: 90vw;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            li{
                width: 48%;
                position: relative;
                overflow: hidden;
                a{
                    div{
                        position: absolute;
                        bottom: 10px;
                        right: 10px;
                        font-weight: bold;
                        color: #000;
                        z-index: 1;
                        @media screen and (max-width: 800px) {
                            font-size: 10px;
                            bottom: 5px;
                            right: 5px;
                        }
                    }
                    img{
                        width: 100%;
                        transition: .3s;
                    }
                    &:hover{
                        img{
                            transform: scale(1.1);
                        }
                    }
                }

            }
        }
    }
}


.hide-area{
	display: none;
}


.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}

.product{
    margin: 40px auto 60px;
    max-width: 90vw;
    display: flex;
    align-items: center;
    @media screen and (max-width: 800px) {
        display: block;
    }
    .photo{
        margin-right: 60px;
        @media screen and (max-width: 800px) {
            margin-right: 0;
            text-align: center;
        }
    }
    .spec{
        ul{
            li{
                display: flex;
                margin: 15px 0;
                @media screen and (max-width: 800px) {
                    margin: 10px 0;
                }
                div{
                    color: #AFAFAF;
                    &:first-child{
                        width: 100px;
                        @media screen and (max-width: 800px) {
                            width: 30%;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 800px) {
    .sns{
        width: auto;
    }
}