@charset "UTF-8";
/* CSS Document */



@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
/*
font-family: "Roboto", sans-serif;
Regular: 400;
Bold: 700;
*/
/*
FP-KoburinaGoStdN-W3
FP-KoburinaGoStdN-W6
*/



/* ---------- RESET ---------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, b, u, i, center, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video, textarea, input {margin:0;padding:0;border:0;font-size: 100%;font:inherit;vertical-align: baseline;text-decoration:none;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul, li {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
input, textarea, button{-webkit-apparence:none;border:none;background: none;outline: none;}
input:focus, textarea:focus{-webkit-apparence:none;outline: none;border:none;}
img{border:none;outline:none;vertical-align:top;font-size:0;line-height:0;}
img a{border:none;outline: none;}
a:focus{outline:none;}
hr {height:0;margin:0;padding:0;border:0;}
h1, h2, h3, h4, h5, h6, p{margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;text-decoration:none;}
input, textarea, button{-webkit-apparence:none;border:none;background: none;outline: none;}

img{width:100%;height:auto;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translate3d(0,0,0);}

*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none;   outline:none;box-sizing:border-box;margin:0;padding:0;}
/*----------------------------------*/


html{width: 100%;height: 100%;}

body{
	-webkit-text-size-adjust: 100%;
	font-size: 16px;
	font-style: normal;
	color:#FFF;
	line-height: 1;
	font-weight: 400;
	background: #FFF;
	font-family: "FP-KoburinaGoStdN-W3", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "verdana", sans-serif;
}



#loader-bg{
    display:block;
    position:fixed;
    width:100%;
    top:0;
    left:0;
	bottom: 0;
	right: 0;
	height: 100vh;
    z-index:9999;
	background: #000;
    overflow:hidden;
}


/*html{scroll-behavior: auto;}*/


/*-------------------------------------------------------------*/


@media(min-width:769px) {
.mouseHover{-webkit-transition: opacity 0.4s;transition: opacity 0.4s;}
.mouseHover:hover{opacity: 0.5;}
}


.wrapper{
	width: 100%;
	position: relative;
	font-size: 20px;
}

.limit{
	width: 45%;
	max-width: 600px;
	margin: 0 auto;
}



/*-------*/



.navigation{
	position: fixed;
	top: 49.5%;
	right: 20px;
	width: 1px;
	height: 1px;
	z-index: 500;
	font-family: "Roboto", sans-serif;
	font-weight: 400;
     opacity: 0;
    -webkit-transition: opacity 1.4s 0.6s;
    transition: opacity 1.4s 0.6s;
}
.navigation.start{opacity: 1;}




.navigation .nav{
	position: relative;
	text-align: center;
	margin: 0 auto;
	-webkit-transform:rotate(90deg);
	transform:rotate(90deg);
}

.navigation .nav ul{
	position: relative;
	z-index: 500;
	display: flex;
	width: 90vh;
	flex-wrap: nowrap;
	justify-content: center;
	white-space: nowrap;
	-webkit-transform:translateX(-50%);
	transform:translateX(-50%);
}
.navigation .nav ul li{position: relative;}
.navigation .nav ul li::before{
	content: "";
	position: absolute;
	top: 0.1em;
	bottom: 0.1em;
	left: 0;
	width: 1px;
	background: #FFF;
}
.navigation .nav ul li:last-child::after{
	content: "";
	position: absolute;
	top: 0.1em;
	bottom: 0.1em;
	right: 0;
	width: 1px;
	background: #FFF;
}
.navigation .nav .menu a{
	color: #FFF;
	font-size: 12px;
	padding: 0 1.1em;
}
.navigation .nav .menu a span{position: relative;}
.navigation .nav .menu a span::after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: #FFF;
	opacity: 0;
	-webkit-transition: opacity 0.4s;
	transition: opacity 0.4s;
}
.navigation .nav .menu .current a span::after{opacity: 1;}

.navigation .spView{display: none;}
.menu-trigger{display: none;}

/*-------------------------------------------------------------*/


.header{
	width: 100%;
	overflow: hidden;
	position: relative;
	z-index: 60;
}



.topMovie{
	position:absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.topMovie .video-box{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100vh;
}
.topMovie .video-box video{
	min-width: 100%;
	min-height: 100vh;
	position: absolute;
}


@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
.topMovie .video-box video{
	width: 100%;
	top: 50%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
}
@media (max-aspect-ratio: 16/9) {
.topMovie .video-box video{
	height: 100%;
	left: 50%;
    -webkit-transform:translateX(-50%);
	transform:translateX(-50%);
}
}

@media (aspect-ratio: 1/1), (min-aspect-ratio: 1/1) {
.topMovie.sp .video-box video{
	width: 100%;
	height: auto;
	top: 50%;
	left: 0;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
}
@media (max-aspect-ratio: 1/1) {
.topMovie.sp .video-box video{
	height: 100%;
	left: 50%;
    -webkit-transform:translateX(-50%);
	transform:translateX(-50%);
}
}


/*
.header .topMovie{
	position:absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: #FFF;
}

.header .topMovie .video-box{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100vh;
}
.header .topMovie .video-box .video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
*/



.header .contentsTop{
	position:relative;
	width: 100%;
	height: 100vh;
	z-index: 20;
}
.header .contentsTop .mainTitle{
	position: absolute;
	top: 50%;
	left: 3%;
	right: 3%;
	z-index: 15;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
.header .contentsTop .mainTitle h1{
	margin: 0 auto;
    opacity: 0;
    -webkit-transition: opacity 1.6s;
    transition: opacity 1.6s;
}
.header.start .contentsTop .mainTitle h1{opacity: 1;}

.header .contentsTop .spiber{
    position: absolute;
    /*top: 1.5vw;
    left: 1.5vw;
    width: 6vw;*/
    top: 20px;
    left: 20px;
    width: 83px;
	 z-index: 60;
     opacity: 0;
    -webkit-transition: opacity 1.4s 0.6s;
    transition: opacity 1.4s 0.6s;
}
.header.start .contentsTop .spiber{opacity: 1;}




.header .itemLaunch{
	position:relative;
	width: 100%;
	height: 100vh;
	z-index: 20;
}
.header .itemLaunch .launchTitle{
	position: absolute;
	top: 50%;
	left: 3%;
	right: 3%;
	z-index: 15;
	opacity: 1;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
.header .itemLaunch .launchTitle h2{
	margin: 0 auto;
}

.header .null{
	width: 100%;
	height: 50vw;
}
.header .titleBk{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: -2px;
	z-index: 10;
	background:rgba(0,150,220,0.8);
	opacity: 0;
}




/*---------------------------------*/



.about{
	width: 100%;
	position: relative;
	z-index: 50;
	padding: 20vw 0;
}
.about h2{width: 100%;}
.about h3{
    position: relative;
    padding-left: 2.5em;
    margin-top: 5em;
	font-family: "FP-KoburinaGoStdN-W6"
}
.about h3::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 2em;
    height: 1px;
    background: #FFF;
}

.about p{
    font-size: 1em;
    line-height: 2.0;
    margin-top: 3em;
    text-align: justify;
	text-justify: inter-ideograph;
}

.aboutBk{
	position:absolute;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	height: 100vh;
	background: url("../images/bk01.webp") center center;
	background-size: cover;
}


/*-----------*/





.movie{
	position: relative;
	z-index: 60;
	width: 100%;
	overflow: hidden;
}
.movie .videoBox{
	width: 100%;
	margin: 0 auto;
	position: relative;
	line-height: 0;
	font-size: 0;
}
.movie .youtube{
	position:relative;
	z-index: 10;
	width:100%;
	padding-top:56.25%;
}
.movie .player{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.movie .youtube iframe{
	position:absolute;
	top: 0;
	left: 0;
	width:100%;
	height:100%;
}
.movie .thumb{
	position:absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index:5;
    cursor: pointer;
	display: block;
	overflow: hidden;
}

.movie .thumb .playBT{
    position: absolute;
    width: 5.7vw;
    max-width: 95px;
    top:50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 10;
    line-height: 1;
    -webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
.movie .thumb .playBT .play{ width: 100%;}


/*-----------*/


.product{
	width: 100%;
	position: relative;
	z-index: 70;
    padding: 10vw 0;
}
.product h2{
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size:14px;
    text-align: center;
}

.product .item{
    width: 90%;
    max-width: 1360px;
    margin: 3.5vw auto 0;
}
.product .item .swiperBox{
    width: 100%;
    overflow: hidden;
}

/*----------*/

.imageMask{
	width:100%;
	box-sizing:border-box;
	z-index:5;
	position: relative;
    overflow: hidden;
}
.main-image .main-image-motion{
	width:100%;
	height:100%;
	position:absolute;
	background:#AEAEAE;
	z-index:100;
	left:0;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	will-change: transform,animation,position;
	-webkit-transition: width 0.8s cubic-bezier(0.32, 0, 0.67, 0);
    transition: width 0.8s cubic-bezier(0.32, 0, 0.67, 0);
}
.main-image .imageBox {
	opacity: 0;
	-webkit-transform:scale(1.15);
	transform:scale(1.15);
	-webkit-transition: opacity 0.8s,transform 1.4s cubic-bezier(0.33, 1, 0.68, 1);
    transition: opacity 0.8s,transform 1.4s cubic-bezier(0.33, 1, 0.68, 1);
}
.main-image.mask-image .main-image-motion { width: 0;left: 0;}
.main-image.mask-image .imageBox {opacity: 0; }
.main-image.show-image .main-image-motion {
	width: 0;
	right: 0;
	left:inherit;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	will-change: transform,animation,position;
	-webkit-transition: width 0.8s cubic-bezier(0.33, 1, 0.68, 1);
    transition: width 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.main-image.show-image .imageBox {
	opacity: 1;
	-webkit-transform:scale(1.0);
	transform:scale(1.0);
}

/*----------*/

.product .item .spec{
    margin-top: 6vw;
    text-align: center;
}
.product .item .spec h3{
    width: 370px;
    margin: 0 auto;
}
.product .item .spec p{
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size:14px;
    line-height: 1.7;
    margin-top: 1.1em;
}
.product .item .spec .buy{
    margin-top: 2em;
}
.product .item .spec .buy a{
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size:16px;
    display: inline-block;
    color: #000;
    background: #FFF;
    width: 200px;
    padding: 0.6em 0;
}


.product .detail{
    font-size: 1em;
    line-height: 2.0;
    margin-top: 4em;
    /*text-align: justify;
	text-justify: inter-ideograph;*/
}



.product .profile{
    width: 100%;
    border: 1px solid #FFF;
    margin-top: 7vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    padding: 5.5%;
}
.product .profile .logo{width: 110px;}
.product .profile .text{width: calc(100% - 140px);}
.product .profile .text h4{ line-height: 1.6;}
.product .profile .text h4 em{ font-family: "Roboto", sans-serif;font-weight: 400;}
.product .profile .text p{
    line-height: 1.6;
    margin-top: 0.2em;
/*    text-align: justify;
	text-justify: inter-ideograph;*/
}
.product .profile .text a{
    color: #FFF;
    text-decoration: underline;
}


.productBk{
	position:absolute;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	height: 100vh;
	background: url("../images/bk02.webp") center center;
	background-size: cover;
}

/*-----------*/


.stocksts{
	width: 100%;
	position: relative;
	z-index: 80;
    padding: 10vw 0 0;
}
.stocksts h2{
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size:14px;
    text-align: center;
}

.stocksts .list{
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size:0.9em;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-align: center;
    margin-top: 7vw;
}
.stocksts .list li{
    margin-bottom: 0.6em;
}

.stocksts .footer{
    width: calc(100% - 40px);
    margin: 14vw auto 0;
    padding-bottom: 20px;
    position:relative;
}
.stocksts .footer .logo{
    position: absolute;
    top: 0;
    left: 0;
    width: 160px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.stocksts .footer .logo .hh{width: 54px;}
.stocksts .footer .logo .spiber{width: 84px;}

.stocksts .footer .instagram{
    position: absolute;
    top: 5px;
    right: 0;
    width: 26px;
}

.stocksts .footer .copyright{
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size:10px;
    text-align: center;
    line-height: 1.2;
}




.stockstsBk{
	position:fixed;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	height: 100vh;
	background: url("../images/bk03.webp") center center;
	background-size: cover;
}




/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/



@media(max-width:1380px) {

.wrapper{font-size: 1.4vw;}
.movie .thumb .playBT{width: 80px;}
    
}



@media(max-width:1180px) {

.wrapper{font-size: 1.5vw;}
.limit{width: 48%;}

.movie .thumb .playBT{width: 70px;}
    
.product h2{font-size:13px;}
.product .item .spec h3{width: 350px;}
.product .item .spec p{font-size:13px;}
.product .item .spec .buy a{font-size:15px;}

.product .profile .logo{width: 100px;}
.product .profile .text{width: calc(100% - 130px);}

.stocksts h2{font-size:13px;}
.stocksts .list{font-size:0.95em;}

}


@media(max-width:980px) {

.wrapper{font-size: 15px;}
.limit{width: 460px;}

.navigation{right: 17px;}
.navigation .nav a{font-size: 11px;}

.header .contentsTop .spiber{top: 17px;left: 17px;width: 76px;}

.about{padding: 24vw 0;}

.movie .thumb .playBT{width: 65px;}

.product{padding: 14vw 0;}
.product .item{margin-top: 5vw;}
.product .item .spec{margin-top: 7vw;}
.product .item .spec h3{width: 320px;}
.product .item .spec .buy a{width: 160px;}
.product .profile .logo{width: 85px;}
.product .profile .text{width: calc(100% - 110px);}

.stocksts{padding: 14vw 0 0;}
.stocksts .footer{width: calc(100% - 34px);margin-top: 17vw;padding-bottom: 17px;}
.stocksts .footer .logo{width: 140px;}
.stocksts .footer .logo .hh{width: 49px;}
.stocksts .footer .logo .spiber{width: 76px;}
.stocksts .footer .instagram{width: 24px;}
.stocksts .footer .copyright{font-size:9px;}


}



/*===========================================*/



@media(max-width:768px) {


body.fixed{
    position:fixed;
    width:100%;
    height:100%;
    overflow:hidden;    
}
.navigation{
	position: fixed;
	top: 0;
	left:100%;
	width: 100%;
	height: 100%;
	touch-action: none;
	-webkit-transition: left 0.8s cubic-bezier(0.5, 0, 0.75, 0), opacity 1.4s 0.6s;
    transition: left 0.8s cubic-bezier(0.5, 0, 0.75, 0), opacity 1.4s 0.6s;
}
.navigation.open{
	left: 0%;
	-webkit-transition: left 1.0s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.4s 0.6s;
    transition: left 1.0s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.4s 0.6s;
}
.menu-trigger{
	position:fixed;
	top:20px;
	right:20px;
	width:4.6em;
	height: 2em;
	z-index:600;
	display: block;
    pointer-events: auto;
	border: 1px solid #FFF;
	border-radius: 5px;
	font-size: 15px;
	touch-action: auto;
	font-family: "Roboto", sans-serif;
	font-weight: 400;
}
.menu-trigger span{
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	text-align: center;
	margin: -0.5em auto 0;
	-webkit-transition: opacity 0.4s 0.2s;
	transition: opacity 0.4s 0.2s;
}
.menu-trigger span.on{opacity: 1;}
.menu-trigger.open span.on{opacity: 0;}
.menu-trigger span.off{opacity: 0;}
.menu-trigger.open span.off{opacity: 1;}

.navigation .nav{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 50;
	background: #1E1E1E;
	padding: 0;
	width: 40vw;
	text-align: left;
	touch-action: auto;
	-webkit-transform:none;
	transform:none;
}
.navigation .nav ul{
	position: relative;
	display: block;
	width:76%;
	margin: 0 auto;
	-webkit-transform:none;
	transform:none;
}
.navigation .nav ul li::before,
.navigation .nav ul li::after{display: none;}

.navigation .nav ul li{margin-top: 3.8vw;}
.navigation .nav .menu a{font-size: 2.9vw;padding: 0;}
.navigation .nav .menu a span::after{display: none;}


.navigation .spView{display: block;}
.navigation .nav .top{margin-top: 16vw;padding-bottom: 3vw;}
.navigation .nav .top h2{width:76%;margin: 0 auto;}
.navigation .nav .bottom{
	position: absolute;
	bottom:4.5vw;
	left: 0;
	right: 0;
	width:76%;
	margin: 0 auto;
	display: flex;
	touch-action: auto;
	justify-content:space-between;
	align-items: center;
}
.navigation .nav .bottom .hh{width: 22.7%;}
.navigation .nav .bottom .spiber{width: 35.6%;}
.navigation .nav .bottom .instagram{width:13.56%;}

.navigation .closeArea{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
}



/*-----------------*/


.wrapper{font-size: 18px;}
.limit{width: 76%;max-width: 500px;}

.header .contentsTop{height: 100dvh;}
.header .contentsTop .spiber{top: 25px;left: 25px;width:16vw;}
.header .null{height: 0px;}


.about{padding: 30vw 0;}

.movie .thumb .playBT{width: 120px;}

.product{padding: 20vw 0;}
.product h2{font-size:14px;}
.product .item{width: 100%;margin-top: 10vw;}
.product .item .spec{margin-top: 12vw;}
.product .item .spec h3{width: 68vw;max-width: 420px;}
.product .item .spec p{font-size:15px;}
.product .item .spec .buy a{width: 200px;font-size:17px;}

.product .profile{display: block;margin-top: 9vw;font-size: 14px;padding: 10% 6% 8%;}
.product .profile .logo{width:30%;margin: 0 auto;}
.product .profile .text{width:100%;margin-top: 12%;}

.stocksts{padding: 20vw 0 0;}
.stocksts h2{font-size:14px;}
.stocksts .list{margin-top: 11vw;}

.stocksts .footer{margin-top: 20vw;padding-bottom: 30px;}
.stocksts .footer .logo{display:none;}
.stocksts .footer .instagram{display: none;}
.stocksts .footer .copyright{font-size:10px;}



.aboutBk{background-image: url("../images/bk01sp.webp");}
.productBk{background-image: url("../images/bk02sp.webp");}
.stockstsBk{background-image: url("../images/bk03sp.webp");}


}




@media(max-width:650px) {

.menu-trigger{top:3vw;right:3vw;width:4em;height: 1.8em;font-size: 0.8em;}
.navigation .nav{width: 62vw;}
.navigation .nav .top{margin-top: 25vw;padding-bottom: 6vw;}
.navigation .nav ul li{margin-top: 5vw;}
.navigation .nav .menu a{font-size: 4.4vw;}
.navigation .nav .bottom{bottom:6vw;width:78%;}
.navigation .nav .bottom .hh{width: 24.5%;}
.navigation .nav .bottom .spiber{width: 38%;}
.navigation .nav .bottom .instagram{width:14.5%;}

/*---------*/

.wrapper{font-size: 4vw;}
.limit{width: 77vw;}

.header .contentsTop .spiber{top: 4vw;left: 4vw;width:16vw;}


/*---------*/

.about{padding: 37vw 0;}
.about h3{padding-left: 2em;margin-top: 22.5vw;}
.about h3::before{width: 1.7em;}
.about p{margin-top:2.6em;}

/*---------*/

.movie .thumb .playBT{width: 16vw;}

/*---------*/

.product h2{font-size:0.725em;}

.product .item .spec{margin-top: 14vw;}
.product .item .spec h3{width: 76vw;}
.product .item .spec p{font-size:0.725em;}
.product .item .spec .buy{margin-top: 1.2em;}
.product .item .spec .buy a{font-size:0.8em;width: 40vw;padding: 0.7em 0;}

.product .detail{margin-top: 3em;}

.product .profile{margin-top: 12vw;font-size: 0.7em;padding: 13% 7.5% 8%;}
.product .profile .logo{width:35%;}
.product .profile .text{margin-top: 13%;}

/*---------*/

.stocksts h2{font-size:0.725em;}
.stocksts .list{font-size:0.8em;}

.stocksts .footer{margin-top: 27vw;padding-bottom: 20px;}
.stocksts .footer .copyright{font-size:0.5em;}


}