@charset "utf-8";

.inner{
	position:relative;
	width:970px;
	margin:0 auto;
}
@media screen and (max-width: 970px){
	.inner{
		width:90%;
	}
}

#hd_top{
	position:relative;
	width:100%;
	height:100vh;
	margin:0 auto 180px;
}
@media (orientation: portrait){
	#hd_top{
		height:80vh;
	}
}
#logo_top{
	position:absolute;
	top:60px;
	left:50%;
	width:20%;
	max-width:190px;
	min-width:112px;
	transform:translate(-50%,0);
	z-index:1;
}
#copy, #hd_top .gm{
	position:absolute;
	top:90px;
	left:50%;
	text-shadow:	0 0 3px rgba(255,255,255,.8), 0 0 3px rgba(255,255,255,.8), 0 0 3px rgba(255,255,255,.8), 0 0 3px rgba(255,255,255,.8), 
					0 0 6px rgba(255,255,255,.8), 0 0 6px rgba(255,255,255,.8), 0 0 6px rgba(255,255,255,.8), 0 0 6px rgba(255,255,255,.8), 0 0 6px rgba(255,255,255,.8), 
					0 0 12px rgba(255,255,255,.8), 0 0 12px rgba(255,255,255,.8), 0 0 12px rgba(255,255,255,.8), 0 0 12px rgba(255,255,255,.8);
	z-index:1;
}
#copy{
	right:9%;
	left:inherit;
	font-size:1.4rem;
	line-height:3rem;
}
#hd_top:after{
	position:absolute;
	display:block;
	content:'';
	bottom:15px;
	left:50%;
	width:72px;
	height:118px;
	background-image:url(/img/i_scroll.png);
	background-repeat:no-repeat;
	background-position:center bottom;
	background-size:contain;
	transform:translateX(-50%);
	z-index:1;
	
	animation-name: i_scroll;
	animation-duration: 4s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
	transform-origin: center;
}
@keyframes i_scroll{
  0%, 20%, 40%{
    bottom:15px;
  }
  10%, 30%{
    bottom:0;
  }
}

#hd_top .gm{
	left:5%;
}

#kv{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:0;
}
	#kv div{
		position:relative;
		width:100%;
		height:100%;
	}
	#kv div span{
		display:block;
		width:100%;
		height:100%;
		transform:scale(1.3);
		transform-origin:center;
		background-repeat:no-repeat;
		background-position:center center;
		background-size:cover;
	}

@media screen and (max-width: 768px){
	#hd_top:after{
		width:39px;
		height:65px;
	}
	#logo_top{
		top:3%;
	}
	#copy{
		right:50%;
		top:42%;
		transform:translateX(50%);
		font-size:1.2rem;
		line-height:2.5rem;
	}
	#hd_top .gm{
		display:none;
	}
}




.top-msg{
	display:flex;
	width:100%;
	max-width:1366px;
	flex-flow:row-reverse nowrap;
	align-items:top;
	margin:0 auto 180px;
}
	.top-msg .txt{
		position:relative;
		width:50%;
		font-family: "A1明朝";
		letter-spacing:.2rem;
		text-align:center;
	}
	.top-msg p{
		position:relative;
		display:block;
		left:50%;
		transform:translateX(-50%);
		height:auto;
		max-height:250px;
		text-align:left;
		font-size:1.1rem;
		line-height:2rem;
		writing-mode: vertical-rl;
		margin-bottom:3rem;
	}
	.top-msg a.more{
		display:inline-block;
		padding:.4rem 2.2rem .8rem;
		font-size:.8rem;
		line-height:1;
		border:1px solid rgba(0,0,0,.4);
		transition:.3s;
	}
	.top-msg a.more:hover{
		color:#fff;
		background:rgb(0,0,0);
	}
	.top-msg .img{
		width:50%;
	}
	
@media screen and (max-width: 768px){
	.top-msg{
		display:block;
	}
	.top-msg .txt{
		width:90%;
		margin:0 auto 4rem;
	}
	.top-msg .img{
		position:relative;
		width:100%;
		height:40vh;
		overflow:hidden;
		margin:0 auto 2rem;
	}
	.top-msg .img img{
		position:relative;
		left:50%;
		top:50%;
		transform:translate(-50%,-50%);
	}
}

#env{
	flex-flow:row-reverse nowrap;
}
#psn{
	flex-flow:row nowrap;
}



#teas{
	margin:0 auto 180px;
}
	.teas_desc{
		display:flex;
		width:100%;
		flex-flow:row wrap;
		align-items:top;
		justify-content:center;
	}
	.teas_desc .t_item{
		width:17%;
		margin:0 1.5% 2.5rem;
	}
@media screen and (max-width: 950px){
	.teas_desc .t_item{
		width:23%;
		margin:0 3% 2.5rem;
	}
}
@media screen and (max-width: 600px){
	.teas_desc{
		display:block;
	}
	.teas_desc .t_item{
		position:relative;
		width:100%;
		margin:0 0 2.5rem;
	}
	.teas_desc .t_item:after{
		content: "";
		display: table;
		clear: both;
	}
	.teas_desc .t_item img{
		float:right;
		max-width:160px;
		margin:0 0 .5rem 2rem;
	}
}
	.teas_desc .t_item h3{
		font-family: "A1明朝";
		font-size:1.25rem;
		line-height:1.2;
		margin:15px 0 15px;
	}
	.teas_desc .t_item h3 span{
		display:inline-block;
		font-size:1rem;
		padding:0 .7rem 0 0;
		border-right:1px solid rgba(0,0,0,.4);
		margin:0 .7rem 0 0;
	}
	.teas_desc .t_item figcaption{
		text-align:left;
		font-size:.81rem;
		text-align:justify;
		text-justify:inter-ideograph;
	}
	
.bn{
	display:flex;
	width:100%;
	flex-flow:row nowrap;
	justify-content:space-between;
}
	.bn div{
		position:relative;
		width:50%;
		padding:0 3% 0 0;
		text-align:left;
	}
	.bn div:nth-child(2){
		padding:0 0 0 3%;
		text-align:right;
	}
	.bn div img{
		display:inline-block;
		max-width:456px;
	}
@media screen and (max-width: 500px){
	.bn{
		display:block;
	}
	.bn div,.bn div:nth-child(2){
		width:80%;
		padding:0;
		margin:0 auto 1rem;
	}
	.bn div a{
		display:block;
	}
	.bn div img{
		display:block;
	}
}



#shop{
	padding:65px 0 24px;
	background:url(/img/bn_texture-grn.jpg) repeat;
	margin:0 auto 180px;
}
	.shoplist{
		display:flex;
		flex-flow:row-reverse wrap;
		justify-content:center;
		align-items:top;
	}
	.shoplist dl{
		width:auto;
		writing-mode:vertical-rl;
		white-space:nowrap;
		padding:.6rem 0;
		text-align:left;
		font-family:"A1明朝";
		line-height:1.5;
		border-top:1px solid rgba(0,0,0,.4);
		margin:0 1.6rem 2rem;
	}
	.shoplist dl dt{
		font-weight:bolder;
		margin:0 0 0 .2rem;
	}
	.shoplist dl dd{
		font-size:.87rem;
	}



#blog{
	margin:0 auto 180px;
}
	.bloglist{
		position:relative;
		overflow:visible;
		margin:0 auto 180px;
	}
	.bloglist article{
		width:20%;
		margin:0 1rem;
	}
	.bloglist article a{
		display:block;
	}
	.bloglist article h3{
		padding:15px 0 5px;
		font-weight:normal;
		line-height:1.3;
	}
	.bloglist article time{
		display:block;
		padding:5px 0 15px;
		font-size:.75rem;
		line-height:1;
	}
	.bloglist article p{
		font-size:.87rem;
		text-align:justify;
		text-justify:inter-ideograph;
	}
	.bloglist article .img img{
		height:17vh;
	}
@media (orientation: portrait){
	.bloglist article .img img{
		height:12vh;
	}
}


/* animation */

.me{
	opacity:0;
	filter:blur(30px);
	transform:translateY(50px);
	transition:1s;
}
.me_in{
	opacity:1;
	filter:blur(0);
	transform:translateY(0);
}