@charset"utf-8";


@media screen and (min-width:641px) { 
	.for_sp{ display:none !important;}
}
@media screen and (max-width:640px) { 
	.for_pc{ display:none !important;}
	#pankuzu{ display:none !important;}
}

iframe[name="google_conversion_frame"] { position:absolute; }

/*-----------------------*/
.cf:before,
.cf:after {
    content: "";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

/* reset_css----------------------------*/


h1,h2,h3,h4,h5{ margin:0; padding:0; font-weight:normal; font-size:100%;}
p{ margin:0; padding:0;}
img{ border:0px;}
ul,ol,li{list-style-type: none; margin:0; padding:0;}






/* ========================= */
/*   for_pc                                  */
/* ========================= */
@media screen and (min-width:641px) {

body {
	background:#000;
	margin: 0;
	padding: 0;
	color: #FFF;

	font-size: 100%;
	line-height: 150%;
	text-align: left;
}
	
/* -------------------------- */

#page_wrap{
	width:100%; 
	margin:0 auto; padding:0 0 0;
	min-width: 1080px;
}

#contents_wrap{
	
	margin:0 0 0 ; padding:0 0 0;
	}	
	#contents{
		margin:0 auto;
	}
	
	
#contents_wrap img{ line-height:1px;}
#contents_wrap sup{ font-size:70%;}
#contents_wrap sup.reg{ font-size:70%; vertical-align:top;}
	



/*----  header  ----*/
.header_wrap{
	margin:0 auto;
	width:100%;
	position: fixed; top: 0; left: 0;
	z-index: 2;
}
	
#header {
	margin:0 auto;
	padding:0 0 0;
	width:100%;
	background: rgba(0,0,0,0.8);
	line-height: 1px;
		
}

/* POPUPページ head
----------------------------------------------------- */
#my_pop_header{ width:76%;  margin:0 auto; padding: 0 0 0;}
#my_pop_header:after {content: ""; clear: both; height: 0; display: block; visibility: hidden; }
#my_logo_store { padding: 10px 0 0; width:426px; float:left; }
#my_logo_letsnote{ width:190px; float:right; text-align:right; }
	
#my_logo_univcoop{ padding: 0; width:120px; float:right; text-align:right; border-radius: 0px 0px 3px 3px; overflow: hidden; line-height: 1px;}
	
#my_pop_header img{ width:100%; }


/* パンくず表示設定 (静的用)
====================================== */
DIV#pankuzu { width:76%; margin:0 auto; clear: both; font-size: 12px; line-height:1.25;  padding : 10px 0 0; }
DIV#pankuzu_list { margin: 0px; padding : 0px; color: #aaa; }
DIV#pankuzu_list strong { font-weight:normal; padding-right: 3px; padding-left: 2px; display:inline; }
DIV#pankuzu_list a:link, DIV#pankuzu_list a:visited { color: #aaa; margin: 0px; padding-right: 3px; padding-left: 2px; display:inline-block; }
DIV#pankuzu_list a:link:hover, DIV#pankuzu_list a:visited:hover { color: #fff; }
DIV#pankuzu_list a:link img, DIV#pankuzu_list a:visited img { border: 0 none; margin: 0; padding: 0; vertical-align:-0.1em; }
		

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


a{ color:#FFF; text-decoration:none; }
a:hover{ color:#FFF; }
a:visited{ color:#FFF; }

sup{ vertical-align: super;}


/*  EFFECT = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =  */

	.stack_wrap{
		overflow: hidden;
		}

	.hide, .fade{
		/*visibility:hidden !important;*/
		}
	.active{
		position: relative;
		visibility:visible !important;
		}
	
	#bg_video.active{ animation: fade_in 1s linear 1; }
	#logo_15th.active{ animation: fade_in 1s linear 1; }
	#main_head.active{ animation: fade_in_left 1s ease-out 1; }
	#main_subcopy.active{ animation: fade_in_left 1s ease-out 1; }
	#area_anchor.active{ animation: fade_in 1s ease-out 1; }
	
	
	.active.normal{animation: fade_in 1s linear 1;}
	.active.in_left{animation: fade_in_left 1s ease-out 1;}
	.active.in_right{animation: fade_in_right 1s ease-out 1;}
	.active.in_top{animation: fade_in_top 1s ease-out 1;}
	
	.active.in_left_s{animation: fade_in_left 1s ease-out 1;}
	.active.in_right_s{animation: fade_in_right 1s ease-out 1;}
	
	

	
/* Loading -------------------------- */
	
	#loading{
		position: fixed;
		width: 100%;
		height: 100%;
		
		background:rgba(0,0,0,0.9);
		z-index: 9999;
		}
	
	#loading > .loading_icon{
		width: 150px;
		 position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		
			animation: flashing 2s linear infinite;
		}

	
	
	
	
/* contents -------------------------- */
	
	#contents{
		position: relative;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
		}
		#contents .fnt_sans{
			font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
			}

		#contents img{
			width: 100%;
		}
	
	#contents.off{ height:100vh; overflow: hidden;}

	
	
	
	/* ------------------- */
	
	#area_main_wrap{ position: relative; width: 100%; height: 100vh; }
	#area_main{
			width: 100%;
			height: 100vh;
		
			position: fixed;
			z-index: 1;
			}

			#bg_video{
				  position: absolute;
				  top: 50%;
				  left: 50%;
				  transform: translate(-50%, -50%);
				  min-width: 100%;
				
				  min-height: 100%;
				  z-index: -100;
				
					background: url(../img/main_mov_snap.jpg);
					background-size: 100% 100%;

				}

			#area_main > .vd_overlay{
				position: absolute; top:0; left:50%; transform: translate(-50%, 0);
				width: 76%; height: 100%;

				}

				#main_text{
					width: 100%;
					position: absolute; bottom: 10%; left: 0;
					}
					#logo_15th{
						margin: 0 0 20px;
						width: 120px;
						}
					#main_head{
						margin: 0 0 10px;
						width: 380px;
						}
					#main_subcopy{
						}

					.main_clmbox{
						margin: 0 0 10px;
						display: inline-block;
						vertical-align: top;
						}
						.main_clmbox .main_lead{
							margin: 0 0 5px;
							font-size: 24px; font-weight: normal; line-height: 150%;
							}

						.main_clmbox .main_copy{
							margin: 0 0 10px;
							font-size: 14px; font-weight: normal; line-height: 150%;
							width: 100%;
							color: #FFF;
							
							}
						.main_clmbox .icon_limited{
							margin: 5px 0 0px;
							width: 120px;
							}
	
	
	/* アンカー ------------------- */

	ul#area_anchor{
		position: absolute; top:100px; right:12%;
		z-index: 999;
		text-align: right;
		
		}
		ul#area_anchor li{
			position: relative;
			font-size: 16px; font-weight: normal; line-height: 150%;
			text-align: right;
			margin: 0 0 6px;

			}
	
			ul#area_anchor li.anc:before{
				content: url(../img/arrow_d.png);
				margin-right: 8px;
				
				}
	
			ul#area_anchor li.anc_order{
				position: relative;
				background: #FF7600;
				color: #FFF;
				font-size: 15px; line-height: 120%;
				display: inline-block;
				padding: 5px 8px 5px 30px;
				margin: 8px 0 6px;
				border-radius: 2px;

				}
	
			ul#area_anchor li.anc_order:before{
				content: "";
				background: url(../img/icon_cart.png);
				background-size: contain;
				width: 18px; height: 18px;
				position: absolute; left: 6px; top:50%; margin-top: -9px;

				}

			ul#area_anchor li:hover{
				top: -1px;
				}

	.anchor.adjust{ position: relative; top:70px;}
	.anchor.adjust2{ position: relative; top:-40px;}
	
	
	/* 追従アンカー ------------------- */
	
	ul#navi_anchor{
		position: fixed; top:-60px; opacity: 1;
		width: 100%;
		padding:  0;
		z-index: 9999;
		text-align: center;
		
		box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.5);
		
		background:rgba(34,54,72,0.7);
		letter-spacing: -0.4em;
		/* transition*/  -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s;
		}	
		ul#navi_anchor li{
			letter-spacing: normal;
			display: inline-block;
			font-size: 15px; font-weight: normal; line-height: 150%;
			padding: 6px 3em;
			text-shadow: 0px 0px 4px #ddd;
			position: relative;
			}
			ul#navi_anchor li a{  color: #CED9E1; /* transition*/  -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;}
			ul#navi_anchor li:hover a{ color:#fff!important;}

			ul#navi_anchor li.order a{  }
	
	ul#navi_anchor.on{ top:0; opacity: 1;}
	
		
	


	


	/* ------------------------------------------------------------------------------------------------ */
	#area_bg_cosmos{
		background-image: url(../img/bg_stripe01.png), url(../img/bg_cosmos.jpg);
		background-position: 0 0, 50% 0;
		background-size: auto auto, 100% auto;
		background-attachment: fixed, fixed;
		background-repeat: repeat, no-repeat;
		
		position: relative;
		z-index: 3;
		
		background-color: #000;
	}


	/* ------------------- */
	#contents .area_inner{
		width: 76%;
		margin: 0 auto;
		padding: 120px 0 200px;
		
		}


	/* ------------------- */
		.area_ttl_wrap{
			width: 76%;
			margin: 0 auto 100px;
			position: relative;
			}

			.area_ttl_wrap .area_ttl{
				text-align: center;
				color: #FFF;
				font-size: 26px; font-weight: normal; line-height: 160%; letter-spacing: 0.2em;
				text-shadow: 0px 0px 4px #FFF;
				
				position: relative;
				}
				.area_ttl:after{
					content: "";
					display: block;
					position: absolute; bottom:-0.3em; left:50%;
					transform: translate(-50%,0);
					width: 0px;
					border: none;
					border-bottom: 1px solid #FFF;
					}
					.area_ttl.active:after{
						position: absolute;
						width: 180px;
						transition: all 1s ease-out;	
						}
		
					.area_ttl.blk{ color: #000; text-shadow: 0px 0px 4px #999; }
					.area_ttl.blk:after{ border-bottom: 1px solid #000; }	
					.area_ttl.blk.active:after{width: 240px;}


	/* ------------------- */
	#area_design{
		position: relative;
		
		/* transition -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;*/ 

		}
		

		#area_design .area_head{
			margin: 0 0 140px;
			color: #FFF;
			position: relative;
			text-align: center;
			}
			#area_design .area_head .txtsz_L{ font-size: 50px; font-weight: normal; line-height: 160%; margin: 0 0 0.2em;}
			#area_design .area_head .txtsz_M{ font-size: 32px; font-weight: normal; line-height: 160%; margin: 0 0 0.2em;}
			#area_design .area_head .txtsz_S{ font-size: 18px; font-weight: normal; line-height: 180%; margin: 0 0 0.2em;}
	
			#area_design .area_head .txt_small{ font-size: 20px;}


		#area_design .interview_ttl{
			margin: 0 0 90px;
			color: #DFB743;
			font-size: 24px; font-weight: normal; line-height: 160%; text-align: center;
			
			}
			#area_design .interview_ttl .txtsz_L{ font-size: 30px; font-weight: normal; line-height: 160%; letter-spacing: 0.4em; margin: 0 0 0;}
			#area_design .interview_ttl .txtsz_M{ font-size: 24px; font-weight: normal; line-height: 160%; letter-spacing: 0; margin: 0 0 0;}



		#area_design .design_head{
			margin: 0 0 100px; padding: 0.5em 0;
			color: #DFB743;
			font-size: 28px; font-weight: normal; line-height: 160%; text-align: center;
			
			background-image: url(../img/line01.png), url(../img/line01.png);
			background-position: center top, center bottom;
			background-size: 100% 2px, 100% 2px;
			background-repeat: no-repeat, no-repeat;
			}



		#area_design .box_wrap{
			margin: 0 0 100px;
			
					

			}
			.box_wrap:before,.box_wrap:after {content: "";display: table;}
			.box_wrap:after {clear: both;}
			.box_wrap {*zoom: 1;}

			.box_wrap .box_L{
				width: 46%;
				margin: 0 0 10px;
				float: left;
				
				}
			.box_wrap .box_R{
				width: 46%;
				margin: 0 0 10px;
				float: right;	
				
				}



			/* ------------------- */
			#area_design .txt_lead{
				margin: 0 0 0.6em;
				font-size: 28px; line-height: 160%;
				}
			#area_design .txt_body{
				margin: 0 0 1.4em;
				font-size: 16px; line-height: 180%;
				}
			#area_design .txt_caption{
				margin: 0 0 0.6em;
				font-size: 13px; line-height: 160%;
				}

			#area_design .txt_prof{
				color: #DFB743;
				margin: 0 0 0.6em;
				font-size: 15px; line-height: 160%;
				}

			#area_design .img{
				margin: 0 0 0.6em;
				}


			#area_design .txt_notes{
				margin: 0 0 0.6em;
				font-size: 14px; line-height: 160%; text-align: center;
				color: #999;
				}




	/* ------------------- */
	#area_spec{
		
			}
			#area_spec .area_inner{
				width: 100%;
				padding: 100px 0 0px;
				}

		#area_spec .spec_wrap{
				min-height: 400px;
				margin: 0 0 0px;
			
				background-position: 50% 50%;
				background-size: cover;
				background-repeat: no-repeat;
				}
				#area_spec .spec_wrap.spec01{ background-image: url(../img/spec_bg01.jpg);}
				#area_spec .spec_wrap.spec02{ background-image: url(../img/spec_bg02.jpg);}
				#area_spec .spec_wrap.spec03{ background-image: url(../img/spec_bg03.jpg);}

		#area_spec .spec_wrap:before,#area_spec .spec_wrap:after {content: "";display: table;}
		#area_spec .spec_wrap:after {clear: both;}
		#area_spec .spec_wrap {*zoom: 1;}


		#area_spec .spec_text{
				position: relative;
				width: 26%; min-height: 300px;
				background:rgba(0,58,126,0.9);
				}
				#area_spec .spec_text.spec_L{ float: left; padding: 50px 3% 50px 12%;}
				#area_spec .spec_text.spec_R{ float: right; padding: 50px 12% 50px 3%;}

			#area_spec .spec_text_inner{
					height: 300px;
					display: table-cell;
					vertical-align: middle;
					}
					/* ------------------- */
					#area_spec .txt_lead{
						margin: 0 0 1em;
						font-size: 18px; line-height: 160%; text-align: center;
						}				
					#area_spec .txt_head{
						margin: 0 0 0.6em;
						font-size: 36px; line-height: 140%; text-align: center;
						}	
					#area_spec .txt_body{
						margin: 0 0 0.6em;
						font-size: 16px; line-height: 180%;
						}	


	/* ------------------- */
	#area_quality{
			background-color: #E0E2E4;
		
			background-image: url(../img/bg_stripe02.png), url(../img/bg_shiny.jpg);
			background-position: 0 0, 50% 0;
			background-size: auto auto, 100% auto;
			background-attachment: fixed, fixed;
			background-repeat: repeat, no-repeat;		

		
			}
			#area_quality .area_inner{
				width: 76%;
				padding: 150px 0 100px;
				}



				#area_quality .quality_block{
					margin: 0 auto 150px;
					}

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

					#area_quality .quality_text{
						width: 80%;
						margin: 0 auto 40px;
						}
						#area_quality .txt_lead{
							color: #DFB743;
							margin: 0 0 0.4em;
							font-size: 26px; line-height: 160%; text-align: center;
							}				
						#area_quality .txt_head{
							color: #DFB743;
							margin: 0 0 0.6em;
							font-size: 46px; line-height: 140%; text-align: center;
							}	
						#area_quality .txt_body{
							color: #000;
							margin: 0 0 0.6em;
							font-size: 16px; line-height: 180%;
							}

					#area_quality .txt_notes{
						margin: 0 0 0.6em;
						font-size: 14px; line-height: 160%; text-align: center;
						color: #999;
						}
	
						#area_quality .txt_notes.blk{color: #000;}	


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

					#area_quality .quality_img{
						width: 140%;
						margin: 0 0 40px -20%;
						text-align: center;
						letter-spacing: -0.4em;
						}
						#area_quality .quality_img a{
							display: inline-block;
							width: 300px;
							letter-spacing: normal;
							margin: 0 20px;
							
							position: relative;
							}

						#area_quality .quality_img a.imgsz_M{width: 260px;}
						#area_quality .quality_img a.imgsz_L{width: 420px;}
	
					#area_quality a{
						/* transition */ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;	
					}
					#area_quality a:hover{
						opacity: 0.7;
						}



	/* ------------------- */
	#area_order{
		text-align: center;
		background:#FFF url(../img/bg_gradation.png) left bottom repeat-x;
		}

		#area_order .order_head{
			background: #003B83;
			color: #FFF;
			font-size: 28px; line-height: 160%; text-align: center;
			padding: 1em 0;
			margin: 0 auto 40px;
			}

		#area_order .order_img{
			width: 800px;
			margin: 0 auto 0px;
			}

		#area_order .order_text{
			min-height: 200px;
			
			font-size: 16px; line-height: 160%; text-align: left;
			color: #000;
			display: inline-block;
			}
			#area_order .order_text .txt_model{ font-size: 28px; line-height: 160%; text-align: left; }
			#area_order .order_text .txt_price{ font-size: 18px; line-height: 160%; text-align: left; }

			#area_order .order_text .order_btn{
				position: relative;
				background: #FF7600;
				color: #FFF;
				font-size: 22px; line-height: 120%; text-align: left;
				display: inline-block;
				padding: 0.5em 30px 0.5em 30px;
				margin: 10px auto 50px;
				/* box-shadow */
				box-shadow:0px 1px 6px 0px rgba(0,0,0,0.4);
				-moz-box-shadow:0px 1px 6px 0px rgba(0,0,0,0.4);
				-webkit-box-shadow:0px 1px 6px 0px rgba(0,0,0,0.4);	
				
				/* transition */ -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;	
				}
				#area_order .order_text .order_btn_gray{
				position: relative;
				background: #999;
				color: #FFF;
				font-size: 28px; line-height: 120%; text-align: left;
				display: inline-block;
				padding: 0.5em 100px 0.5em 100px;
				margin: 10px auto;
				/* box-shadow */
				box-shadow:0px 1px 6px 0px rgba(0,0,0,0.4);
				-moz-box-shadow:0px 1px 6px 0px rgba(0,0,0,0.4);
				-webkit-box-shadow:0px 1px 6px 0px rgba(0,0,0,0.4);	
				
				/* transition */ -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;	
				}
	
				/*#area_order .order_text .order_btn:before{
					content: "";
					background: url(../img/icon_cart.png);
					background-size: contain;
					width: 30px; height: 30px;
					position: absolute; left: 20px; top:50%; margin-top: -15px;

					}*/
	#area_order .order_text .soldout-area {
		position: relative;
	}
	#area_order .order_text .soldout-area img {
		position: absolute;
		z-index: 1;
    width: 65%;
    margin-left: 35px;
    top: -12px;
	}
				#area_order .order_text .order_btn:hover{
					top: -1px;
					/* box-shadow */
					box-shadow:0px 2px 12px 0px rgba(0,0,0,0.5);
					-moz-box-shadow:0px 2px 12px 0px rgba(0,0,0,0.5);
					-webkit-box-shadow:0px 2px 12px 0px rgba(0,0,0,0.5);	
					}
	


	/* ------------------- */
	#area_spec_table{
		background: #001227;
		padding: 100px 0;

		
		}
	.spec_table{
		width: 76%;
		margin: 0 auto 20px;
		
		border-collapse: collapse;
		border:none;
		border-top: 1px solid #B1BBC8; 
		
		font-size: 14px; line-height: 160%; text-align: left;
		color: #B1BBC8;
		}

		.spec_table td, .spec_table th{
				border:none;
				border-bottom: 1px solid #B1BBC8;
				font-weight: normal;
			padding: 1em 1em;
			
				}
		.spec_table th{
				background: #243345;
				}

	.spec_table_notes{
		margin: 0 12%;
		padding-left: 1.5em;
		font-size: 85%; line-height: 160%; text-align: left;
		color: #B1BBC8;
		}
		.spec_table_notes li{
			text-indent: -1.5em;
			}
	
	.spec_table .txtc_red{color:#E69597;}

	.spec_table img{ width: auto!important; vertical-align: middle;}



			
	/* footer-------------------------- */
	#footer {
		padding: 15px 0 40px !important;
		font-size: 87.5% !important;
		background: #000;
		font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
		
		}
	.inner {
		width: 76%;
		margin: 0 auto;
		overflow: hidden;
		zoom: 1;
		color: #FFF;
		}
	#copyright {
		float: left;
		}
	.inner a:link,
	.inner a:visited{
		color: #FFF;
		text-decoration:underline;
		}
	.pagetop {
		float: right;
		}



/* ページトップへもどる(ページ最後) 
----------------------------------------------------- */
div.my_pagetop_end {
	padding:30px 0 0;
}

div.my_pagetop_end:after {content: ""; clear: both; height: 0; display: block; visibility: hidden; }

div.my_pagetop_end p {
	float:right; 
	font-size:75%; 
	line-height:110%; 
}
#my_popup_area div.my_pagetop_end p {
	font-size:65%; 
}

div.my_pagetop_end p a {
	background-image:url(../img/icn_pagetop.gif); 
	background-repeat:no-repeat; 
	background-position:0px 3px; 
	padding:0 0 0 13px; 
	
	
}


 }/* end  for_pc*/	

















/* ========================= */
/*   for_sp                                  */
/* ========================= */
@media screen and (max-width:640px) { 


img{width: 100%;}


body {
	background:#000;
	margin: 0;
	padding: 0;
	color: #FFF;

	font-size: 100%;
	line-height: 150%;
	text-align: left;
}
	
/* -------------------------- */

#page_wrap{
	width:100%;
	margin:0 auto; padding:0 0 0;
}

#contents_wrap{
	
	margin:0 0 0 ; padding:0 0 0;
	}	
	#contents{
		margin:0 auto;
	}
	
	
#contents_wrap img{ line-height:1px;}
#contents_wrap sup{ font-size:70%;}
#contents_wrap sup.reg{ font-size:70%; vertical-align:top;}
	



/*----  header  ----*/
#header {
	margin:0 auto;
	padding: 10px 0 0;
	width:100%;
	background: rgba(0,0,0,1);
	position: relative;
		
}

/* POPUPページ head
----------------------------------------------------- */
#my_pop_header{ width:90%; margin:0 auto; }
#my_pop_header:after {content: ""; clear: both; height: 0; display: block; visibility: hidden; }
#my_logo_store { width:100%; float:left; line-height: 1px; margin-bottom: -10px; }
#my_logo_letsnote{ width:50%; float:right; text-align:right; margin-top: 0; }
	
#my_logo_univcoop{ padding: 0 0 0; width:26%; float:right; text-align:right; border-radius: 3px; overflow: hidden; line-height: 1px;}
	
#my_pop_header img{ width:100%; }

DIV#pankuzu { display: none; }

	

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


a{ color:#FFF; text-decoration:none; }
a:hover{ color:#FFF; }
a:visited{ color:#FFF; }

sup{ vertical-align: super;}


/*  EFFECT = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =  */

	.stack_wrap{
		overflow: hidden;
		}

	.hide{
		
		}
	.fade{
		
		}
	
	.active{
		position: relative;
		visibility:visible !important;
		}
	
	#logo_15th.active{ animation: fade_in 1s linear 1; }
	#main_head.active{ animation: fade_in_left 1s ease-out 1; }
	#main_subcopy.active{ animation: fade_in_left 1s ease-out 1; }
	
	.active.normal{animation: fade_in_top 0.5s ease-out 1;}
	.active.in_left{animation: fade_in_top 0.5s ease-out 1;}
	.active.in_right{animation: fade_in_top 0.5s ease-out 1;}
	.active.in_top{animation: fade_in_top 0.5s ease-out 1;}
	
	.active.in_left_s{ animation: fade_in_left 1s ease-out 1;}
	.active.in_right_s{ animation: fade_in_right 1s ease-out 1;}
	

	
/* Loading -------------------------- */
	
	#loading{
		position: fixed;
		width: 100%;
		height: 100%;
		
		background:rgba(0,0,0,0.9);
		z-index: 9999;
		}
	
	#loading > .loading_icon{
		width: 140px;
		 position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		
			animation: flashing 2s linear infinite;
		}

	

	
	
	
	
/* contents -------------------------- */
	
	#contents{
		position: relative;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;

		}
		#contents .fnt_sans{
			font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
			}

		#contents img{
			width: 100%;
		}
	
	#contents.off{ }
	
	
	/* ------------------- */

	#area_main{
			position: relative;
		z-index: -1000;
			}

			#bg_video{
				width: 150%;
				margin-left: -20%;
				  z-index: -100;
				
				background: #333;
				position: relative;
				
					background: url(../img/main_mov_snap.jpg);
					background-size: 100% 100%;				
				
				}

			#area_main > .vd_overlay{
				
				width: 90%; height: 100%;
				margin: 0 auto;
				padding: 0 0 2em;
				}

				#main_text{
					width: 100%;
					}
					#logo_15th{
						margin: -80px 0 20px;
						width: 30%;
						
						}
					#main_head{
						margin: 0 0 10px;
						width: 90%;
						}
					#main_subcopy{
						letter-spacing: -0.4em;
						position: relative;
						}

					.main_clmbox{
						letter-spacing: normal;
						margin: 0 0 0.5em;
						display: inline-block;
						vertical-align: top;
						
						}
						.main_clmbox .main_lead{
							margin: 0 0 0.5em;
							font-size: 130%; font-weight: normal; line-height: 150%;
							}

						.main_clmbox .main_copy{
							margin: 0 0 0.5em;
							font-size: 90%; font-weight: normal; line-height: 150%;
							width: 64%;
							color: #FFF;
							
							}
						.main_clmbox .icon_limited{
							position: absolute; bottom:0; right:0;
							margin: 0 0 0px;
							width: 32%;
							}

	
	/* アンカー------------------- */

	ul#area_anchor{
		z-index: 999;
		text-align: center;
		letter-spacing: -0.4em;
		padding: 20px 0 0;
		}
		ul#area_anchor li{
			letter-spacing:normal;
			display: inline-block;
			position: relative;
			font-size: 13px; font-weight: normal; line-height: 150%;
			color: #FFF;
			margin: 0 0 0;
			padding: 0 10px;
			
			border-right: 1px solid #666;
			}
			ul#area_anchor li:first-child{ border-left: 1px solid #666; }

	
			ul#area_anchor li.anc_order a{
				color: #FF7600!important;

				}
	
	.anchor.adjust{ position: relative; top:1em;}
	.anchor.adjust2{ position: relative; top:-3em;}
	
	

	/* 追従アンカー ------------------- */
	
	ul#navi_anchor{
		position: fixed; top:-60px; opacity: 1;
		width: 100%;
		padding: 6px 0;
		z-index: 9999;
		text-align: center;
		box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.8);
		
		background:rgba(34,54,72,0.7);
		letter-spacing: -0.4em;
		/* transition*/  -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s;
		}	
		ul#navi_anchor li{
			letter-spacing: normal;
			display: inline-block;
			font-size: 13px; font-weight: normal; line-height: 150%;
			padding: 0px 10px;
			text-shadow: 0px 0px 4px #ddd;
			position: relative;
			
			border-right: 1px solid #69798B;
			}
			ul#navi_anchor li:first-child{ border-left: 1px solid #69798B; }
			ul#navi_anchor li a{  color: #CED9E1;}
	
	ul#navi_anchor.on{ top:0; opacity: 1;}
	
	
	
	

	/* ------------------------------------------------------------------------------------------------ */
	#area_bg_cosmos{
		background-image: url(../img/bg_stripe01.png), url(../img/bg_cosmos.jpg);
		background-position: 0 0, 0 0;
		background-size: auto auto, contain;
		background-repeat: repeat, no-repeat;
		
		position: relative;	
		
		background-color: #000;
	}


	/* ------------------- */
	#contents .area_inner{
		width: 90%;
		margin: 0 auto;
		padding: 2em 0 4em;
		
		}



		/* ------------------- */
		.area_ttl_wrap{
			width: 90%;
			margin: 0 auto 4em;
			position: relative;
			}

			.area_ttl_wrap .area_ttl{
				text-align: center;
				color: #FFF;
				font-size: 150%; font-weight: normal; line-height: 160%; letter-spacing: 0.2em;
				text-shadow: 0px 0px 4px #FFF;
				
				position: relative;
				}
				.area_ttl:after{
					content: "";
					display: block;
					position: absolute; bottom:-0.1em; left:50%;
					transform: translate(-50%,0);
					width: 0%;
					border: none;
					border-bottom: 1px solid #FFF;
					}
					.area_ttl.active:after{
						position: absolute;
						width: 50%;
						transition: all 0.6s ease-out;	
						}
		
					.area_ttl.blk{ color: #000; text-shadow: 0px 0px 4px #999; }
					.area_ttl.blk:after{ border-bottom: 1px solid #000; }	
					.area_ttl.blk.active:after{width: 60%;}




	/* ------------------- */
	#area_design{
		position: relative;
		
		/* transition -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;*/ 

		}
		

		#area_design .area_head{
			margin: 0 0 5em;
			color: #FFF;
			position: relative;
			text-align: center;
			}
			#area_design .area_head .txtsz_L{ font-size: 210%; font-weight: normal; line-height: 100%; margin: 0 0 0.8em;}
			#area_design .area_head .txtsz_M{ font-size: 100%; font-weight: normal; line-height: 160%; margin: 0 0 1.4em;}
			#area_design .area_head .txtsz_S{ font-size: 90%; font-weight: normal; line-height: 180%; margin: 0 0 0.2em; text-align: left;}
	
			#area_design .area_head .txt_small{ font-size: 50%; line-height: 100%;}


		#area_design .interview_ttl{
			margin: 0 0 2.5em;
			color: #DFB743;
			font-size: 100%; font-weight: normal; line-height: 160%; text-align: center;
			
			}
			#area_design .interview_ttl .txtsz_L{ font-size: 130%; font-weight: normal; line-height: 160%; margin: 0 0 0;}
			#area_design .interview_ttl .txtsz_M{ font-size: 90%; font-weight: normal; line-height: 160%; margin: 0 0 0;}



		#area_design .design_head{
			margin: 0 0 2em; padding: 0.5em 0;
			color: #DFB743;
			font-size: 100%; font-weight: normal; line-height: 160%; text-align: center;
			
			background-image: url(../img/line01.png), url(../img/line01.png);
			background-position: center top, center bottom;
			background-size: 100% 1px, 100% 1px;
			background-repeat: no-repeat, no-repeat;
			}



		#area_design .box_wrap{
			margin: 0 0 4em;

			}

			.box_wrap .box_L{
				width: 100%;
				margin: 0 0 1em;
				
				}
			.box_wrap .box_R{
				width: 100%;
				margin: 0 0 1em;
				
				}



			/* ------------------- */
			#area_design .txt_lead{
				margin: 0 0 0.6em;
				font-size: 140%; line-height: 150%;
				}
			#area_design .txt_body{
				margin: 0 0 1.4em;
				font-size: 90%; line-height: 180%;
				}
			#area_design .txt_caption{
				margin: 0 0 0.6em;
				font-size: 13px; line-height: 160%;
				}

			#area_design .txt_prof{
				color: #DFB743;
				margin: 0 0 0.6em;
				font-size: 15px; line-height: 160%;
				}

			#area_design .img{
				margin: 0 0 0.6em;
				}
	
			#area_design .img.sp_img{
				overflow: hidden;
				}
				#area_design .img.sp_img img{
					width: 180%;
					margin-left:-40%;
					}


			#area_design .txt_notes{
				margin: 0 0 0.6em;
				font-size: 85%; line-height: 160%; text-align: left;
				color: #999;
				}




	/* ------------------- */
	#area_spec{
		
			}
			#area_spec .area_inner{
				width: 100%;
				padding: 4em 0 0px;
				}

		#area_spec .spec_wrap{
				margin: 0 0 0px;
			
				background-position: 50% 50%;
				background-size: 100% auto;
				background-repeat: no-repeat;
				}
				#area_spec .spec_wrap.spec01{ }
				#area_spec .spec_wrap.spec02{ }
				#area_spec .spec_wrap.spec03{ }

		#area_spec .spec_wrap:before,#area_spec .spec_wrap:after {content: "";display: table;}
		#area_spec .spec_wrap:after {clear: both;}
		#area_spec .spec_wrap {*zoom: 1;}


		#area_spec .spec_text{
				position: relative;
				width: 100%; 
				background:rgba(0,58,126,0.6);
				padding: 3em 0 0;
				margin: 0 0 0em;
				}
				#area_spec .spec_text.spec_L{ }
				#area_spec .spec_text.spec_R{ }

			#area_spec .spec_text_inner{
					width: 90%; 
					margin: 0 auto 2em;
					}
					/* ------------------- */
					#area_spec .txt_lead{
						margin: 0 0 1em;
						font-size: 90%; line-height: 160%; text-align: center;
						}				
					#area_spec .txt_head{
						margin: 0 0 0.6em;
						font-size: 160%; line-height: 140%; text-align: center;
						}	
					#area_spec .txt_body{
						margin: 0 0 0.6em;
						font-size: 90%; line-height: 180%;
						}	
	
	
	#area_spec .sp_img{
		width: 120%; 
		margin-left: -10%;
		line-height: 1px;
		}


	/* ------------------- */
	#area_quality{
			background-color: #E0E2E4;
		
			background-image: url(../img/bg_stripe02.png), url(../img/bg_shiny.jpg);
			background-position: 0 0, 0 0;
			background-size: auto auto, contain;
			background-repeat: repeat, no-repeat;	
			}
			#area_quality .area_inner{
				width: 90%;
				padding: 4em 0 2em;
				}






				#area_quality .quality_block{
					margin: 0 auto 4em;
					}

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

					#area_quality .quality_text{
						width: 100%;
						margin: 0 auto 1em;
						}
						#area_quality .txt_lead{
							color: #DFB743;
							margin: 0 0 0.4em;
							font-size: 110%; line-height: 160%; text-align: center;
							}				
						#area_quality .txt_head{
							color: #DFB743;
							margin: 0 0 0.6em;
							font-size: 200%; line-height: 140%; text-align: center;
							}	
						#area_quality .txt_body{
							color: #000;
							margin: 0 0 0.6em;
							font-size: 90%; line-height: 180%;
							}

					#area_quality .txt_notes{
						margin: 0 0 0.6em;
						font-size: 85%; line-height: 160%; text-align: left;
						color: #999;
						}	


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

					#area_quality .quality_img{
						width: 100%;
						margin: 0 auto 0;
						text-align: center;
						}
						#area_quality .quality_img a{
							display: block;
							width: 80%;
							letter-spacing: normal;
							margin: 0 auto 1em;
							}

						#area_quality .quality_img a.imgsz_M{width: 75%;}
						#area_quality .quality_img a.imgsz_L{width: 100%;}



	/* ------------------- */
	#area_order{
		text-align: center;
		background:#FFF ;
		}

		#area_order .order_head{
			background: #003B83;
			color: #FFF;
			font-size: 140%; line-height: 160%; text-align: left;
			padding: 1em 1em;
			margin: 0 auto 1em;
			}

		#area_order .order_img{
			width: 80%;
			margin: 0 auto 0px;
			}

		#area_order .order_text{
			width: 100%;
			background:#FFF url(../img/bg_gradation.png) left bottom repeat-x;
			background-size: auto 100%;
			padding: 0 0 2em;
			
			font-size: 100%; line-height: 160%; text-align: center;
			color: #000;
			display: inline-block;
			}
			#area_order .order_text .txt_model{ font-size: 180%; line-height: 160%; text-align: left; }
			#area_order .order_text .txt_price{ font-size: 100%; line-height: 160%; text-align: left; }

			#area_order .order_text .order_btn{
				position: relative;
				background: #FF7600;
				color: #FFF;
				font-size: 105%; line-height: 120%; text-align: left;
				display: inline-block;
				padding: 0.8em 1em 0.8em 1em;
				margin: 0.5em 6% 0;
				/* box-shadow */
				box-shadow:0px 2px 5px 0px rgba(0,0,0,0.4);
				-moz-box-shadow:0px 2px 5px 0px rgba(0,0,0,0.4);
				-webkit-box-shadow:0px 2px 5px 0px rgba(0,0,0,0.4);					
				
				}
	#area_order .order_text .order_btn_gray{
				position: relative;
				background: #999;
				color: #FFF;
				font-size: 140%; line-height: 120%; text-align: left;
				display: inline-block;
				padding: 0.8em 3em 0.8em 3em;
				margin: 0.5em 6% 0;
				/* box-shadow */
				box-shadow:0px 2px 5px 0px rgba(0,0,0,0.4);
				-moz-box-shadow:0px 2px 5px 0px rgba(0,0,0,0.4);
				-webkit-box-shadow:0px 2px 5px 0px rgba(0,0,0,0.4);					
				
				}
				/*#area_order .order_text .order_btn:before{
					content: "";
					background: url(../img/icon_cart.png);
					background-size: contain;
					width: 1em; height: 1em;
					position: absolute; left: 0.5em; top:50%; margin-top: -0.5em;

					}*/
	#area_order .order_text .soldout-area {
		position: relative;
	}
	#area_order .order_text .soldout-area img {
		position: absolute;
		z-index: 1;
    width: 60%;
    top: -10px;
    right: 70px;
	}

	/* ------------------- */
	#area_spec_table{
		background: #001227;
		padding: 4em 0;

		
		}
	.spec_table{
		width: 90%;
		margin: 0 auto 20px;
		
		border-collapse: collapse;
		border:none;
		border-top: 1px solid #B1BBC8; 
		
		font-size: 90%; line-height: 150%; text-align: left;
		color: #B1BBC8;
		}

		.spec_table td, .spec_table th{
				border:none;
				border-bottom: 1px solid #B1BBC8;
				font-weight: normal;
			padding: 1em 0 1em 0.5em;
			
				}
		.spec_table th{
				width: 25%;
				background: #243345;
				}

	.spec_table_notes{
		margin: 0 5%;
		padding-left: 1.5em;
		font-size: 85%; line-height: 160%; text-align: left;
		color: #B1BBC8;
		}
		.spec_table_notes li{
			text-indent: -1.5em;
			}

	.spec_table .txtc_red{color:#E69597;}

	.spec_table img{ width: auto!important; vertical-align: middle;}

			
	/* footer-------------------------- */
	#footer {
		margin: 0 5% 1em;
		padding: 1em 0 0;
		font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
		}
	.inner {
		margin: 0 auto;
		overflow: hidden;
		zoom: 1;
		}
	#copyright {
		font-size: 80%;
		}


/* ページトップへもどる
----------------------------------------------------- */
#goto_pagetop{
	width: 20px;
	position: fixed;
	bottom:-60px; right:10px;
	border-radius: 3px;
	background: rgba(0,0,0,0.7);
	padding: 10px 13px 10px;
	/* transition */ -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-iout; -ms-transition: all 0.6s ease-out; -o-transition: all 0.6s ease-out; transition: all 0.6s ease-out;	
	}
	#goto_pagetop.on{
		bottom:-8px;
		}

	
}/* end  for_sp */	




/* ========================= */
/*   for_tablet                                          */
/* ========================= */
@media screen and (max-width:1000px) { 
	
	#page_wrap{
		overflow: hidden;
	}
	
}

	
/* ========================= */
/*  keyrames                                         */
/* ========================= */

		@keyframes flashing {
			  	0%{opacity:1;}
				50%{opacity:0.3;}
			  	100%{opacity:1;}
				}	

		@keyframes fade_in {
		  0%{opacity:0;}
		  100%{opacity:1;}
			}
		@keyframes fade_in_top {
			  0%{opacity:0; top:-10px;}
			  100%{opacity:1; top:0px;}
			}
		@keyframes fade_in_left {
			  0%{opacity:0; left:-20px;}
			  100%{opacity:1; left:0px;}
			}
		@keyframes fade_in_right {
			  0%{opacity:0; right:-20px;}
			  100%{opacity:1; right:0px;}
			}	

		@keyframes star {
			0% {background-size: 100% 100%, 100% 100%; transform: rotate(0deg);}
			50% {background-size: 100% 100%, 100% 100%; transform: rotate(15deg);}
			100% {background-size: 100% 100%, 100% 100%; transform: rotate(30deg);}
			}


			@-webkit-keyframes flashing {
					0%{opacity:1;}
					50%{opacity:0.3;}
					100%{opacity:1;}
					}	

			@-webkit-keyframes fade_in {
			  0%{opacity:0;}
			  100%{opacity:1;}
				}
			@-webkit-keyframes fade_in_top {
				  0%{opacity:0; top:-10px;}
				  100%{opacity:1; top:0px;}
				}
			@-webkit-keyframes fade_in_left {
				  0%{opacity:0; left:-20px;}
				  100%{opacity:1; left:0px;}
				}
			@-webkit-keyframes fade_in_right {
				  0%{opacity:0; right:-20px;}
				  100%{opacity:1; right:0px;}
				}	

			@-webkit-keyframes star {
				0% {background-size: 100% 100%, 100% 100%; transform: rotate(0deg);}
				50% {background-size: 100% 100%, 100% 100%; transform: rotate(15deg);}
				100% {background-size: 100% 100%, 100% 100%; transform: rotate(30deg);}
				}