/* CSS Document */
@font-face{
	font-family: "line-font";
	src: url("../font/LINESeedJP_OTF_Rg.woff");
	font-weight: 400;
}

@font-face{
	font-family: "line-font";
	src:url("../font/LINESeedJP_OTF_Eb.woff");
	font-weight: 900;
}

@font-face{
    font-family: "ff-good-headline-web-pro-ext", sans-serif;
    font-weight: 700;
    font-style: normal;
}

html{
	scroll-behavior: smooth;
    font-size: 10px;
}

body{
    background-color: #000;
    
    background-attachment: fixed;
    
    background-image: url("../images/bg.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top center;

}

a:hover{
    opacity: 0.8;
}

#page{
    width: 100%;
    height: 100%;
    position: fixed;
}

#grid_container{
    display: grid;
    
    height: 100%;
    padding: 0;
    margin: 0 auto;
    position: relative;
}

#sp_contents{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: flex-end;
}

.sp_contents_box{
    width: min(100%,350px);
    
}

#main_contents_wrapper{
    display: grid;
    width: 100%;
    overflow-y: scroll;
    scrollbar-width: none;
    
}

#main_contents{
    
}

.content,.content_page{
    position: relative;
    z-index: 5;
}

#main_visual{
    
}

#main_logo{
    position: relative;
    z-index: 6;
    width: calc(934 / 1920 * (100vw));
    display: block;
    margin: 0 auto;
}

#main_visual_image{
    width: calc(1220 / 1920 * (100vw));
    margin: 0 auto;
}

#copy{
    position: absolute;
    top: 0px;
    /* left: calc(50vw - 934/1920 * 100vw/2); */
    right: 0px;
    width: calc(775 /1920 * (100vw));
    max-width: 775px;
    min-width: 40px;
    z-index: 3;
    pointer-events: none;
}

#sub_contents{
    grid-column: 3;
    z-index: 1;
}

.race_btn{
    background-image: url("../images/btn_bg.jpg");
    background-size: cover;
}

.race_btn_off{
    background-image: url("../images/btn_bg_off.jpg");
    background-size: cover;
}

#main_visual_image_page{
    position: absolute;
    top: calc(-82 /1920 * (100vw));
    left: calc(1056 /1920 * (100vw));
    width: calc(1220 /1920 * (100vw));

}

#copy_page{
    position: absolute;
    top: calc(-17 /1920 * (100vw));
    width: calc(514 /1920 * (100vw));
    right: -5px;
}

#main_logo_page{
    position: relative;
    z-index: 6;
}

#copy_page{
    top: calc(33 /1920 * (100vw));
    width: calc(514 /1920 * (100vw));
    right: -25px;
}

.sp_contents_box{
    
}


.youtube_iframe{
    width: 100%;
     height: calc(min(100vw,100rem)* 3 / 4  * 9 / 16);
 /*
     width: 50%;
     height: calc(min(50vw,100rem) * 9 / 16);
     */
     margin: 0 auto 1rem;
 }


@media screen and (min-width: 1281px) {

    #grid_container{
        grid-template-columns: 0.25fr 0.5fr 0.25fr;
        width: min(100%,1920px);
        margin: 0 auto;
        position: relative;
    }

    #sp_contents_inner{
        display: none;
    }

    



}


@media screen and (max-width: 1280px) {

    #grid_container{
        grid-template-columns: 0fr 0.75fr 0.25fr;
        width: min(100%,1280px);
        margin: 0 auto;
        position: relative;
    }

    #main_visual_image{
        position: absolute;
        top: calc(168 /1280 * (100vw));;
        left: calc(686 /1280 * (100vw));;
        width: calc(775 /1280 * (100vw));

    }

    #main_logo{
        position: absolute;
        top: calc(-7 /1280 * (100vw));
        /* left: calc(713 /1280 * (100vw)); */
        right: 0;
        width: calc(410 /1280 * (100vw));
    }

    #copy{
        top: calc(33 /1280 * (100vw));
        width: calc(514 /1280 * (100vw));
        right: -25px;
    }

    #sp_contents_inner{
        display:grid;
    }


}

@media screen and (max-width: 980px) {

    #grid_container{
        grid-template-columns: 0fr 1fr 0fr;
        width: min(100%,980px);
        margin: 0 auto;
        position: relative;
    }

    #main_visual_image{
        position: relative;
        top: calc(138 /980 * (100vw));
        left: calc(12 /980 * (100vw));
        width: calc(976 /980 * (100vw));

    }

    #main_logo{
        position: relative;
        top: calc(0 /980 * (100vw));
        left: calc(-25 /980 * (100vw));
        right: unset;
        width: calc(750 /980 * (100vw));
    }

    #copy{
        position: relative;
        top: calc(-1097 /980 * (100vw));
        width: calc(604 /980 * (100vw));
        right: unset;
        left: calc(129 /980 * (100vw));
    }

    #copy_page{
        display: none;
    
    }

    .content{
        position: relative;
        top: calc(-677 /980 * (100vw));
    }

    .content_page{
        position: relative;
        top: 0;
    }

}