@charset "UTF-8";


/* visual --------------------------------------------------------------- */
#visual {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: relative;
	}
	
	#visual #vVideo {
		min-width: 100%;
		min-height: 100%;
		width: auto;
		height: auto;
		}
	
		#visual #vVideo video {
			width: 100%;
			min-width: 100%;
			max-width: 100%;
			min-height: 100%;
			height: auto;
			object-fit: cover;
			position: absolute;
			right: 0;
			bottom: 0;
			}
		
		#visual #vVideo #mask {
			width: 100%;
			height: 100vh;
			background-image: url(../../img/index/visual/mask.png);
			background-repeat: repeat;
			position: absolute;
			left: 0;
			top: 0;
			}
		
		#visual #vVideo .mute {
			width: 40px;
			height: 40px;
			z-index: 99999;
			cursor: pointer;
			-ms-filter: "alpha(opacity=0.75)";
			filter: alpha(opacity=75);
			opacity: 0.75;
	
			background-position: center center;
			background-size: 18px auto;
			-webkit-background-size: 18px auto;
			-moz-background-size: 18px auto;
			-o-background-size: 18px auto;
			-ms-background-size: 18px auto;
					
			position: absolute;
			left: 15px;
			bottom: 10px;
			}
			
			#visual #vVideo .mute.active {
				background-image: url(../../img/index/visual/active.png);
				}
			
			#visual #vVideo .mute.nonactive {
				background-image: url(../../img/index/visual/nonactive.png);
				}
			
		#visual #vPhoto {
			display: none;
			}
		
@media(max-width: 768px){
	#visual {
		/*background-color: #000000;
		background-image: url(../../img/index/visual/poster_mob.png);
		background-position: center center;
		background-size: auto 100%;
		-webkit-background-size: auto 100%;
		-moz-background-size: auto 100%;
		-o-background-size: auto 100%;
		-ms-background-size: auto 100%;*/
		}
	
	#visual,
	#visual #vPhoto,
	#visual #vPhoto ul,
	#visual #vPhoto ul li {
		width: 100%;
		height: 120vh;
		}
		
		/*#visual #vVideo {
			display: none;
			}
		
		#visual #vPhoto {
			display: block;
			}*/
		
			#visual #vPhoto ul {
				position: relative;
				}
				
				#visual #vPhoto ul li {
					background-position: center center;
					background-size: cover;
					-webkit-background-size: cover;
					-moz-background-size: cover;
					-o-background-size: cover;
					-ms-background-size: cover;
					}
					
				#visual #vPhoto ul li#vPhoto1 {
					background-image: url(../../img/index/visual/vPhoto1.jpg);
					}
				
				#visual #vPhoto ul li#vPhoto2 {
					background-image: url(../../img/index/visual/vPhoto2.jpg);
					}
				
				#visual #vPhoto ul li#vPhoto3 {
					background-image: url(../../img/index/visual/vPhoto3.jpg);
					}
				
				#visual #vPhoto ul li#vPhoto4 {
					background-image: url(../../img/index/visual/vPhoto4.jpg);
					}
	}

@media(max-width: 420px){
	#visual,
	#visual #vPhoto,
	#visual #vPhoto ul,
	#visual #vPhoto ul li {
		height: 50vh;
		}
	}
	


/* philosophy --------------------------------------------------------------- */
#philosophy {
	padding: 150px 0;
	}
	
	#philosophy h2 {
		margin-bottom: 125px;
		}
	
	#philosophy p {
		text-align: center;
		line-height: 3;
		margin-bottom: 2em;
		letter-spacing: 5px;
		}
		
		#philosophy p ruby,
		#philosophy p rb,
		#philosophy p rt {
			line-height: 1.2;
			}
			
		#philosophy p rt {
			font-size: 35%;
			}

@media(max-width: 768px){
	#philosophy {
		padding: 50px 0 75px 0;
		}
		
		#philosophy h2 {
			margin-bottom: 50px;
			}
		
		#philosophy p {
			letter-spacing: 0;
			}
	}
	
	

/* products --------------------------------------------------------------- */
#products {
	margin: 0 auto 150px auto;
	}
	
	#products h2 {
		margin: 0 auto 50px auto;
		}
		
		#products h2 img {
			height: 18px;
			}
	
	#products #productsImage {
		width: 100%;
		/*height: 125vh;*/
		height: 250vh;
		margin: 0 auto;
		
		background-image: url(../../img/index/products/productsImage.jpg);
		background-position: center center;
		background-attachment: fixed;
		
		background-size: 100% auto;
		-webkit-background-size: 100% auto;
		-moz-background-size: 100% auto;
		-o-background-size: 100% auto;
		-ms-background-size: 100% auto;
		
		/*background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		-ms-background-size: cover;*/
		}
		
		#products #productsImage img {
			width: 100%;
			}
	
	#products #productsCopy {
		width: 90%;
		max-width: 600px;
		margin: 0 auto;
		padding: 100px 0;
		}
		
		#products #productsCopy h3 {
			margin-bottom: 50px;
			}
		
		#products #productsCopy p {
			line-height: 2.5;
			margin-bottom: 1em;
			}
			
@media(max-width: 768px){
	#products {
		margin: 0 auto 100px auto;
		}
		
		#products #productsImage {
			height: 120vh;
			background-attachment: scroll;
			background-size: cover;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			-ms-background-size: cover;
			}
		
		#products #productsCopy {
			padding: 75px 0 50px 0;
			}
			
			#products #productsCopy p {
				line-height: 2;
				}
	}

@media(max-width: 420px){
		#products #productsImage {
			height: 50vh;
			background-image: url(../../img/index/products/productsImage_mob.jpg);
			}
	}



/* author --------------------------------------------------------------- */
#author {
	margin: 0 auto 150px auto;
	}
	
	#author h2 {
		margin: 0 auto 50px auto;
		}
		
		#author h2 img {
			height: 18px;
			}
		
	#author #authorImage {
		width: 100%;
		height: 125vh;
		background-image: url(../../img/index/author/authorImgae.jpg);
		background-position: center center;
		background-attachment: fixed;
		
		background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		-ms-background-size: cover;
		
		position: relative; 
		}
		
		#author #authorImage .authorTitle {
			position: absolute;
			right: 10%;
			top: 35%;
			}
			
			#author #authorImage .authorTitle h3,
			#author #authorImage .authorTitle a {
				color: #ffffff;
				text-align: left;
				border-color: #ffffff !important;
				}
			
			#author #authorImage .authorTitle h3 {
				margin-bottom: 20px;
				}
			
			#author #authorImage .authorTitle a {
				display: inline-block;
				margin: 0 auto;
				padding: 5px 50px;
				text-align: center;
				border: solid 1px;
				}

@media(max-width: 768px){
	#author {
		margin: 0 auto 75px auto;
		}
			
		#author #authorImage {
			height: 120vh;
			background-image: url(../../img/index/author/authorImgae_mob.jpg);
			background-position: center center;
			background-attachment: scroll;
			}
			
			#author #authorImage .authorTitle {
				width: 100%;
				right: auto;
				top: auto;
				left: 0;
				bottom: 10%;
				text-align: center;
				}
				
				#author #authorImage .authorTitle h3 {
					text-align: center;
					}
	}

@media(max-width: 420px){
		#author #authorImage {
			height: 50vh;
			}
	}



/* news --------------------------------------------------------------- */
#news {
	margin: 0 auto 150px auto;
	}
	
	#news h2 {
		margin: 0 auto 35px auto;
		}
		
		#news h2 img {
			height: 18px;
			}
	
	#news dl {
		width: 90%;
		max-width: 500px;
		margin: 0 auto;
		padding: 10px 0;
		border-bottom: solid 1px;
		border-color: #edeeef !important;
		}
		
		#news dl dt {
			float: left;
			width: 7em;
			padding-left: 3px;
			}
		
		#news dl dd {
			margin-left: 7em;
			padding-right: 3px;
			}

@media(max-width: 768px){
	#news {
		margin: 0 auto 75px auto;
		}
		
		#news dl {
			padding: 7px 0;
			font-size: 12px;
			}
	}