:root{
	--logo-image: url('/wp-content/images/page_waiu/WAIU.svg');
	--logo-white-from:  0.40;
	--logo-white-to:    0.60;

	--slide-text-01:   "Titanium jewelry";
	--slide-text-02:   "Earrings";
	--slide-text-03:   "Rings";
	
	--text-color: rgb(0,0,0);
}

/* PC CONFIG */
@media (min-width:980px){:root{
	--logo-size:  0.6875;
	--logo-top:   0.6975;
	--logo-start-time:  1.0s;
	--logo-stop:  0.040;
	
	--slide-image-top-height:     57vw;
	--slide-image-height:      148.6vw;
	--slide-image-01:   url('/wp-content/images/page_waiu/PC 01.jpg');
	--slide-image-02:   url('/wp-content/images/page_waiu/PC 02.jpg');
	--slide-image-03:   url('/wp-content/images/page_waiu/PC 03.jpg');
	
	--slide-textA-size:  0.028;
	--slide-textA-top:  -0.032;
	--slide-textA-left:  0.00;
	
	--slide-textB-size:  0.014;
	--slide-textB-top:   0.006;
	--slide-textB-left:  0.014;
	
}}

/* MOBILE CONFIG */
@media (max-width:980px){:root{
	--logo-size:  0.96;
	--logo-top:   0.67;
	--logo-start-time:  1.0s;
	--logo-stop:  0.09;
	
	--slide-image-height:  186vw;
	--slide-image-01: url('/wp-content/images/page_waiu/MB 01.jpg');
	--slide-image-02: url('/wp-content/images/page_waiu/MB 02.jpg');
	--slide-image-03: url('/wp-content/images/page_waiu/MB 03.jpg');

	--slide-textA-size:  0.072;
	--slide-textA-top:  -0.014;
	--slide-textA-left:  0.00;
	
	--slide-textB-size:  0.048;
	--slide-textB-top:   0.032;
	--slide-textB-left:  0.048;
}}



/* CORE - DONT EDIT */
/* PC CALC RD */
@media (min-width:980px){:root{
	--rd-slide-image-top-height: var(--slide-image-top-height);
	--rd-slide-image-top-min-height:  100vh;
	--rd-slide-image-height: calc( var(--slide-image-height) / 2);
	--rd-slide-image-width: 50%;
	--rd-slide-image-size: cover;
	
	--rd-main-height: calc(var(--rd-slide-image-top-height) + var(--rd-slide-image-height));
	--rd-middle-block-text-color: #000;
}}

/* MOBILE CALC RD */
@media (max-width:980px){:root{
	--rd-slide-image-top-height: var(--slide-image-height);
	--rd-slide-image-top-min-height: var(--slide-image-height);
	--rd-slide-image-height: var(--slide-image-height);
	--rd-slide-image-width: 100%;
	--rd-slide-image-size: auto 100%;

	--rd-main-height: calc(var(--slide-image-height) * 3);
	--rd-middle-block-text-color: #fff;
}}

/* BOTH CACL RD*/
:root{
	--rd-logo-size: calc(100vw * var(--logo-size));
	--rd-logo-stop: calc(var(--logo-stop) * var(--rd-slide-image-height));
	--rd-logo-top: calc(100vh * var(--logo-top) + var(--rd-logo-stop));
	--rd-logo-pos: calc(50% - var(--rd-logo-stop) * 0.5);
	--rd-logo-height: calc(var(--rd-logo-size) * 0.28 + var(--rd-logo-stop));
	
	--rd-slide-textA-size: calc(100vw * var(--slide-textA-size));
	--rd-slide-textA-top: calc( var(--rd-logo-top) - var(--rd-logo-stop) + (var(--rd-slide-image-top-height) * var(--slide-textA-top)));
	--rd-slide-textA-left: calc(100vw * var(--slide-textA-left));
	
	--rd-slide-textB-size: calc(100vw * var(--slide-textB-size));
	--rd-slide-textB-top: calc(100vw * var(--slide-textB-top));
	--rd-slide-textB-left: calc(100vw * var(--slide-textB-left));
}

body,.slMain,.slBlock,.slBTN {-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; user-select: none;}

body{
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	-webkit-tap-highlight-color: transparent;
}

/* SLIDE */
.slMain{
	display: block;
	width: 100%;
	height: var(--rd-main-height);
	padding: 0;
	overflow: visible;
	-webkit-overflow-scrolling: visible;
	font-family: "Georgia";
	background: #000;
}
.slBlock{
	float: left;
	display: block;
	width: var(--rd-slide-image-width);
	height: var(--rd-slide-image-height);
    min-height: var(--rd-slide-image-top-min-height);
	background-size: var(--rd-slide-image-size);
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	position: relative;
	cursor: pointer;
}
.slTop{
    position: relative;
    top: 0;
    width: 100%;
	height: var(--rd-slide-image-top-height);
	cursor: default;
}
.slBTN {
	float: left;
	display: block;
    width: 100%;
	margin: var(--rd-slide-textB-top) 0 0 0;
	font-size: var(--rd-slide-textB-size);
	text-indent: var(--rd-slide-textB-left);
	text-align: left;
	color: var(--text-color);
}
.img01 .slBTN::before {content: var(--slide-text-01);}
.img02 .slBTN::before {content: var(--slide-text-02);}
.img03 .slBTN::before {content: var(--slide-text-03);}

.slMiddleBlock{
	color: var(--rd-middle-block-text-color);
}
.btnOff{
    width: 100%;
	margin: var(--rd-slide-textA-top) 0 0 0;
	text-align: center;
	font-size: var(--rd-slide-textA-size);
	text-indent: var(--rd-slide-textA-left);
	line-height: var(--rd-slide-textA-line-height);
}

.img01{background-image: var(--slide-image-01);}
.img02{background-image: var(--slide-image-02);}
.img03{background-image: var(--slide-image-03);}

/* LOGO */
.logo--index::after{
    content: "";
    position: absolute;
    left: 50%;
    width: 100%;
    height: var(--rd-logo-height);
	padding-top: 0;
    padding-bottom: var(--rd-logo-stop);
    transform: translate(-50%, -100%);
    background-image: var(--logo-image);
    background-size: var(--rd-logo-size);
	background-position-x: 50%;
    background-position-y: var(--rd-logo-pos);
    background-repeat: no-repeat;
    filter: contrast(100%) brightness(0%) grayscale(100%) invert(0%);
}
.tileLogo{
	position: static;
}
.logo--index{
    position: sticky;
    top: var(--rd-logo-top);
    bottom: 0;
    width: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--logo-start-time) linear;
    z-index: 10;
}