@import url("variables.css?v=2");

*{ margin: 0; padding: 0; box-sizing: border-box; font-family: "M PLUS 1", sans-serif; vertical-align: top; outline: none; color: var(--main-text-color); letter-spacing: .1px; }

body{ display: block; background: var(--main-bg-color); }
body,html{ display: block; margin: 0px; padding: 0px; min-height: 100%; }

.noscroll{ overflow: hidden; }

/*
*
* SCROLL
*
*/
/* width */
::-webkit-scrollbar{ width: 12px; }

/* Track */
::-webkit-scrollbar-track{ background: #303234; }
 
/* Handle */
::-webkit-scrollbar-thumb{ background: #000; }

/* Handle on hover */
::-webkit-scrollbar-thumb:hover{ background: var(--main-color); }

/* Buttons */
::-webkit-scrollbar-button:single-button {
    background-color: #303234;
    display: block;
    background-size: 10px;
    background-repeat: no-repeat;
}

/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
    width: 12px;
    height: 12px;
    background-position: center 4px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' style='fill: %23000000;'><polygon points='50,00 0,50 100,50'/></svg>");
    background-size: 70%;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' style='fill: %23e81b00;'><polygon points='50,00 0,50 100,50'/></svg>");
}

/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
    width: 12px;
    height: 12px;
    background-position: center 4px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' style='fill: %23000000;'><polygon points='0,0 100,0 50,50'/></svg>");
    background-size: 70%;
}

::-webkit-scrollbar-button:single-button:vertical:increment:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' style='fill: %23e81b00;'><polygon points='0,0 100,0 50,50'/></svg>");
}



/*
* LOADING PAGE
*/
.content_loading_page{ position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 200; }
.wrapper_loading_page{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--main-bg-color); }

.loader-triangle-5 {
    position: relative;
    height: 50px;
    width: 50px;
    margin-left: 10px;
}
.loader-triangle-5::after,
.loader-triangle-5::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border: 20px solid transparent;
    border-bottom-color: var(--main-color);
    height: 0;
    width: 0;
    animation: anm-tl-5-rotateA 2s linear infinite 0.5s;
}
.loader-triangle-5::before {
    transform: rotate(90deg);
    animation: anm-tl-5-rotateB 2s linear infinite;
}
@keyframes anm-tl-5-rotateA {
    0%, 25% {
        transform: rotate(0deg);
    }
    50%,
    75% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes anm-tl-5-rotateB {
    0%, 25% {
        transform: rotate(90deg);
    }
    50%,
    75% {
        transform: rotate(270deg);
    }
    100% {
        transform: rotate(450deg);
    }
}

.l_center{ left: 50%; top: 50%; margin-left: -210px; margin-top: -116.5px; transform: scale(0.7); transform-origin: left top; }
.l_header{ left: 50%; top: 50%; margin-left: -210px; margin-top: -116.5px; transform: scale(0.7); transform-origin: left top; }
.l_header .icon_lra{ transition: all .3s; }
.l_header:hover .icon_lra{ filter: drop-shadow( 0px 0px 20px rgba(232, 27, 0, .5)); }

@keyframes l_header {
	0%{

	}
	100%{

	}
}


.background{ position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 20; background: #0f1011 url("../images/background_rokkin.jpg") no-repeat center; background-size: cover; }

.content{ position: relative; height: 0px; overflow: hidden; }
.content.visible{ min-height: 100%; z-index: 600; overflow: visible; animation: 2s fade_content; }

@keyframes fade_content {
	0%{
		opacity: 0;
	}
	20%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

.container{ position: relative; width: 100%; max-width: 100%; margin: 0 auto; }

.container_logo{ height: 0px; z-index: 700; }
.wrapper_logo{ position: relative; }

canvas{
	opacity: .04;
	/*mix-blend-mode: overlay;*/
}

div#cloud1{
	width: 100%;
	height: 100%;
	background: rgba(17,18,19,0);
	overflow: hidden;
}


/*
*
*
* PARAGRAPH
*
*/
p{ font-size: 15px; font-weight: 300; margin-bottom: 20px; }
p b{ font-weight: 700; }


/*
*
*
* SECTION
*
*/
section{ display: block; padding: 50px 0; }


/*
*
*
* HEADER
*
*/
.header{ display: block; position: fixed; left: 0px; top: 0px; width: 100%; background: rgba(0, 0, 0, .2); z-index: 700; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.header .container{ display: flex; justify-content: center; height: 100%; }
.header_disable{ display: none; }

.other_menu_header{ display: flex; justify-content: center; padding: 10px 0; }
#option_sound{ display: flex; flex-direction: column; align-items: end; height: auto; border-right: 1px solid #202325; margin-right: 14px; padding-right: 14px; }
#option_sound p{ font-size: 9px; font-weight: 300; margin-bottom: 10px; letter-spacing: .5px; color: #959fa9; white-space: nowrap; }
#option_sound svg{ display: none; width: 16px; height: auto; cursor: pointer; transition: all .3s; }
#option_sound svg path{ fill: var(--main-color); }
.sound_disable .icon_sound_disable{ display: block !important; }
.sound_enabled .icon_sound_enabled{ display: block !important; }
#option_sound svg:hover{ filter: drop-shadow( 0px 0px 6px rgba(232, 27, 0, .7)); }

.social_header p{ font-size: 9px; font-weight: 800; color: var(--main-text-color); margin-bottom: 6px; white-space: nowrap; }
.icons_social{ display: flex; align-items: center; }
.icons_social a{ display: block; width: 20px; height: 100%; margin-right: 8px; }
.icons_social svg{ display: block; width: 100%; height: auto; transition: all .3s; }
.icons_social path{ fill: var(--main-color); }
.icon_social_youtube{ width: 26px !important; }
.icons_social a:hover svg{ filter: drop-shadow( 0px 0px 6px rgba(232, 27, 0, .7)); }


/*
*
*
* HOME
*
*/
.home{ padding: 0; height: 100%; }
.home .container{ display: flex; justify-content: end; height: 100%; }

.wrapper_triangles{ display: flex; align-items: end; overflow: hidden; }

.triangle_click{ position: absolute; top: 0; width: 100%; height: auto; z-index: 200; }

.triangle_1_home{ position: relative; height: calc(var(--size-fix)); bottom: -7%; }

.triangle_1_home_wrap{ width: calc(calc(var(--size-fix)) * sin(60deg)); height: calc(var(--size-fix)); transition: filter .3s; }
.triangle_1_home_wrap.active{ filter: drop-shadow( 0px 0px 16px rgba(232, 27, 0, .7)); }
.triangle_1_home_wrap_clip{ display: flex; align-items: center; width: 100%; height: 100%; /*background: #e81b00 url("../images/bg_rokkin.png") no-repeat center;*/ background: #e81b00; background-size: cover; background-blend-mode: hard-light, multiply, darken; clip-path: polygon(100% 0%, 0% 50%, 100% 100%); }

.triangle_1_home_wrap_clip > svg{ position: absolute; width: 14%; height: auto; margin-left: 14%; opacity: .5; }

.triangle_1_home .content_t{ position: relative; margin-left: 32%; color: var(	--main-text-color); }
.triangle_1_home .content_t h4{ display: block; font-size: 34px; font-weight: 800; letter-spacing: -1px; margin-top: 8%; }
.triangle_1_home .content_t h4 b{ font-weight: 800; }
.triangle_1_home .content_t p{ font-size: 16px; font-weight: 200; letter-spacing: .5px; }
.triangle_1_home .content_t p b{ font-weight: 400; }


/*
*
*
* FOOTER
*
*/
footer{ position: absolute; bottom: 0px; left: 0px; }
.content_footer{ display: block; padding: 20px; text-align: center; }
.content_footer p{ font-size: 10px; font-weight: 400; color: #646568; text-align: left; margin: 0; }
.content_footer span{ display: inline-block; color: #646568; }
.content_footer span::before{ content: "-"; display: inline-block; margin: 0 4px; }
.content_footer p b{ color: #646568; }