@charset "UTF-8";
/****************
FONT(JAPANESE)
****************/
/*
 * [ Copyright ]
 * https://typekit.com/fonts/source-han-sans-japanese
 * by adobe
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 * http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@font-face {
	font-family: "shsFont";
	font-weight:100;
	src: url("../asset/SourceHanSansJP-ExtraLight.eot?") format('eot'),
	url("../asset/SourceHanSansJP-ExtraLight.woff") format('woff'),
	url("../asset/SourceHanSansJP-ExtraLight.otf")	format('opentype');
}
	
@font-face {
	font-family: "shsFont";
	font-weight:200;
	src: url("../asset/SourceHanSansJP-Light.eot?") format('eot'),
	url("../asset/SourceHanSansJP-Light.woff") format('woff'),
	url("../asset/SourceHanSansJP-Light.otf")	format('opentype');
}
@font-face {
	font-family: "shsFont";
	font-weight:300;
	src: url("../asset/SourceHanSansJP-Regular.eot?") format('eot'),
	url("../asset/SourceHanSansJP-Regular.woff") format('woff'),
	url("../asset/SourceHanSansJP-Regular.otf")	format('opentype');
}

@font-face {
	font-family: "shsFont";
	font-weight:400;
	src: url("../asset/SourceHanSansJP-Medium.eot?") format('eot'),
	url("../asset/SourceHanSansJP-Medium.woff") format('woff'),
	url("../asset/SourceHanSansJP-Medium.otf")	format('opentype');
}
@font-face {
	font-family: "shsFont";
	font-weight:500;
	src: url("../asset/SourceHanSansJP-Normal.eot?") format('eot'),
	url("../asset/SourceHanSansJP-Normal.woff") format('woff'),
	url("../asset/SourceHanSansJP-Normal.otf")	format('opentype');
}
@font-face {
	font-family: "shsFont";
	font-weight:600;
	src: url("../asset/SourceHanSansJP-Bold.eot?") format('eot'),
	url("../asset/SourceHanSansJP-Bold.woff") format('woff'),
	url("../asset/SourceHanSansJP-Bold.otf")	format('opentype');
}

@font-face {
	font-family: "shsFont";
	font-weight:700;
	src: url("../asset/SourceHanSansJP-Heavy.eot?") format('eot'),
	url("../asset/SourceHanSansJP-Heavy.woff") format('woff'),
	url("../asset/SourceHanSansJP-Heavy.otf")	format('opentype');
}
@font-face {
	font-family: 'FontAwesome';
	src: url('../asset/fontawesome-webfont.eot?v=4.1.0');
	src: url('../asset/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), 
	url('../asset/fontawesome-webfont.woff?v=4.1.0') format('woff'), 
	url('../asset/fontawesome-webfont.ttf?v=4.1.0') format('truetype'),
	url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
/****************
ALL
****************/
* {
	margin:0;
	padding:0;
	border:none;
	outline:none;
	/* original width without padding */
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}
html{
	background:#000;
}
body{
	font-family: 'shsFont','Open Sans', sans-serif;
}
body#top{
	background:#000;
}
li{
	list-style-type:none;
}
a{
	text-decoration:none;
	color:inherit;
}
header > div,
footer > div{
	position:relative;
	top:0;
	margin:auto;
	text-align:left;
	z-index:2;
	overflow:hidden;
}
header > div{
	width:100%;
	padding:0 20px;
}
footer > div{
	max-width:1000px;
	_width:1000px;
	padding:0 10px;
}

.cf:before,
.cf:after {
	content:"";
	display:block;
}
.cf:after {
	clear:both;
}

#gototop{
	display:block;
	position:fixed;
	bottom:10px;
	right:10px;
	width:35px;
	height:35px;
	z-index:1000;
	border-radius:50%;
	background:#666;
}
#gototop:after{
	display:block;
	position:absolute;
	top:13px;
	left:11px;
	width:10px;
	height:10px;
	border-width:4px 0 0 4px;
	border-style:solid;
	border-color:#fff;
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
	content:"";
}


.arrow{
	position:absolute;
	left:50%;
	width:60px;
	height:150px;
	overflow:hidden;
/*	z-index:100000;*/
}
.arrow:before,
.arrow:after{
	width:60px;
	height:60px;
	display:block;
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
	background:transparent;
	box-shadow:8px 8px 0 rgba(255,255,255,.2);
	content:"";
}
.arrow:after{
	margin-top:-50%;
}

/* LOADING 
****************/
#loader_cicle p{
	margin:7px 0;
	font-size:.8em;
	color:#666;
}
#loader_cicle span{
	display: inline-block;
	width:40px;
	height:40px;
	border-radius: 50%;
	border: 5px solid #ccc;
	border-top-color: transparent;
	-webkit-animation: loader_cicle 1s infinite ease-in;
	-ms-animation: loader_cicle 1s infinite ease-in;
	animation: loader_cicle 1s infinite ease-in;
}

@-webkit-keyframes loader_cicle {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}
@-ms-keyframes loader_cicle {
	0% { -ms-transform: rotate(0deg); }
	100% { -ms-transform: rotate(360deg); }
}
@-moz-keyframes loader_cicle {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

#whole_center{
	text-align:center;
	position:fixed;
	width:100%;
	height:100%;
	background:#000;
	z-index:5000;
}
#whole_center #loader_cicle{
	position:absolute;
	top:50%;
	left:50%;
	margin:-50px 0 0 -100px;
	width:200px;
}



/****************
HEADER
****************/
header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	padding:12px 0;
	color:#fff;
	background:#000;
	z-index:5000;
}
header h1{
	width:150px;
	height:24px;
	float:left;
}
header h1 a{
	display:block;
}
header h1 img{
	display:block;
	width:100%;
	width:155px\9;
}
header ul{
	display:inline-block;
}
header em{
	float:right;
	font-style:normal;
	font-size:13px;
	font-weight:300;
	letter-spacing:.02em;
	height:24px;
}
header em *{
	display:inline-block;
	vertical-align:middle;
}
header em strong{
	padding:0 0 0 7px;
	font-size:18px;
	font-weight:700;
	line-height:1em;
	line-height:1.4em;
}


/****************
TEMPORARY STYLE
****************/
#tmp-lineup{
	position:absolute;
	top:55px;
	right:5px;
	text-align:center;
	color:#fff;
	z-index:501;
	font-size:13px;
	font-weight:200;
}
#top #tmp-lineup:before{
	content:"Other Lineup :";
	margin:0 7px 0 0;
}
#tmp-lineup li{
	display:inline-block;
	margin:0 15px;
}
#tmp-lineup li:hover{
	opacity:.5;
}
#tmp-lineup a{
	position:relative;
}
#tmp-lineup a:before{
	content:"";
	position:absolute;
	top:5px;
	left:-17px;
	border-width:3px 0 3px 8px;
	border-color:transparent #fff;
	border-style:solid;
}



/****************
MAIN
****************/
#main{
	width:100%;
	text-align:left;
	overflow:hidden;
}



/****************
INTRO ANIMATION
****************/
#intro{
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index:500;
	overflow:hidden;
}
.tx-catch{
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-309px;
	margin-top:-110px;
	z-index:1000;

}
#first-dust{
	position:relative;
	z-index:1000;
	position:absolute;
	left:50%;
	top:50%;
	width:300px;
	margin:-120px 0 0 -150px;
	opacity:0;
}
.tx-catch.blur{
	opacity:.5;
}
#img77{
	position:relative;
	z-index:1;
	background:url(../img/img77.png) center center no-repeat;
}
.caution{
	position:absolute;
	bottom:24px;
	left:50%;
	margin-left:370px;
	font-size:11px;
	opacity:.5;
	z-index:1000;
	text-align:left;
	line-height:1.4em;
}
#mesh{
	position:relative;
	top:5px;
	-webkit-animation: img77 .5s infinite alternate ease-in;
	 -ms-animation: img77 .5s infinite alternate ease-in;
	  animation:img77 .5s infinite alternate ease-in;
}
@keyframes img77{
	0% {transform:translate(0px,0px)}
	74% {transform:translate(0px,-1px)}
	76% {transform:translate(-1px,0px)}
	78% {transform:translate(0px,1px)}
	80% {transform:translate(-1px,0px)}
	82% {transform:translate(0px,-1px)}
	84% {transform:translate(-1px,0px)}
	86% {transform:translate(0px,-1px)}
	88% {transform:translate(-1px,0px)}
	90% {transform:translate(0px,1px)}
	92% {transform:translate(-1px,0px)}
	94% {transform:translate(0px,-1px)}
	96% {transform:translate(-1px,0px)}
	98% {transform:translate(0px,1px)}
	100% {transform:translate(-1px,0px)}
}
@-ms-keyframes img77{
	0% {-ms-transform:translate(0px,0px)}
	74% {-ms-transform:translate(0px,-1px)}
	76% {-ms-transform:translate(-1px,0px)}
	78% {-ms-transform:translate(0px,1px)}
	80% {-ms-transform:translate(-1px,0px)}
	82% {-ms-transform:translate(0px,-1px)}
	84% {-ms-transform:translate(-1px,0px)}
	86% {-ms-transform:translate(0px,-1px)}
	88% {-ms-transform:translate(-1px,0px)}
	90% {-ms-transform:translate(0px,1px)}
	92% {-ms-transform:translate(-1px,0px)}
	94% {-ms-transform:translate(0px,-1px)}
	96% {-ms-transform:translate(-1px,0px)}
	98% {-ms-transform:translate(0px,1px)}
	100% {-ms-transform:translate(-1px,0px)}
}
@keyframes img77{
	0% {transform:translate(0px,0px)}
	74% {transform:translate(0px,-1px)}
	76% {transform:translate(-1px,0px)}
	78% {transform:translate(0px,1px)}
	80% {transform:translate(-1px,0px)}
	82% {transform:translate(0px,-1px)}
	84% {transform:translate(-1px,0px)}
	86% {transform:translate(0px,-1px)}
	88% {transform:translate(-1px,0px)}
	90% {transform:translate(0px,1px)}
	92% {transform:translate(-1px,0px)}
	94% {transform:translate(0px,-1px)}
	96% {transform:translate(-1px,0px)}
	98% {transform:translate(0px,1px)}
	100% {transform:translate(-1px,0px)}
}

#col-intro{
	position:relative;
	margin-top:900px;
	height:900px;
	color:#fff;
	text-align:center;
	line-height:2em;
	background:rgba(0,0,0,.5);
}
#tx-intro{
	padding:250px 50px 140px;
	font-size:20px;
	line-height:3em;
	font-weight:600;
	text-shadow:0 0 5px #000;
}
#tx-intro-m{
	display:none;
}

#second-dust,
#third-dust{
	position:relative;
	z-index:999;
	position:absolute;
	left:50%;
	top:550px;
	margin-left:90px;
	width:760px;
	opacity:.5;
}

#second-dust{margin-left:90px;}
#third-dust	{margin-left:-890px;}



/*
H2 STYLE FOR
AS-BT77
AS-BT70
AS-BT33
****************/
.h2-product{
	position:relative;
	font-size:50px;
	text-align:center;
	padding:200px 0;
	background:#000;
	color:#fff;
	z-index:500;
	overflow:hidden;
	box-shadow:0 0 10px 10px rgba(0,0,0,.3);
}
.h2-product div{
	position:relative;
}

.h2-product i{
	display:block;
	font-size:110px;
	line-height:1em;
	font-family:'Open Sans', sans-serif;
}
.h2-product span{
	display:block;
}

#h2-asbt77 { background:#000;	color:#fff;font-size:50px; padding:200px 0;}
#h2-asbt70 { background:#390;	color:#fff;font-size:48px; padding:40px 0; }
#h2-asbt33 { background:#f4f1ee;color:#000;font-size:48px; padding:40px 0; }


#h2-asbt77 i		{color:#262626;}
#h2-asbt77 div		{top:-500px;}
#h2-asbt77 i:after	{top:-70%;}
#h2-asbt77 .arrow	{top:-50%;margin:-75px -30px 0 0;}


#h2-asbt70 i,
#h2-asbt33 i{
	opacity:.15;
	letter-spacing:-.03em;
	font-family:'Open Sans', sans-serif;
}

/*
WRAP STYLE FOR
AS-BT77
AS-BT70
AS-BT33
****************/
#wrap77,
#wrap70,
#wrap33{
	position:relative;
	margin:100px auto;
	width:1000px;
	color:#fff;
	font-weight:700;
	font-size:32px;
}

#wrap77 p,
#wrap70 p,
#wrap33 p{
	width:40%;
	backgruond:#654;
}
#wrap77 p,
#wrap70 p{
	-ms-text-shadow:0 0 10px #000;
	text-shadow:0 0 10px #000;
}
#wrap33 p{
	color:#000;
}



/*
AS-BT77 ONLY
(index.html)
****************/

#guide{
	position:absolute;
	bottom:50px;
	left:50%;
	z-index:1000;
	margin-left:-60px;
	color:#fff;
	font-size:1.2em;
	letter-spacing:.3em;
}
#guide:after{
	position:absolute;
	top:100%;
	left:50%;
	margin-left:-30px;
	border-width:20px 30px;
	border-style:solid;
	border-color:#e60012 transparent transparent transparent;
	content:"";
}
#first-img{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:1200px;
	background:url(../img/bg1.jpg) repeat;
	background-position:center center;
	z-index:0;
}

#col-asbt77{
	position:relative;
	background:url(../img/bg2.jpg) repeat;
	background-position:center center;
	z-index:1000;
}
#parts77-1 img	{float:left;}
#parts77-1 p	{float:left;text-align:right;margin:60px 21px 0 0;}

#parts77-2 img	{float:right;}
#parts77-2 p	{float:right;margin:100px 0 0 0;}

#parts77-3 img	{float:left;}
#parts77-3 p	{float:left;text-align:right;margin:120px 21px 0 0;}

#parts77-4 img	{float:right;}
#parts77-4 p	{float:right;margin:110px 0 0 0;}




/*
AS-BT70
AS-BT33 ONLY
(lineup.html)
****************/

#col-asbt70{
	margin-top:44px;
	background:url(../img/bg3.jpg) repeat;
	background-position:center center;
}
#col-asbt33{
	background:url(../img/bg4.jpg) repeat;
	background-position:center center;
}

#parts70-1 img	{float:left;}
#parts70-1 p	{float:left;text-align:right;margin:140px 21px 0 0;}

#parts70-2 img	{float:right;}
#parts70-2 p	{float:right;margin:93px 0 0 0;}

#parts33-1 img	{float:left;}
#parts33-1 p	{float:left;text-align:right;margin:88px 21px 0 0;}

#parts33-2 img	{float:right;}
#parts33-2 p	{float:right;margin:100px 0 0 0;}






/*
SELECT LINEUP
(index.html)
****************/
#col-lineup{
	position:relative;
	background:url(../img/bg-lineup.jpg);
	background-size:cover;
	background-position:center center;
}
.bg-lineup{
	width:1000px;
	margin:auto;
}
#cont-lineup{
	text-align:center;
	width:1000px;
}
#cont-lineup h2{
	font-size:110px;
	text-align:left;
	color:#fff;
	opacity:.5;
	text-shadow:0 0 10px #000;
}
#goto-asbt70,
#goto-asbt33{
	display:inline-block;
	width:49%;
	margin:0 0 50px;
}
#goto-asbt70 a,
#goto-asbt33 a{
	display:block;
}
#goto-asbt70 a img,
#goto-asbt33 a img {
	-webkit-transition:0.2s ease-in-out;
	-moz-transition:0.2s ease-in-out;
	-ms-transition:0.2s ease-in-out;
	transition:0.2s ease-in-out;
}

#goto-asbt70 a img:hover,
#goto-asbt33 a img:hover{
	-webkit-transform:scale(1.1,1.1);
	-moz-transform:scale(1.,1.1);
	-ms-transform:scale(1.1,1.1);
	transform:scale(1.1,1.1);
}
#goto-asbt70 p,
#goto-asbt33 p{
	position:relative;
	display:inline-block;
	vertical-align:middle;
	font-size:32px;
	line-height:1em;
	font-weight:600;
}
#goto-asbt70 p *,
#goto-asbt33 p *{
	display:inline-block;
	vertical-align:middle;
}
#goto-asbt70 p{
	text-shadow:0 0 5px #000;
}
#goto-asbt70 p em,
#goto-asbt33 p em{
	font-style:normal;
}
#goto-asbt70 small,
#goto-asbt33 small{
	font-size:13px;
	font-weight:200;
	line-height:32px;
}
#goto-asbt70 p:before,
#goto-asbt33 p:before{
	position:absolute;
	top:50%;
	left:-25px;
	margin-top:-.5em;
	content:"\25b8";
	padding:0 7px 0 0;
}

#goto-asbt70{
	color:#fff;
}





/****************
NAV
****************/
nav{
	text-align:center;
	height:30px;
	width:100%;
	color:#fff;
	position:fixed;
	z-index:1000;
	top:55px;
}
nav li{
	display:inline-block;
	vertical-align:top;
}

nav a {
	position: relative;
	display: inline-block;
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	line-height:1em;
}
nav .parent {
	position: relative;
	width: 200px;
	height: 30px;

	-ms-perspective: 300px;
	-webkit-perspective: 300px;
	perspective: 300px;
}
nav .parent span {
	display: block;
	position: absolute;
	width: 200px;
	height: 30px;
	text-align: center;
	line-height: 30px;
/*	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;*/

	-ms-transition: all .3s;
	-webkit-transition: all .3s;
	transition: all .3s;
	pointer-events: none;
}
nav .parent span:nth-child(1) {
	background: #fff;
	color: #000;

	-ms-transform: rotateX(90deg);
	-webkit-transform: rotateX(90deg);
	-moz-transform: rotateX(90deg);
	transform: rotateX(90deg);

	-ms-transform-origin: 50% 50% -15px;
	-webkit-transform-origin: 50% 50% -15px;
	-moz-transform-origin: 50% 50% -15px;
	transform-origin: 50% 50% -15px;
}
nav .parent span:nth-child(2) {
	background: #000;
	color: #fff;
	-ms-transform: rotateX(0deg);
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	-ms-transform-origin: 50% 50% -15px;
	-webkit-transform-origin: 50% 50% -15px;
	-moz-transform-origin: 50% 50% -15px;
	transform-origin: 50% 50% -15px;
}
nav .parent:hover span:nth-child(1) {
	-ms-transform: rotateX(0deg);
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
}
nav .parent:hover span:nth-child(2) {
	background: #000;
	color:#000;
	-ms-transform: rotateX(-90deg);
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
}
nav li.current .parent span:nth-child(2){
	background:#fff;
	color:#000;
}
#pagination dd{
	display:none;
}
#pagination dd a{
	width: 100%;
	padding:10px 5px;
	margin:1px 0;
	background:rgba(255,255,255,.3);
	color:#000;
}
#pagination dd a span{
	font-size:13px;
}
#pagination dd a:hover{
	background:rgba(255,255,255,1);
}


/****************
Footer
****************/
footer{
	position:relative;
	display:block;
	width:100%;
	padding:15px 0;
	margin:0;
	clear:both;
	text-align:left;
	color:#fff;
	font-weight:100;
	line-height:20px;
	z-index:500;
	background:#000;
}
footer small{
	display:block;
	margin:40px 0 0;
	text-indent:1em;
	font-size:11px;
}
#btn-sns{
	float:right;
	margin:0 10px;
}
#btn-sns li{
	display:inline-block;
	background:#333;
	width:24px;
	font-family: 'FontAwesome';
	text-align:center;
	line-height:24px;
	font-size:18px;
	vertical-align:middle;
}
#btn-footer{
	display:inline-block;
	font-size:10px;
	color:#999;
	font-weight:200;
}
#btn-footer li{
	position:relative;
	display:inline-block;
	padding:0 12px;
}
#btn-footer li:before{
	display:inline-block;
	content:"";
	padding-right:5px;
	border-style:solid;
	border-width:3px 0 3px 4px;
	border-color:transparent transparent transparent #999;
}


/****************
以下要素がMac版Chromeで勝手に生成されて
レイアウト壊れるので消しています。
****************/
#window-resizer-tooltip,
#SF_VISUAL_SEARCH,
#SF_FULL_UI_ARROW,
#SF_DRAGGABLE_1,
#infoBtn,
#SF_CloseButton,
#SF_PLUGIN_CONTENT,
#SF_INFO_TOOLTIP,
#SF_INFO_CLOSE,
#SF_ScreenLayout{
	display:none !important;
}