/* reset ////////////////////////////////////////////////////*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
}
table {
  border-spacing: 0;
}
fieldset, img {
  border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
  font-weight: normal;
  font-style: normal;
}
strong {
  font-weight: bold;
}
ol, ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
caption, th {
  text-align: left;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: 100%;
  margin: 0;
  padding: 0;
}
q:before, q:after {
  content: '';
}
abbr, acronym {
  border: 0;
}
img {
	max-width: 100%;
  height: auto;
  border: none;
  vertical-align: bottom;
}




/* common ////////////////////////////////////////////////////*/
html {
  -webkit-font-smoothing: antialiased;
  width: 100%;
  height: 100%;
}
* {
  box-sizing: border-box;
}
body {
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo UI', 'メイリオ', Verdana, 'ＭＳ Ｐゴシック', sans-serif;
color: #fff;
  color: #fff;
  font-size: 14px;
  line-height: 1.8;
  width: 100%;
  height: 100%;
 *font-size:small;
 *font:x-small;
  -webkit-text-size-adjust: none;
  background-color: #000;
}
.serif {
	font-family: Times, serif;
}
table {
  font-size: inherit;
  font: 100%;
}
.f10 { font-size:77%; }
.f11 { font-size:85%; }
.f12 { font-size:93%; }
.f13 { font-size:100%; }
.f14 { font-size:108%; }
.f15 { font-size:116%; }
.f16 { font-size:123.1%; }
.f17 { font-size:131%; }
.f18 { font-size:138.5%; }
.f19 { font-size:146.5%; }
.f20 { font-size:153.9%; }
.f21 { font-size:161.6%; }
.f22 { font-size:167%; }
.f23 { font-size:174%; }
.f24 { font-size:182%; }
.f25 { font-size:189%; }
.f26 { font-size:197%; }
.mb05 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb50 { margin-bottom: 50px; }
.mb75 { margin-bottom: 75px; }
.mb100 { margin-bottom: 100px; }
a:link, a:visited {
  color: #fff;
}
a:hover {
  color: #fff;
  text-decoration: none;
}
a:active {
  color: #fff;
}
img.over {
  -webkit-transition: opacity .2s ease-out;
  transition: opacity .2s ease-out;
}
img.over:hover {
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
}



/* fadein ////////////////////////////////////////////////////*/
.fadein {
  opacity : 0;
  -webkit-transform : translate3d(0, 0, 0);
  transform : translate3d(0, 0, 0);
  -webkit-transition : all 1000ms ease-out;
  transition : all 1000ms ease-out;
}
.fadein.scrollin {
  opacity : 1;
  -webkit-transform : translate3d(0, 0, 0);
  transform : translate3d(0, 0, 0);
}
.fadein02 {
  opacity : 0;
  -webkit-transform : translate3d(0, 0, 0);
  transform : translate3d(0, 0, 0);
  -webkit-transition : all 1500ms ease-out 400ms;
  transition : all 1500ms ease-out 400ms;
}
.fadein02.scrollin {
  opacity : 1;
  -webkit-transform : translate3d(0, 0, 0);
  transform : translate3d(0, 0, 0);
}
.fadein_y {
  opacity : 0;
  -webkit-transform : translate3d(0, 40px, 0);
  transform : translate3d(0, 40px, 0);
  -webkit-transition : all 500ms ease-out;
  transition : all 500ms ease-out;
}
.fadein_y.scrollin {
  opacity : 1;
  -webkit-transform : translate3d(0, 0, 0);
  transform : translate3d(0, 0, 0);
}
.fadein_y02 {
  opacity : 0;
  -webkit-transform : translate3d(0, 20px, 0);
  transform : translate3d(0, 20px, 0);
  -webkit-transition : all 500ms cubic-bezier(0.075, 0.82, 0.165, 1) 1.5s;
  transition : all 500ms cubic-bezier(0.075, 0.82, 0.165, 1) 1.5s;
}
.fadein_y02.scrollin {
  opacity : 1;
  -webkit-transform : translate3d(0, 0, 0);
  transform : translate3d(0, 0, 0);
}
.fadein_y03 {
  opacity : 0;
  -webkit-transform : translate3d(0, -20px, 0);
  transform : translate3d(0, -20px, 0);
  -webkit-transition : all 500ms cubic-bezier(0.075, 0.82, 0.165, 1) 1.5s;
  transition : all 500ms cubic-bezier(0.075, 0.82, 0.165, 1) 1.5s;
}
.fadein_y03.scrollin {
  opacity : 1;
  -webkit-transform : translate3d(0, 0, 0);
  transform : translate3d(0, 0, 0);
}
.fadein_x {
  opacity : 0;
  -webkit-transform : translate3d(100px, 0, 0);
  transform : translate3d(100px, 0, 0);
  -webkit-transition : all 800ms ease-out;
  transition : all 800ms ease-out;
}
.fadein_x.scrollin {
  opacity : 1;
  -webkit-transform : translate3d(0, 0, 0);
  transform : translate3d(0, 0, 0);
}
.fadein_x02 {
  opacity : 0;
  -webkit-transform : translate3d(-100px, 0, 0);
  transform : translate3d(-100px, 0, 0);
  -webkit-transition : all 800ms ease-out;
  transition : all 800ms ease-out;
}
.fadein_x02.scrollin {
  opacity : 1;
  -webkit-transform : translate3d(0, 0, 0);
  transform : translate3d(0, 0, 0);
}
/*
@media screen and (max-width: 767px) {
	.fadein.scrollin,
	.fadein02.scrollin,
	.fadein_y.scrollin,
	.fadein_y03.scrollin,
	.fadein_x.scrollin,
	.fadein_x02.scrollin {
		opacity : 1;
		-webkit-transform : translate3d(0, 0, 0);
		transform : translate3d(0, 0, 0);
		-webkit-transition: none;
		transition: none;
	}
}
*/



/* Responsive Delete ////////////////////////////////////////////////////*/
.sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .sp {
    display: inherit;
  }
  .pc {
    display: none;
  }
}



/* common parts ////////////////////////////////////////////////////*/
.common_btn {
	position: relative;
	display: inline-block;
	padding: 15px 50px;
	border: 3px solid #959595;
	font-size: 14px;
	font-weight: bold;
	line-height: 1;
	background-color: transparent;
	border-radius: 30px;
  -webkit-transition: all .6s ease;
  -ms-transition: all .6s ease;
  transition: all .6s ease;
}
.common_btn span {
	position: relative;
	display: inline-block;
	padding-left: 22px;
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo UI', 'メイリオ', Verdana, 'ＭＳ Ｐゴシック', sans-serif;
}
.common_btn span::before {
	content: '';
	position: absolute;
	width: 12px;
	height: 12px;
	top: 50%;
	left: 0;
	margin-top: -6px;
	border-radius: 50%;
	background-color: #fff;
	-webkit-transition: all .6s ease;
  -ms-transition: all .6s ease;
  transition: all .6s ease;
}
.common_btn span::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 5px;
	margin-top: -3px;
	border: 3px solid transparent;
	border-left-color: #000;
	-webkit-transition: all .6s ease;
  -ms-transition: all .6s ease;
  transition: all .6s ease;
}
.common_btn:hover {
	color: #000 !important;
	background-color: #fff !important;
}
.common_btn:hover::before {
	border-left-color: #000;
}
@media screen and (max-width: 767px) {
	.common_btn {
		padding: 15px 10px;
		border: 2px solid #959595;
		font-size: 12px;
	}
	.common_btn span {
		padding-left: 18px;
	}
}
@media screen and (max-width: 320px) {
	.common_btn {
		font-size: 10px;
	}
	.common_btn span {
		padding-left: 15px;
	}
}



/* mainHeader ////////////////////////////////////////////////////*/
.main_header {
  position: absolute;
  top: 0;
	left: 0;
	width: 100%;
  line-height: 1;
  z-index: 9999;
}
.main_header .logo {
	position: absolute;
	top: 50px;
	left: 50px;
}
.main_header .logo img {
	width: 120px;
	height: 39px; 
}
.main_header .logo_presage {
	position: absolute;
	top: 50px;
	right: 50px;
}
.main_header .logo_presage img {
	width: 150px;
	height: 22px; 
}
.main_header .sns {
	display: none;
}
@media screen and (max-width: 767px) {
  .main_header .logo {
		top: 16px;
		left: 16px;
	}
	.main_header .logo img {
		width: 60px;
		height: auto; 
	}
	.main_header .logo_presage {
		top: 16px;
 		/*right: 90px; */
		right: 16px;
	}
	.main_header .logo_presage img {
		width: 75px;
		height: 11px; 
	}
	.main_header .sns {
		position: absolute;
		display: table;
		top: 10px;
		right: 15px;
		width: 62px;
		height: 26px;
		line-height: 1;
		display: none;
	}
	.main_header .sns li {
		width: 50%;
		display: table-cell;
	}
	.main_header .sns li:last-child {
		text-align: right;
	}
	.main_header .sns li img {
		width: 26px;
		height: 26px;
	}
}



/* kv////////////////////////////////////////////////////*/
.kv {
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 0;
  background: #000 url(../img/kv_bg.jpg) center center no-repeat;
	background-size: cover;
}

.kv.fadein {
	-webkit-transition : opacity 1000ms ease-out;
  transition : opacity 1000ms ease-out;
}

@media screen and (min-width: 768px) and (max-width: 1300px) and (orientation: portrait) {
	.kv {
	  position: relative;
	  width: 100%;
	  height: 100vh;
	  padding: 0;
	  background: #000 url(../img/img_top_tb.jpg) center center no-repeat;
		background-size: cover;
	}
}
@media screen and (max-width: 767px) {
	.kv {
		height: auto;
		background: none;
	}
}






/* about////////////////////////////////////////////////////*/
#about {
	padding: 200px 100px;
	background: #000 url(../img/about_bg.jpg) center center no-repeat;
	background-size: cover;
}
#about .outer {
	max-width: 500px;
	margin: auto 0 auto 50%;
	width: 52.5%;
	
}

#about .tit {
  margin-bottom: 50px;
	font-size: 34px;
	line-height: 1.4;
	letter-spacing: 0.05em;
	text-align: center;
}
#about .txt {
	font-size: 16px;
	line-height: 2;
}

#about .tit.matop {
	margin-top: 220px;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	#about {
		padding: 100px 50px;
	}
	
	#about .tit.matop {
		margin-top: 10vw;
	}
	
}
@media screen and (max-width: 767px) {
	#about {
		background: #0c0e14 url(../img/about_bg_sp.jpg) center 100% no-repeat;
		background-size: 100% auto;
		padding: 60px 13vw 60px;
	}
	
	#about .outer {
		max-width: initial;
		max-width: auto;
		margin: auto 0;
		width: 100%;
		padding-bottom: 100vw;
	}
	
	#about .tit {
		margin-bottom: 1.5em;
		font-size: 20px;
		line-height: 1.4;
		text-align: center;
	}
	#about .txt {
		font-size: 12px;
		line-height: 2;
	}
	
	#about .tit.matop {
		margin-top: 60px;
	}
}




/* features////////////////////////////////////////////////////*/
#features {
	position: relative;
	color: #1e1a30;
	background: url(../img/bg_noise.png);
	overflow: hidden;
}

#features .outer {
	background: url(../img/img_features.jpg) no-repeat 50% 0;
	background-size: 1920px auto;
	margin: 150px auto 0;
	width: 100%;
	max-width: 1920px;
	padding-bottom: 150px;
}




#features .inner {
	width: 100%;
	margin: 0 auto;
	font-size: 16px;
	max-width: 1242px;
	font-size: 16px;

}

#features .inner div{
	display:-ms-flexbox;
	display:-webkit-flex;
	display: flex;
		
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
		
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

#features .inner .p1{
	width: 50%;
	height: 487px;
	margin: 0 0 0 auto;
}
#features .inner .p2{
	width: 50%;
	height: 500px;
	margin: 0 auto 0 0;
}
#features .inner .p3{
	width: 50%;
	height: 500px;
	margin: 0 0 0 auto;
}





@media screen and (min-width: 768px) and (max-width: 1230px) {
	#features .outer {
		background: url(../img/img_features_tb.jpg) no-repeat 50% 0;
		background-size: 100% auto;
	}
	
	#features .inner .p1{
		height: 40vw;
		padding-right: 4vw;
	}
	#features .inner .p2{
		height: 39vw;
		padding-left: 4vw;
	}
	#features .inner .p3{
		height: 40vw;
		padding-right: 4vw;
	}
	
}


@media screen and (max-width: 767px) {
	
	#features .outer {
		background: none;
		margin: 50px auto 0;
		padding-bottom: 0;
	}
	#features .inner {
		font-size: 12px;
	}
	#features .inner div{
		display: block;	
	}
	#features .inner .p1{
		background: url(../img/img_features1.jpg) no-repeat 50% 0;
		background-size: 100% auto;
		width: 100%;
		height: auto;
		padding: 80vw 10vw 12vw;
	}
	#features .inner .p2{
		background: url(../img/img_features3.jpg) no-repeat 50% 0;
		background-size: 100% auto;
		width: 100%;
		height: auto;
		padding: 80vw 10vw 12vw;
	}
	#features .inner .p3{
		background: url(../img/img_features2.jpg) no-repeat 50% 0;
		background-size: 100% auto;
		width: 100%;
		height: auto;
		padding: 80vw 10vw 12vw;
	}
}


/* movie////////////////////////////////////////////////////*/
.movie {
}
.movie .outer {
  position: relative;
	margin: auto;
}
.movie .outer::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.movie .inner {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.movie .movie_area {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #000 url(../img/video_thumbnail.jpg);
	background-size: cover;
	text-align: center;
	cursor: pointer;
}
.movie .movie_area .overlay_btn {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-transition: all .6s ease;
  -ms-transition: all .6s ease;
  transition: all .6s ease;
}
.movie .movie_area:hover .overlay_btn {
	-webkit-opacity: .6;
	opacity: .6;
}
.movie .overlay_btn img {
	width: 75px;
}
@media screen and (max-width: 1024px) {
	.movie {
		padding: 0;
	}
}
@media screen and (max-width: 767px) {
	.movie {
		padding: 0;

	}
	.movie .overlay_btn img {
    width: 27px;
	}
}



/* design ////////////////////////////////////////////////////*/

#design {
	background: url(../img/design_bg.jpg) no-repeat;
	background-size: cover;
}

#design .inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 180px 0 0;
	
	display:-ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
}

#design .inner2 {
	max-width: 700px;
	margin: 0 auto;
	padding: 0 0 180px;	
}

#design .inner div{
	width: 50%;
}

#design .photo_area {
	text-align: center;
	
	display:-ms-flexbox;
	display:-webkit-flex;
	display: flex;
		
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
		
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

#design .inner h2{
	font-size: 24px;
	text-align: center;
	position: relative;
	padding-bottom: 2em;
	margin-bottom: 1.4em;
}

#design .inner h2:after {
	content: '';
	border-bottom: 1px solid #fff;
	width: 50px;
	position: absolute;
	left: 0;
	right: 0;
	top: 80px;
	margin: auto;
}

#design .tit{
	font-size: 34px;
	font-weight: normal;
	text-align: center;
	margin-bottom: 1.5em;
	letter-spacing: 0.05em;
}


#design .txt {
	font-size: 16px;
	line-height: 2;
}

#design .tit.matop {
	margin-top: 150px;
}



@media screen and (min-width: 768px) and (max-width: 1024px) {
	
	#design .inner {
		padding: 100px 0 0;
	}
	
	#design .inner2 {
		padding: 0 0 100px;
	}
	
	#design .photo_area {
		padding: 0 8vw;
	}
	#design .txt_area {
		padding-right: 5vw;
	}
	
	#design .txt {
		font-size: 16px;
		line-height: 1.6;
	}
	
	#design .tit.matop {
		margin-top: 10vw;
	}
}

@media screen and (max-width: 767px) {
	
	#design {
		background: url(../img/design_bg_sp.jpg) no-repeat;
		background-size: cover;
	}

	#design .inner{
		display: block;
		padding: 40px 13vw 0;
	}
	#design .inner2 {
		display: block;
		padding: 0 13vw 40px;
	}
	
	#design .inner h2{
		font-size: 12px;
	}

	#design .inner h2:after {
		width: 25px;
		top: 40px;
	}

	#design .tit{
		font-size: 20px;
	}

	
	#design .inner div {
		width: 100%;
	}
	
	#design .inner div.photo_area {
		width: 45%;
		margin: 0 auto 40px;
	}
	
	#design .txt {
		font-size: 12px;
		line-height: 2;
	}
	
	#design .tit.matop {
		margin-top: 50px;
	}

}


/* lineup////////////////////////////////////////////////////*/
#lineup {
	width: 100%;
	padding: 85px 20px 120px;
	line-height: 1;
	background: #010613;
	color: #fff;
}

#lineup .tit {
  margin-bottom: 60px;
	text-align: center;
	font-size: 34px;
	line-height: 1;
}
#lineup .tit img {
  width: 190px;
	height: 54px;
}
#lineup .lead {
  margin-bottom: 55px;
	font-size: 28px;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-align: center;
}
#lineup .inner {
	margin: auto;
	-js-display: flex;
	display: -webkit-flex;
  display: flex;
	-webkit-flex-wrap: wrap;
  flex-wrap: wrap;
	-webkit-align-items: center;
  align-items: center;

	max-width: 680px;
	-webkit-justify-content: space-around;
  justify-content: space-around;
}
#lineup .inner li {
	padding: 0 15px 100px;
	text-align: center;
}
#lineup .img {
	width: 55%;
	text-align: right;
}
#lineup .img {
	position: relative;
	width: auto;
	margin-bottom: 20px;
	text-align: center;
}
#lineup .txt {
	width: 45%;
	text-align: center;
}
#lineup .number {
	margin-bottom: 0.5em;
	font-size: 24px;
}
#lineup .price {
	margin-bottom: 55px;
	font-size: 20px;
}

#lineup .price {
	margin-bottom: 20px;
	text-align: center;
}
#lineup .limited {
	font-size: 16px;
	margin-bottom: 2em;
	text-align: center;
}
#lineup .btn {
	text-align: center;
}
#lineup .common_btn {
	background-color: #191429;
}
@media screen and (max-width: 1024px) {
	#lineup .tit {
    	margin-bottom: 60px;
	}
	#lineup .tit img {
		width: 170px;
	}
	#lineup .lead {
    margin-bottom: 50px;
    font-size: 28px;
	}
}
@media screen and (max-width: 767px) {

	#lineup {
		padding-top: 60px;
		padding-bottom: 20px;
	}
	#lineup .inner li {
		width: 50%;
		padding: 0 10px 40px 0;
	}
	#lineup .inner li:nth-child(2n) {
		padding: 0 0 40px 10px;
	}
	#lineup .tit {
		width: 105px;
		margin: 0 auto 35px;
		font-size: 30px;
	}
	#lineup .tit img {
    width: 105px;
    height: 30px;
	}
	#lineup .lead {
		margin-bottom: 40px;
		font-size: 21px;
	}
	#lineup.white_enamel .img {
    margin-bottom: 15px;
	}
	#lineup .txt {
    padding-bottom: 10%;
	}
	#lineup .number {
    font-size: 22px;
	}
	#lineup .price {
		margin-bottom: 20px;
    font-size: 15px;
	}
	#lineup.white_enamel .price {
    margin-bottom: 15px;
	}
}
@media screen and (max-width: 320px) {
	#lineup .lead span {
		display: block;
		margin-top: 0.25em;
	}
}



/* mainFooter////////////////////////////////////////////////////*/
.main_footer {
	width: 100%;
  margin: 0 auto;
  line-height: 1;
  background-color: #f1f1f1;
}
.main_footer .sns {
	width: 100%;
	padding: 20px 50px;
	background-color: #636363;
	text-align: center;
}
.main_footer .list {
	display: inline-block;
	overflow: hidden;
}
.main_footer .list li {
	float: left;
	padding: 0 7px;
}
.main_footer .list li a img {
	width: 40px;
	height: 40px;
	-webkit-transition: opacity .6s ease;
  transition: opacity .6s ease;
}
.main_footer .list li a:hover img {
  -moz-opacity: 0.6;
  opacity: 0.6;
}
.main_footer .inner {
	width: 100%;
	height: 60px;
	padding: 0 50px;
	-js-display: flex;
	display: -webkit-flex;
  display: flex;
	-webkit-flex-wrap: wrap;
  flex-wrap: wrap;
	-webkit-align-items: center;
  align-items: center;
	-webkit-justify-content: space-between;
  justify-content: space-between;
}
.main_footer .logo img {
  width: 100px;
	height: auto;
}
.main_footer .copyright {
  font-size: 12px;
	font-family: Arial, Helvetica," sans-serif";
	color: #000;
}
.main_footer .logo_presage img {
  width: 115px;
	height: 17px;
}

.main_footer .find_a_store {
	display: block;
	background: #fff;
	color: #636363;
	font-size: 14px;
	font-weight: bold;
	height: 40px;
	-webkit-border-radius: 20px;	
	-ms-border-radius: 20px;	
	border-radius: 20px;	
	padding: 1em 30px;
	margin-left: 2em;
	
	-webkit-transition: all .6s ease;
  -ms-transition: all .6s ease;
  transition: all .6s ease;
}
.main_footer .find_a_store:hover {
	background: #ddd;	
}


@media screen and (max-width: 767px) {
	.main_footer .sns {
    padding: 10px;
	}
	.main_footer .list li a img {
		width: 20px;
		height: 20px;
	}
	.main_footer .inner {
		height: auto;
		padding: 0 10px;
		font-size: 10px;
	}
	.main_footer .logo img {
		width: 50px;
		height: auto;
	}
	.main_footer .copyright {
		padding: 15px 0;
		font-size: 10px;
	}
	.main_footer .logo_presage img {
		width: 55px;
		height: 8px;
	}
	
	.main_footer .find_a_store {
		height: 20px;
		font-size: 12px;
		-webkit-border-radius: 10px;	
		-ms-border-radius: 10px;	
		border-radius: 10px;	
		padding: 5px 20px;
		margin-left: 1em;
	}
}