@charset "utf-8";
/* CSS Document */

/*------------------------
	common
------------------------*/

* {
	box-sizing: border-box; }

html {
	scroll-behavior: smooth; }

body {
	margin:0;
	padding:0;
	font-family: 'Forum','Shippori Mincho B1', cursive, serif;
	color:#231815;
	font-weight: 500; }

a {
	text-decoration: none;
	color:#1b1c1d; }

h1,h2,h3,h4,h5,p {margin:0;}
ul {margin:0;padding:0;}
li {list-style: none;margin:0;padding:0;}

/*------------------------
	mainv
------------------------*/

#mainv {
	width:100%;
	height: 100vh;
	overflow: hidden;
	background-color:#f5f5f5;
	position: fixed;top:0;left:0;z-index: -2; }

@media screen and (max-width:540px){
	#mainv {height: 95vh;}
}

.mainv_inner {
	width:80%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top:0;right:0;bottom:0;left:0;margin:auto; }

.mainv_image {
	opacity: 0;
	filter: grayscale(100%);
	animation: mainv_fadein 2s;
	animation-delay: 2s;
	animation-fill-mode: forwards;
	width:36vmax; }

.mainv_image img {
	display: block;
	width:100%;
	height: auto; }

@keyframes mainv_fadein{
	100% {opacity: 1;filter: grayscale(0)}
}

#mainv h1 {
	opacity: 0;
	filter: grayscale(100%);
	animation: mainv_fadein 3s;
	animation-delay: 2s;
	animation-fill-mode: forwards;	
	position: relative;
	margin:0 3vmax;
	width:20vmax; }

#mainv h1 img,#mainv h1 svg {
	display: block;
	width:100%;
	height: auto; }

#mainv .scroll {
	position: absolute;
	z-index: 2;
	right:4vmax;
	bottom:0;
	width:1.2vmax;
	animation: mainv_scroll 2s;
	animation-delay: 2.5s;
	opacity: 0;
	animation-fill-mode: forwards; }

@keyframes mainv_scroll {
	100% {opacity: 1;}
}

@media screen and (max-width:1300px) {
	.mainv_image {
		width:40vmax; }
	#mainv h1 {
		margin:0 4vmax;
		width:23vmax; }
	#mainv .scroll {
		right:5vmax;
		width:1.5vmax; }
}

@media screen and (max-width:820px) {
	.mainv_inner {
		flex-wrap: wrap; }
	.mainv_image {
		height: 55%;
		padding-bottom:3%;
		width:80%; }
	.mainv_image img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center bottom; }
	#mainv h1 {
		height: 45%;}
}

@media screen and (max-width:540px) {
	.mainv_image {height: 50%;}
	.mainv_image {
		width:100%;}
	#mainv .scroll {
		right:4vmax;
		width:1.7vmax; }
}

/*------------------------
	products
------------------------*/

#products {
	background:#fff;
	margin-top:100vh;
	padding:10vmax 0 15vmax 0; }

.products_subpage {
	margin-top:0!important; }

.products_inner {
	width:80%;
	max-width:58vmax;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: flex-start; }

.products_box {
	width:22.5%;
	display: block; }

.products_image_wrap {
	position: relative;
	padding:0.5vmax 0 0 0;
	background-color:#f7f7f7; }

.products_image_wrap .img-wrap {
	display: block;
	width:85%;
	height: auto;
	margin: 0 auto; }

.products_image_wrap .img-wrap img {
	display: block;
	width:100%;
	padding:0;
	transition: .5s;
	height: auto; }

.products_box:hover .img-wrap img {
	transform: scale(1.03); }

.products_category {
	position: absolute;
	top:-0.5vmax;
	left:0;
	text-align: center;
	width:100%;
	height: 1.1vmax;
	display: block; }

.products_category img {
	display: inline-block;
	width:auto;
	height: 100%; }

.products_text {
	transition: .2s;
	margin-top:2vmax; }

.products_name {
	font-size: 0.9vmax;
	line-height: 1.5;
	letter-spacing: 0.1vmax;
	text-align: left;
	transition: .2s;
	font-weight: bold; }

.products_subtitle {
	line-height: 1.7;
	font-size: 0.7vmax;
	letter-spacing: 0.05vmax;
	display: block;
	color:#676769;
	transition: .2s;
	margin:1vmax 0 0 0; }

.products_box:hover .products_text,
.products_box:hover .products_name,
.products_box:hover .products_subtitle {
	color:#337239; }

@media screen and (max-width:1300px) {
	.products_inner {
		max-width:80%;}
	.products_image_wrap {
		padding:1vmax 0 0 0; }
	.products_category {
		top:-0.7vmax;
		height: 1.5vmax; }
	.products_text {
		margin-top:2.3vmax; }
	.products_name {
		font-size: 1.2vmax; }
	.products_subtitle {
		font-size: 0.9vmax;
		letter-spacing: 0.1vmax;
		margin:1.2vmax 0 0 0; }	
}

@media screen and (max-width:820px) {
	.products_box {
		width:47%;
		margin-bottom:15%; }
	.products_box:nth-last-of-type(1),
	.products_box:nth-last-of-type(2) {
		margin-bottom:0;}
	.products_category {
		height: 1.8vmax;
		top:-1vmax;	}
	.products_text {
		margin-top:2.8vmax}
	.products_name {
		font-size: 1.5vmax; }
	.products_subtitle {
		font-size: 1.1vmax;
		margin:1.5vmax 0 0 0; }	
}

@media screen and (max-width:540px) {
	.products_name {
		letter-spacing: 0;
		font-size: 1.7vmax; }
	.products_subtitle {
		font-size: 1.4vmax}
}

/*------------------------
	top_about
------------------------*/

#top_about {
	width:100%;
	overflow: hidden;
	background:#fff;
	padding-bottom:10vmax; }

/* 01 */
.top_about_box1 {
	width:80%;
	max-width:58vmax;
	margin:0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start; }

.top_about_box1_image {
	width:41vw;
	margin-left:calc(50% - 50vw);
	height: 50vmax; }

.top_about_box1_image img {
	display: block;
	width:100%;
	height: 100%;
	object-position: center top;
	object-fit: cover; }

.top_about_text1 {
	width:52%; }

.top_about_text1 h3 {
	font-size: 1.8vmax;
	line-height: 1.7;
	letter-spacing: 0.2vmax;
	font-weight: normal;
	margin:5vmax 0 3vmax 0; }

.top_about_text1 p {
	font-size: 0.8vmax;
	letter-spacing: 0.05vmax;
	text-align: justify;
	line-height: 3; }

.top_about_text1 span.en {
	letter-spacing: 0.1vmax; }

/* 02 */
.top_about_box2 {
	width:80%;
	max-with:58vmax;
	margin:1vmax auto 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start; }

.top_about_box2_image {
	order:2;
	width:44vw;
	margin-right:calc(50% - 50vw);
	height: 33vmax; }

.top_about_box2_image img {
	display: block;
	width:100%;
	height: 100%;
	object-fit: cover; }

.top_about_text2 {
	order:1;
	padding-top:10vmax;
	display: flex;
	justify-content: flex-end;
	width:45%; }

.top_about_text2 h3 {
	font-size: 1.8vmax;
	line-height: 1.7;
	letter-spacing: 0.2vmax;
	font-weight: normal;
	margin:0 0 2.5vmax 0; }

.top_about_text2 p {
	font-size: 0.8vmax;
	letter-spacing: 0.05vmax;
	text-align: justify;
	line-height: 3;}

.top_about_text2 span.en {
	letter-spacing: 0.1vmax; }

.about_text2_link {display: none}

@media screen and (max-width:1300px) {
	.top_about_box1,.top_about_box2 {
		max-width:80%; }
	.top_about_box1_image {
		height: 60vmax; }
	.top_about_text1 h3,.top_about_text2 h3 {
		font-size: 2.3vmax; }
	.top_about_text1 p,.top_about_text2 p {
		font-size: 1.1vmax; }
	.top_about_text2 {width:47%;}
	.top_about_box2_image {height: 40vmax;}

}

@media screen and (max-width:820px) {
	.top_about_box1,.top_about_box2 {
		width:100%;
		max-width:100%}
	.top_about_box1_image {
		width:100%;
		margin-left:0;
		height: 50vmax; }
	.top_about_box2_image {
		width:100%;
		margin-left:0;
		height: 40vmax; }
	.top_about_text1{
		margin:5vmax auto 10vmax auto;
		width:80%; }
	.top_about_box2_image {order:1;}	
	.top_about_text2 {
		order:2;
		margin:0 auto;
		width:80%; }
	.top_about_text1 h3,
	.top_about_text2 h3 {
		font-size: 2.5vmax; }
	.top_about_text1 p,
	.top_about_text2 p {
		font-size: 1.3vmax; }
	.about_text2_link {display: block}
	.about_text2_link {
		display: block;
		width:100%;
		display: flex;
		justify-content: flex-end;
		margin:5vmax 0 0 0;	}
	.about_text2_link>img {
		display: block;
		width:8vmax;
		height:auto	}
	
}

@media screen and (max-width:540px) {
	.top_about_text1 h3 {
		margin:5vmax 0;
		font-size: 2.75vmax; }
	.top_about_text2 h3 {
		margin:0 0 4.5vmax 0;
		font-size: 2.75vmax; }
	.top_about_text1 p,
	.top_about_text2 p {
		line-height: 2.4;
		font-size: 1.7vmax; }
	.top_about_text1 p br.none,
	.top_about_text2 p br.none{
		display: none; }
	.top_about_text1 span.en,
	.top_about_text2 span.en {
		letter-spacing: 0.2vmax;}
	.about_text2_link>img {
		width:9vmax	}
}

/*------------------------
	followus
------------------------*/

#followus {
	background:#ebe3da;
	padding:5vmax 0 6vmax 0;
	text-align: center; }

ul.followus_images {
	width:80%;
	max-width:58vmax;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start; }

ul.followus_images li {
	background:#000;
	width:23.5%; }

ul.followus_images li a {
	display: block;
	position: relative; }

ul.followus_images li a:after {
	content:'';
	width:1vmax;
	height: 1vmax;
	background-image: url("../images/heart.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	right:1vmax;
	bottom:1vmax;
	opacity: 0;
	transition: .5s; }

ul.followus_images li a:hover:after {
	opacity: 1; }

ul.followus_images li img {
	display: block;
	width:100%;
	height: auto;
	transition: .5s; }

ul.followus_images li:hover img {
	opacity: .5; }

.follow_link {
	display: block;
	margin:4.5vmax 0 0 0; }

.follow_link>svg {
	display: block;
	width:10vmax;
	height: auto;
	margin: 0 auto; }

.follow_link>svg:hover .st0-fw,
.follow_link>svg:hover .st1-fw{
	fill:#337239; }

@media screen and (max-width:1300px) {
	#followus {
		padding:6vmax 0 8vmax 0; }
	ul.followus_images {
		max-width:80% }
	ul.followus_images li a:after {
		width:1.5vmax;
		height: 1.5vmax; }
	.follow_link>svg {
		width:13vmax; }
}

@media screen and (max-width:540px) {
	.follow_link {
		margin:3vmax 0 0 0}
	.follow_link>svg {
		width:15vmax; }
	ul.followus_images li {
		margin-bottom:5%;
		width:48%}
}

/*------------------------
	footer_image
------------------------*/

#footer_image {
	width:100%;
	background:#fff;
	height: 36vmax;
	position: relative; }

#footer_image .img-wrap {
	width:100%;
	height:100%; }

#footer_image .background {
	display: block;
	width:100%;
	height: 100%;
	object-position: center bottom;
	transform: translateY(5%);
	object-fit: cover; }

#footer_image svg {
	display: block;
	position: absolute;
	top:0;bottom:0;left:0;right:0;margin:auto;
	height: auto;
	padding-bottom:2vmax;
	width:11vmax; }

@media screen and (max-width:1300px) {
	#footer_image {
		height: 40vmax }
	#footer_image svg {
		width:15vmax;}
}

@media screen and (max-width:540px) {
	#footer_image {
		height: 34vmax}
	#footer_image .background {
		transform: translateY(0)}
}

.st0-ht{fill:#231815;}
/* 最初は非表示に */
.svg-elem-ht-1,.svg-elem-ht-2,.svg-elem-ht-3,
.svg-elem-ht-4,.svg-elem-ht-5,.svg-elem-ht-6,
.svg-elem-ht-7,.svg-elem-ht-8,.svg-elem-ht-9,
.svg-elem-ht-10,.svg-elem-ht-11,.svg-elem-ht-12,
.svg-elem-ht-13,.svg-elem-ht-14,.svg-elem-ht-15,
.svg-elem-ht-16,.svg-elem-ht-17
{opacity: 0;}
/* .animation-startクラスが付いたらアニメーション開始 */
.animation-start .svg-elem-ht-1{
	opacity: 1;
	-webkit-animation:animate-svg-fill-1-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 0s both;animation:animate-svg-fill-1-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 0s both;}
.animation-start .svg-elem-ht-2{
	opacity: 1;
	-webkit-animation:animate-svg-fill-2-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 0.1s both;animation:animate-svg-fill-2-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 0.1s both}
.animation-start .svg-elem-ht-3{
	opacity: 1;
	-webkit-animation:animate-svg-fill-3-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 0.2s both;animation:animate-svg-fill-3-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 0.2s both}
.animation-start .svg-elem-ht-4{
	opacity: 1;
	-webkit-animation:animate-svg-fill-4-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 0.30000000000000004s both;animation:animate-svg-fill-4-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 0.30000000000000004s both}
.animation-start .svg-elem-ht-5{
	opacity: 1;
	-webkit-animation:animate-svg-fill-5-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 0.4s both;animation:animate-svg-fill-5-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 0.4s both}
.animation-start .svg-elem-ht-6{
	opacity: 1;
	-webkit-animation:animate-svg-fill-6-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 0.5s both;animation:animate-svg-fill-6-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 0.5s both}
.animation-start .svg-elem-ht-7{
	opacity: 1;
	-webkit-animation:animate-svg-fill-7-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 0.6000000000000001s both;animation:animate-svg-fill-7-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 0.6000000000000001s both}
.animation-start .svg-elem-ht-8{
	opacity: 1;
	-webkit-animation:animate-svg-fill-8-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 0.7000000000000001s both;animation:animate-svg-fill-8-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 0.7000000000000001s both}
.animation-start .svg-elem-ht-9{
	opacity: 1;
	-webkit-animation:animate-svg-fill-9-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 0.8s both;animation:animate-svg-fill-9-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 0.8s both}
.animation-start .svg-elem-ht-10{
	opacity: 1;
	-webkit-animation:animate-svg-fill-10-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 0.9s both;animation:animate-svg-fill-10-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 0.9s both}
.animation-start .svg-elem-ht-11{
	opacity: 1;
	-webkit-animation:animate-svg-fill-11-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 1s both;animation:animate-svg-fill-11-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 1s both}
.animation-start .svg-elem-ht-12{
	opacity: 1;
	-webkit-animation:animate-svg-fill-12-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 1.1s both;animation:animate-svg-fill-12-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 1.1s both}
.animation-start .svg-elem-ht-13{
	opacity: 1;
	-webkit-animation:animate-svg-fill-13-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 1.2000000000000002s both;animation:animate-svg-fill-13-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 1.2000000000000002s both}
.animation-start .svg-elem-ht-14{
	opacity: 1;
	-webkit-animation:animate-svg-fill-14-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 1.3s both;animation:animate-svg-fill-14-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 1.3s both}
.animation-start .svg-elem-ht-15{
	opacity: 1;
	-webkit-animation:animate-svg-fill-15-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 1.4000000000000001s both;animation:animate-svg-fill-15-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 1.4000000000000001s both}
.animation-start .svg-elem-ht-16{
	opacity: 1;
	-webkit-animation:animate-svg-fill-16-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 1.5s both;animation:animate-svg-fill-16-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 1.5s both}
.animation-start .svg-elem-ht-17{
	opacity: 1;
	-webkit-animation:animate-svg-fill-17-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 1.6s both;animation:animate-svg-fill-17-ht 0.7s cubic-bezier(0.6,0.04,0.98,0.335) 1.6s both}

@keyframes animate-svg-fill-1-ht{0%{fill:transparent}100%{fill:rgb(35,24,21)}}
@keyframes animate-svg-fill-2-ht{0%{fill:transparent}100%{fill:rgb(35,24,21)}}
@keyframes animate-svg-fill-3-ht{0%{fill:transparent}100%{fill:rgb(35,24,21)}}
@keyframes animate-svg-fill-4-ht{0%{fill:transparent}100%{fill:rgb(35,24,21)}}
@keyframes animate-svg-fill-5-ht{0%{fill:transparent}100%{fill:rgb(35,24,21)}}
@keyframes animate-svg-fill-6-ht{0%{fill:transparent}100%{fill:rgb(35,24,21)}}
@keyframes animate-svg-fill-7-ht{0%{fill:transparent}100%{fill:rgb(35,24,21)}}
@keyframes animate-svg-fill-8-ht{0%{fill:transparent}100%{fill:rgb(35,24,21)}}
@keyframes animate-svg-fill-9-ht{0%{fill:transparent}100%{fill:rgb(35,24,21)}}
@keyframes animate-svg-fill-10-ht{0%{fill:transparent}100%{fill:rgb(35,24,21)}}
@keyframes animate-svg-fill-11-ht{0%{fill:transparent}100%{fill:rgb(35,24,21)}}
@keyframes animate-svg-fill-12-ht{0%{fill:transparent}100%{fill:rgb(35,24,21)}}
@keyframes animate-svg-fill-13-ht{0%{fill:transparent}100%{fill:rgb(35,24,21)}}
@keyframes animate-svg-fill-14-ht{0%{fill:transparent}100%{fill:rgb(35,24,21)}}
@keyframes animate-svg-fill-15-ht{0%{fill:transparent}100%{fill:rgb(35,24,21)}}
@keyframes animate-svg-fill-16-ht{0%{fill:transparent}100%{fill:rgb(35,24,21)}}
@keyframes animate-svg-fill-17-ht{0%{fill:transparent}100%{fill:rgb(35,24,21)}}

/*------------------------
	footer
------------------------*/

#footer {
	background:#fff;
	padding:0.8vmax 0 1vmax 0; }

.footer_inner {
	width:80%;
	max-width:58vmax;
	margin:0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center; }

.footer_company {
	font-size: 1.1vmax;
	transition: .2s;
	letter-spacing: 0.2vmax; }

.footer_company:hover {
	color:#337239; }

.copyright {
	font-size: 0.9vmax;
	letter-spacing: 0.1vmax; }

@media screen and (max-width:1300px) {
	#footer {
		padding:0.8vmax 0 1.6vmax 0; }
	.footer_inner {
		max-width:80% }
	.footer_company {
		font-size: 1.5vmax }
	.copyright {
		font-size: 1.2vmax}
}

@media screen and (max-width:540px) {
	#footer {
		padding:1.6vmax 0; }
	.footer_company {
		font-size: 1.6vmax }
	.copyright {
		font-size: 1.3vmax}
}

/*------------------------
	global_nav
------------------------*/

#global_nav,#global_nav_sub {
    background:#fff;
    width: 100%;
	padding:2.5vmax 0 2vmax 0;
	position: relative;
	left: 0;
    position: fixed;
	box-shadow: 10px 10px 10px rgba(0,0,0,.1);
	transition: .7s;
	z-index: 10;
    top: 0; }

#global_nav.hide,
#global_nav_sub.hide{
	box-shadow: 10px 10px 10px rgba(0,0,0,0);
	transform: translateY(-100%); }

#global_nav .wrapper,#global_nav_sub .wrapper {
	position: relative;
    padding: 0;
    width: 100%; }

.gloval_nav_ul {
    display: flex;
	justify-content: center;
	align-items: center;
    margin: 2vmax 0 0 0;
    padding: 0; }

.item {
	line-height: 1;
	margin:0 1.5vmax; }

.item a {
	font-size: 1vmax;
	letter-spacing: 0.1vmax;
    width: auto;
	transition: .2s; }

.item a:hover {
	color:#337239; }

.global_nav_logo {
	display: block;
	width:23vmax;
	height: 1.6vmax;
	position: relative;
	max-width: 80%;
	transition: .2s;
	margin:0 auto; }

.global_nav_logo:before {
	content:'';
	width:100%;
	height: 100%;
	background-image:url("../images/logo_header.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top:0;left:0;
	z-index: 1;
	transition: .5s; }

.global_nav_logo:after {
	content:'';
	width:100%;
	height: 100%;
	background-image:url("../images/logo_header_color.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top:0;left:0;
	z-index: 2;
	opacity: 0;
	transition: .5s; }

.global_nav_logo:hover:before {opacity: 0;}
.global_nav_logo:hover:after {opacity: 1; }

@media screen and (max-width:1300px) {
	.g-nav-list-inner {
		width:85% }
	.header_menu_logo {
		width:100%;
		height: 2.5vmax;}
	.header_menu_01 li {
		font-size: 2.2vmax;	}
	.header_insta,.header_company {
		font-size: 1.8vmax }
	.item {
		margin:0 2vmax;	}
	.item a {
		font-size: 1.4vmax;	}
	.global_nav_logo {
		width:30vmax;
		height: 2.2vmax; }
}

@media screen and (max-width:540px) {
	.global_nav_logo {
		margin:0 0 0 4vmax; }
	#global_nav,#global_nav_sub {
		padding:2.5vmax 0;}
	.gloval_nav_ul {display: none}
}

/*------------------------
	表示されたら画像アニメーション
------------------------*/

.img-wrap {
	overflow: hidden;
	opacity: 0; }

.img-animation {
	animation: img-opacity 2s cubic-bezier(.4, 0, .2, 1);
	animation-fill-mode: forwards;
	overflow: hidden;
	position: relative; }

.img-animation:before {
	animation: img-animation 2s cubic-bezier(.4, 0, .2, 1) forwards;
	background:#fff;
	bottom: 0;
	content: '';
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1; }

@keyframes img-opacity {
	100% {opacity: 1;}
}

@keyframes img-animation {
	100% {transform: translateX(100%);}
}

ul.followus_images li.img-animation:before {
	background:#ebe3da; }

.products_image_wrap .img-animation:before {
	background:#f7f7f7; }

/*------------------------
	g-nav
------------------------*/

#g-nav{
    position:fixed;
	z-index: -1;
	opacity: 0;
	top:0;
	width:100%;
    height: 100vh;
	background:#f5f5f5;
	transition: all .7s; }

#g-nav.panelactive{
	opacity: 1;
	z-index:998; }

#g-nav.panelactive #g-nav-list {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch; }

/*openbtn*/
.openbtn,.openbtn_sub {
	position:fixed;
    z-index: 999;/*ボタンを最前面に*/
	top:2vmax;right: 7vmax;margin:auto;
	cursor: pointer;
    width: 2.5vmax;
	border:1px solid rgba(0,0,0,0);
	height: 2.5vmax; }

.openbtn:before,.openbtn_sub:before {
	content:'';
	width:100%;
	height: 100%;
	background-image: url("../images/nav_open.svg");
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 1;
	transition: .5s;
	top:0;left:0; }

.openbtn:after,.openbtn_sub:after {
	content:'';
	width:100%;
	height: 100%;
	background-image: url("../images/nav_open_color.svg");
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 2;
	opacity: 0;
	transition: .5s;
	top:0;left:0; }

.openbtn:hover:before,.openbtn_sub:hover:before {opacity: 0}
.openbtn:hover:after,.openbtn_sub:hover:after {opacity: 1}
.openbtn.active:before,.openbtn_sub.active:before {display: none}
.openbtn.active:after,.openbtn_sub.active:after {display: none}

.openbtn span,.openbtn_sub span {opacity: 0;}
.openbtn.active span,.openbtn_sub.active span  {opacity: 1;}

.openbtn span:before,.openbtn_sub span:before {
	content:'';
	width:100%;
	height: 100%;
	background-image: url("../images/nav_close.svg");
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 1;
	transition: .5s;
	top:0;left:0; }

.openbtn span:after,.openbtn_sub span:after {
	content:'';
	width:100%;
	height: 100%;
	background-image: url("../images/nav_close_color.svg");
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 2;
	opacity: 0;
	transition: .5s;
	top:0;left:0; }

.openbtn span:hover:before,.openbtn_sub span:hover:before {opacity: 0}
.openbtn span:hover:after,.openbtn_sub span:hover:after {opacity: 1}

@media screen and (max-width:1300px) {
	.openbtn,.openbtn_sub {
		width:3.1vmax;
		height: 3.1vmax; }
}
@media screen and (max-width:820px) {
	.openbtn,.openbtn_sub {right:3vmax}
}
@media screen and (max-width:540px) {
	.openbtn,.openbtn_sub {
		top:1.7vmax;
		width: 4vmax;
		height: 4vmax; }
}

/* g-nav 中身 */

.g-nav-list-inner {
	width:80%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	position: absolute;
	top:0;right:0;bottom:0;left:0;margin:auto; }

.g-nav-visual {
	width:55%;
	height: 100%; }

.g-nav-visual>img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center; }

.g-nav-content {
	width:40%;
	padding-top:3vmax;
	margin:0 5%; }

.header_menu_logo {
	display: block;
	width:26vmax;
	height:2vmax;
	position: relative;
	transition: .5s; }

.header_menu_logo:before {
	content:'';
	width:100%;
	height:100%;
	background-image: url("../images/logo_header.svg");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	left:0;top:0;
	z-index: 1;
	transition: .5s; }

.header_menu_logo:after {
	content:'';
	width:100%;
	height:100%;
	background-image: url("../images/logo_header_color.svg");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	left:0;top:0;
	z-index: 2;
	opacity: 0;
	transition: .5s; }

.header_menu_logo:hover:before {opacity: 0}
.header_menu_logo:hover:after {opacity: 1}

.header_menu_logo_sp {display: none}

.header_menu_01 {
	padding-left:6vmax;
	margin:3.5vmax 0; }

.header_menu_01 li {
	font-size: 1.8vmax;
	letter-spacing: 0.2vmax;
	line-height: 1.8;}

.header_menu_01 a {
	transition: .5s;}

.header_menu_01 a:hover {color:#337239}

.header_insta {
	padding-left:6vmax;
	display: inline-block;
	margin:0 auto;
	font-size: 1.2vmax;
	letter-spacing: 0.15vmax;
	padding-right:2.3vmax;
	position: relative;
	transition: .5s; }

.header_insta:hover {
	color:#337239; }

.header_insta:before {
	content:'';
	width:1.4vmax;
	height:1.4vmax;
	background-image: url("../images/icon_instagram.svg");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	transform: translateY(-0.1vmax);
	position: absolute;
	top:0;bottom:0;right:0;margin:auto;
	z-index: 1;
	transition: .5s; }

.header_insta:after {
	content:'';
	width:1.4vmax;
	height:1.4vmax;
	background-image: url("../images/icon_instagram_color.svg");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	transform: translateY(-0.1vmax);
	position: absolute;
	top:0;bottom:0;right:0;margin:auto;
	z-index: 2;
	opacity: 0;
	transition: .5s; }

.header_insta:hover:before {opacity: 0}
.header_insta:hover:after {opacity: 1}

.header_company {
	font-size: 1.3vmax;
	letter-spacing:0.2vmax;
	margin-top:2.8vmax;
	display: block;
	padding-left:6vmax;
	transition: .5s;}

.header_company:hover {color:#337239}

@media screen and (max-width:820px) {
	.g-nav-list-inner {
		flex-wrap: wrap;
		max-width:45vmax;}
	.g-nav-visual {
		width:100%;
		padding-bottom:5%;
		height: 55%;}
	.g-nav-visual>img {
		object-position: center bottom}
	.g-nav-content {
		position: relative;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width:100%;
		height:45%;}
	.header_menu_logo {
		display: none}
	.header_menu_logo_sp {
		display: block;width:40%;}
	.header_menu_logo_sp>img {
		display: block;
		width:100%;
		height: auto }
	.header_menu_01 {
		width:35%;
		margin:0 0 5vmax 0;
		padding:0;}
	.header_menu_01 li {
		font-size: 3vmax;
		letter-spacing: 0.4vmax;
		margin-bottom:2vmax;
		line-height: 1;}
	.header_insta {
		display: block;
		width:35%;
		margin:0;
		font-size: 1.7vmax;
		padding:0;
		position: absolute;
		right:0;top:33.3vmax; }
	.header_insta:before,
	.header_insta:after{
		width:2.3vmax;
		height:2.3vmax; }
	.header_company {
		font-size: 1.7vmax;
		margin-top:-6vmax;
		padding-left:0;}
}

@media screen and (max-width:540px) {
	.g-nav-visual {
		padding-bottom:5%;
		height: 50%;}
	.g-nav-content {
		height:50%;}
	.header_menu_01 li {
		letter-spacing: 0.3vmax;
		font-size: 2.6vmax}
	.header_insta {
		top:34.7vmax;}
}

/*store_icon*/
.store_icon,.store_icon_sub {
	position:fixed;
    z-index: 999;/*ボタンを最前面に*/
	top:1.95vmax;right:11vmax;margin:auto;
	cursor: pointer;
    width: 2.3vmax;
	height: 2.3vmax;
	border:1px solid rgba(0,0,0,0); }

@media screen and (max-width:1300px) {
	.store_icon,.store_icon_sub {
		right:12vmax;
		width:2.8vmax;
		height: 2.8vmax; }	
}
@media screen and (max-width:820px) {
	.store_icon,.store_icon_sub {
		right:8vmax }
}

@media screen and (max-width:540px) {
	.store_icon,.store_icon_sub {
		right:9vmax;
		top:1.55vmax;
		width:3.8vmax;
		height: 3.8vmax; }
}

.store_icon:before,.store_icon_sub:before {
	content:'';
	width:100%;
	height: 100%;
	background-image: url("../images/icon_shop.svg");
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 1;
	transition: .5s;
	top:0;left:0; }

.store_icon:after,.store_icon_sub:after {
	content:'';
	width:100%;
	height: 100%;
	background-image: url("../images/icon_shop_color.svg");
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 2;
	opacity: 0;
	transition: .5s;
	top:0;left:0; }

.store_icon:hover:before,.store_icon_sub:hover:before {opacity:0;}
.store_icon:hover:after,.store_icon_sub:hover:after {opacity:1;}

/*------------------------
	inview
------------------------*/

/* fadein */
.fadein {
	opacity: 0; }

.fadein.is-inview {
	animation: fadein-anime 3s;
	animation-fill-mode: forwards;
	overflow: hidden;
	opacity: 0; }

@keyframes fadein-anime {
	100% {opacity: 1;}
}

/*------------------------
	loading
------------------------*/

/* Loading Block */
#loading {
	width: 100vw;
	height: 100vh;
	transition: all .5s;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999; }

#loading img {
	display: block;
	width:25vmax;
	max-width:80%;
	max-width:80%;
	animation: loading-anime .8s;
	transform: translateY(0.5vmax);
	opacity: 0;
	animation-fill-mode: forwards;
	position: absolute;
	top:0;right:0;bottom:0;left:0;margin:auto; }

@keyframes loading-anime {
	100% {transform: translateY(0);opacity: 1;}
}

/* Hide Loading Block */
.loaded {
	opacity: 0;
	visibility: hidden; }

@media screen and (max-width:1300px) {
	#loading img {
		width:35vmax;}
}

/*------------------------
	company
------------------------*/

.company_wrapper {
	margin:8vmax 0 12vmax 0 }

.company_header {
	padding:10vmax 0 5vmax 0;
	text-align: center; }

.company_header_h2 {
	font-size: 1.7vmax;
	font-weight: 500;
	letter-spacing: 0.3vmax;
	line-height: 1;
	margin:0; }

.company_header_h3 {
	font-size: 0.9vmax;
	transform: scale(0.95,1);
	letter-spacing: 0.15vmax;
	line-height: 1;
	margin-top:1vmax;
	font-weight: 500; }

@media screen and (max-width:1300px) {
	.company_header {
		padding:16vmax 0 8vmax 0}
	.company_header_h2 {
		font-size: 2.7vmax; }
	.company_header_h3 {
		font-size:1.4vmax; }
}

@media screen and (max-width:820px) {
	.company_header_h2 {
		font-size: 3vmax; }
	.company_header_h3 {
		font-size:1.6vmax; }
}

@media screen and (max-width:540px) {
	.company_header {
		padding:10vmax 0  8vmax 0}
	.company_header_h3 {
		margin-top:1.5vmax}
}

/*--- company_table */

.company_table {
	width:80%;
	max-width:35vmax;
	margin: 0 auto;
	border-spacing: 0;
	border-top:1px solid rgba(27,28,29,.5); }

.company_table th {
	font-weight: 500;
	text-align: left;
	vertical-align: top;
	padding:0.7vmax 0;
	line-height: 1.8;
	letter-spacing: 0.1vmax;
	font-size: 0.9vmax;
	width:8vmax;
	border-bottom:1px solid rgba(27,28,29,.5); }

.company_table td {
	font-weight: 500;
	width:calc(100% - 8vmax);
	font-size: 0.85vmax;
	letter-spacing: 0.1vmax;
	line-height: 1.8;
	padding:0.7vmax 0;
	border-bottom:1px solid rgba(27,28,29,.5); }

.company_table .url_icon {
	display: inline-block;
	width:0.5vmax;
	height: 0.5vmax;
	transform: translateY(0.05vmax);
	margin-left:0.3vmax;}

.company_table a {
	transition: .2s }

.company_table a:hover {
	opacity: .7 }

@media screen and (max-width:1300px) {
	.company_table {
		max-width:50vmax }
	.company_table th {
		font-size: 1.3vmax;
		width:13vmax;
		padding:1vmax 0;}
	.company_table td {
		width:calc(100% - 13vmax);
		font-size: 1.25vmax;
		padding:1vmax 0;}
	.company_table .url_icon {
		width:0.7vmax;
		margin-left:0.5vmax;
		height:0.7vmax}
}

@media screen and (max-width:820px) {
	.company_table th {
		font-size: 1.3vmax}
	.company_table td {
		font-size: 1.25vmax}
}

@media screen and (max-width:540px) {
	.company_table {
		max-width:80%}
	.company_table th {
		display: block;
		width:100%;
		border-bottom:0;
		padding:2vmax 0 0 0;
		font-size: 1.7vmax}
	.company_table td {
		display: block;
		width:100%;
		padding:1vmax 0 2vmax 0;
		font-size: 1.6vmax}
	.company_table td.none {
		border:none}
}

/*------------------------
	about
------------------------*/

.about_header {
	text-align: center;
	padding:15vmax 0 0 0;
	margin:8vmax 0 12vmax 0; }

.about_header_h1 {
	font-size: 1.7vmax;
	font-weight: 500;
	letter-spacing: 0.3vmax;
	line-height: 1;
	margin:0; }

.about_header_h2 {
	font-size: 1.1vmax;
	transform: scale(0.95,1);
	letter-spacing: 0.15vmax;
	line-height: 1;
	margin-top:2.8vmax;
	font-weight: 500; }

@media screen and (max-width:1300px) {
	.about_header_h1 {
		font-size: 2.7vmax; }
	.about_header_h2 {
		font-size:1.4vmax; }
}

@media screen and (max-width:820px) {
	.about_header_h1 {
		font-size: 3vmax; }
	.about_header_h2 {
		font-size:1.6vmax; }
}

/* about_contents_01 */

.about_contents_01_wrapper {
	width:100%;
	margin-bottom:10vmax;
	overflow: hidden; }

.about_contents_01 {
	width:80%;
	max-width:58vmax;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start; }

.about_contents_01_left {
	width:40%; }

.about_contents_01_left>img {
	display: block;
	width:41vw;
	margin-left:calc(100% - 41vw); }

.about_contents_01_right {
	padding-top:1.5vmax;
	width:50%; }

.about_contents_01_right_h3 {
	font-size: 1.4vmax;
	line-height: 1.7;
	letter-spacing: 0.1vmax;
	color:#000000;
	font-weight: 500; }

.about_contents_01_right_p {
	font-size: 0.8vmax;
	letter-spacing: 0.1vmax;
	line-height: 2.5;
	text-align: justify;
	color:#000000;
	margin:2.6vmax 0 3.2vmax 0; }

.about_contents_01_right_imgwrap {
	width:50vw;
	margin-right:calc(50% - 50vw); }

.about_contents_01_right_imgwrap img {
	display: block;
	width:100%;
	height: auto; }

.about_contents_01_right_imgwrap p {
	margin-top:1vmax;
	color:#000000;
	letter-spacing: 0.1vmax;
	font-size: 0.6vmax; }

@media screen and (max-width:1300px) {
	.about_contents_01 {
		max-width:80%}
	.about_contents_01_right_h3 {
		font-size: 2vmax; }
	.about_contents_01_right_p {
		font-size: 1.1vmax; }
}

@media screen and (max-width:820px) {
	.about_contents_01_left {
		order:2;
		margin-top:5vmax;
		width:100%; }
	.about_contents_01_left>img {
		width:100%;
		margin-left:0; }
	.about_contents_01_right {
		order:1;
		padding-top:0;
		width:100%; }
	.about_contents_01_right_h3 {
		font-size: 2.2vmax; }
	.about_contents_01_right_p {
		margin:3.6vmax 0 4.6vmax 0;
		font-size: 1.4vmax; }
	.about_contents_01_right_imgwrap {
		width:100vw;
		margin-left:calc(50% - 50vw); }
	.about_contents_01_right_imgwrap p {
		width:80%;
		margin:1vmax auto 0 auto}
}

@media screen and (max-width:540px) {
	.about_contents_01_right_p {
		margin:4.6vmax 0 8vmax 0;
		font-size: 1.7vmax}
	.about_contents_01_right_imgwrap p {
		margin-top:1.5vmax;
		font-size: 1.4vmax;}
}

/* about_contents_02 */

.about_contents_02_wrapper {
	width:100%;
	overflow: hidden;
	background:#ededed; }

.about_contents_02 {
	width:80%;
	max-width:58vmax;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch; }

.about_contents_02_left {
	height: 50vmax;
	width:33%; }

.about_contents_02_left_imgwrap {
	width:50vw;
	margin-left:calc(100% - 50vw);
	height: 100%; }

.about_contents_02_left img {
	width:100%;
	display: block;
	object-fit: cover;
	height: 100%; }

.about_contents_02_right {
	padding:5vmax 0;
	width:49%; }

.about_contents_02_right_h3 {
	font-size: 1.4vmax;
	font-weight: 500;
	line-height: 1.7;
	margin-bottom:3vmax;
	color:#000000;
	letter-spacing: 0.1vmax; }

.about_contents_02_right_p {
	font-size: 0.8vmax;
	text-align: justify;
	letter-spacing: 0.1vmax;
	color:#000000;
	line-height: 2.5; }

.about_contents_02_right_strong {
	display: block;
	font-weight: 500;
	font-size: 0.9vmax;
	line-height: 2;
	letter-spacing: 0.1vmax;
	color:#000000;
	margin:2vmax 0; }

.about_contents_02_right_imgwrap img {
	display: block;
	width:21.7vmax;
	max-width:80%;
	height: auto; }

.about_contents_02_right_imgwrap p {
	font-size: 0.58vmax;
	letter-spacing: 0.1vmax;
	color:#000000;
	margin:0.7vmax 0 1.4vmax 0; }

@media screen and (max-width:1300px) {
	.about_contents_02_left {
		width:40%;
		height: 70vmax;}
	.about_contents_02 {
		max-width:80%}
	.about_contents_02_right {
		padding:8vmax 0;}
	.about_contents_02_right_h3 {
		font-size: 2vmax; }
	.about_contents_02_right_p {
		font-size: 1.1vmax; }
	.about_contents_02_right_strong {
		font-size: 1.2vmax}
	.about_contents_02_right_imgwrap img {
		width:28vmax;}
}

@media screen and (max-width:820px) {
	.about_contents_02 {
		width:100%;
		max-width:100%}
	.about_contents_02_left {
		height: 45vmax;
		width:100%; }
	.about_contents_02_left_imgwrap {
		width:100%;
		margin-left:0;}
	.about_contents_02_right {
		padding:10vmax 0;
		margin: 0 auto;
		width:80%; }	
	.about_contents_02_right_h3 {
		font-size: 2.2vmax; }
	.about_contents_02_right_p {
		font-size: 1.4vmax; }
	.about_contents_02_right_strong {
		font-size: 1.5vmax}
	.about_contents_02_right_imgwrap img {
		width:34.5vmax;}
	.about_contents_02_right_imgwrap p {
		margin:1vmax 0 2vmax 0}

}

@media screen and (max-width:540px) {
	.about_contents_02_right_h3 {
		margin-bottom:4vmax	}
	.about_contents_02_left {
		height: 38vmax}
	.about_contents_02_right {
		padding:7vmax 0 9vmax 0;}
	.about_contents_02_right_p {
		font-size: 1.7vmax; }
	.about_contents_02_right_strong {
		font-size: 1.8vmax;
		margin:2.2vmax 0 3vmax 0}
	.about_contents_02_right_imgwrap img {
		width:100%;
		max-width:100%}
	.about_contents_02_right_imgwrap p {
		margin:1.5vmax 0 2.5vmax 0;
		font-size: 1.4vmax}
}

/* about_contents_03 */

.about_contents_03_wrapper {
	margin:10vmax 0 15vmax 0;
	overflow: hidden;
	width:100%; }

.about_contents_03 {
	width:80%;
	max-width:58vmax;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start; }

.about_contents_03_left {
	width:48%; }

.about_contents_03_left_h3 {
	font-size: 1.4vmax;
	line-height: 1.7;
	font-weight: 500;
	letter-spacing: 0.1vmax;
	color:#000;
	margin-bottom:5vmax; }

.about_contents_03_left_p {
	font-size: 0.8vmax;
	letter-spacing: 0.08vmax;
	text-align: justify;
	color:#000;
	line-height: 2.5; }

.about_contents_03_right {
	width:33%; }

.about_contents_03_right_imgwrap {
	width:40vw;
	margin-right:calc(100% - 40vw); }

.about_contents_03_right img {
	display: block;
	width:100%;
	height: auto; }

.about_contents_03_right p {
	margin-top:1vmax;
	color:#000000;
	letter-spacing: 0.1vmax;
	font-size: 0.6vmax; }

@media screen and (max-width:1300px) {
	.about_contents_03 {
		max-width:80%}
	.about_contents_03_left_h3 {
		font-size: 2vmax; }
	.about_contents_03_left_p {
		font-size: 1.1vmax; }
	.about_contents_03_right {
		width:40%}
	.about_contents_03_right_imgwrap {
		width:42vw;
		margin-right:calc(100% - 42vw); }
}

@media screen and (max-width:820px) {
	.about_contents_03_left {
		margin-bottom:6vmax;
		width:100%; }
	.about_contents_03_right {
		width:100%; }
	.about_contents_03_left_h3 {
		font-size: 2.2vmax; }
	.about_contents_03_left_p {
		font-size: 1.4vmax; }
	.about_contents_03_right_imgwrap {
		width:100vw;
		margin-left:calc(50% - 50vw); }
}
@media screen and (max-width:540px) {
	.about_contents_03_left {
		margin-bottom:8vmax	}
	.about_contents_03_left_h3 br.none {
		display: none}
	.about_contents_03_left_p {
		font-size: 1.7vmax; }
	.about_contents_03_right p {
		margin-top:1.5vmax;
		font-size: 1.4vmax}
}

/*------------------------
	準備中
------------------------*/

#pre {
	width:100%;
	position: relative;
	height:99.9vh; }

.pre_inner {
	position: absolute;
	top:0;right:0;bottom:0;left:0;
	margin:auto;
	height: 230px;
	text-align: center; }

.pre_inner>p {
	margin:50px 0;
	line-height: 2; }

.pre_inner>a {
	cursor: pointer;
	transition: .5s; }

.pre_inner>a:hover {
	color:#337239; }

/*------------------------
	category_header
------------------------*/

.category_header {
	width:80%;
	margin:23vmax auto 0 auto;
	text-align: center; }

.category_header_h1 {
	margin:0;
	width: auto;
	height: 1.2vmax; }

.category_header_h1>img {
	display: block;
	width:auto;
	height: 100%;
	margin:0 auto; }

.category_header_h2 {
	margin:2.3vmax 0 1vmax 0;
	font-weight: 500;
	letter-spacing: 0.1vmax;
	font-size: 1.15vmax; }

.category_header_p {
	margin:0;
	color:#000;
	letter-spacing: 0.05vmax;
	font-size: 0.8vmax; }

.category_header_p br.none {
	display: none }

@media screen and (max-width:1300px) {
	.category_header_h1 {
		height: 1.6vmax	}
	.category_header_h2 {
		font-size: 1.45vmax}
	.category_header_p {
		font-size: 1.1vmax}
}

@media screen and (max-width:540px) {
	.category_header {
		width:85%}
	.category_header_h1 {
		height: 2vmax	}
	.category_header_h2 {
		margin:3.3vmax 0 1.5vmax 0;
		font-size: 1.9vmax}
	.category_header_p {
		line-height: 2;
		font-size: 1.55vmax}
	.category_header_p br.none {
		display: block}
}

/*------------------------
	product_list
------------------------*/

.product_list_wrapper {
	width:80%;
	max-width:56vmax;
	margin:8vmax auto; }

.product_list_box {
	margin-bottom:6vmax;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end; }

.product_list_imgwrap {
	width:50%; }

.product_list_imgwrap>img {
	display: block;
	width:100%;
	height: auto }

.product_list_detail {
	width:46%; }

.product_list_detail_name_en {
	display: block;
	width: auto;
	max-width:100%;
	height: 0.92vmax;
	margin-bottom:1vmax;
	padding-left:0.1vmax; }

.product_list_detail_name_jp {
	display: block;
	margin:0 0 1.3vmax 0;
	font-size: 0.9vmax;
	letter-spacing: 0.1vmax;
	font-weight: 500;
	color:#000;
	line-height: 1.5; }

.product_list_detail_name_jp br.none {
	display: none}

.product_list_detail_p {
	display: block;
	margin:0 0 1vmax 0;
	font-size: 0.8vmax;
	color:#000;
	letter-spacing: 0.1vmax;
	line-height: 2; }

.product_list_detail_p_teabag {
	margin:2vmax 0; }

.product_list_detail_feature {
	border-top:1px solid rgba(103,103,105,.6);
	border-bottom:1px solid rgba(103,103,105,.6);
	display: block;
	margin: 0 0 1vmax 0;
	font-size: 0.58vmax;
	letter-spacing: 0.1vmax;
	color:#000;
	padding:0.7vmax 0; }

.product_list_detail_price {
	display: block;
	margin: 0 0 1.5vmax 0;
	font-size: 0.75vmax;
	color:#000;
	line-height: 2;
	letter-spacing: 0.05vmax; }

.product_list_detail_link {
	display: block;
	border:1px solid rgba(0,0,0,.5);
	font-size: 0.7vmax;
	margin-bottom:2vmax;
	letter-spacing: 0.05vmax;
	text-align: center;
	line-height: 1;
	color:#000;
	width:100%;
	max-width:11vmax;
	padding:0.6vmax 0 0.9vmax 0;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 50%);
	background-position: 0 0;
	background-size: 200% auto;
	transition: .3s; }

.product_list_detail_link:hover{
	background-position: -100% 0;
	color: #fff; }

.product_list_detail_link_icon {
	width:1vmax;
	height: 1vmax;
	display: inline-block;
	margin-right:0.8vmax;
	transform: translateY(0.2vmax);
	position: relative; }

.product_list_detail_link_icon:after {
	content:'';
	width:100%;
	height: 100%;
	background-image: url("../images/tea/icon_shop.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top:0;left:0;
	transition: .3s}

.product_list_detail_link_icon:before {
	content:'';
	width:100%;
	height: 100%;
	background-image: url("../images/tea/icon_shop_white.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top:0;left:0;
	opacity: 0;
	transition: .3s;}

.product_list_detail_link:hover .product_list_detail_link_icon:after {
	opacity: 0; }

.product_list_detail_link:hover .product_list_detail_link_icon:before {
	opacity: 1; }

.products_list_image>img {
	display: block;
	width:100%;
	height: auto }

@media screen and (max-width:1300px) {
	.product_list_wrapper {
		margin:8vmax auto 10vmax auto;
		max-width:80%;}
	.product_list_detail_name_en {
		height: 1.25vmax;
		margin-bottom:1.3vmax; }
	.product_list_detail_name_jp {
		margin:0 0 1.5vmax 0;
		font-size: 1.25vmax; }
	.product_list_detail_p {
		margin:0 0 2vmax 0;
		font-size: 1.15vmax; }
	.product_list_detail_feature {
		margin: 0 0 2vmax 0;
		font-size: 0.9vmax;
		padding:1vmax 0; }
	.product_list_detail_price {
		margin: 0 0 1.8vmax 0;
		font-size: 1.1vmax; }
	.product_list_detail_link {
		font-size: 1vmax;
		max-width:15vmax;
		padding:1vmax 0 1.2vmax 0; }
	.product_list_detail_link_icon {
		width:1.5vmax;
		height: 1.5vmax;
		margin-right:1vmax; }
	.products_list_image {
		margin-top:13vmax;}
}

@media screen and (max-width:820px) {
	.product_list_box {
		margin-bottom:10vmax;
		align-items: center; }
	.product_list_detail_name_jp {
		line-height: 1.7}
	.product_list_detail_name_jp br.none {
		display: block}
	.product_list_detail_price br.none {
		display: none}
	.products_list_image {
		width:100vw;
		margin-left:calc(50% - 50vw);}
}

@media screen and (max-width:540px) {
	.product_list_imgwrap {
		margin-bottom:8vmax;
		width:100%; }
	.product_list_imgwrap>img {
		width:80%;
		margin: 0 auto; }
	.product_list_detail {
		width:100%; }
	.product_list_detail_name_en {
		padding-left:0.25vmax;
		height: 1.7vmax;
		margin-bottom:1.5vmax; }
	.product_list_detail_name_jp {
		margin:0 0 2vmax 0;
		font-size: 1.8vmax; }
	.product_list_detail_p {
		margin:0 0 3vmax 0;
		font-size: 1.6vmax; }
	.product_list_detail_feature {
		margin: 0 0 3vmax 0;
		font-size: 1.3vmax;
		padding:1.5vmax 0; }
	.product_list_detail_price {
		margin: 0 0 2.5vmax 0;
		font-size: 1.5vmax; }
	.product_list_detail_link {
		font-size: 1.4vmax;
		max-width:25vmax;
		padding:1.5vmax 0; }
	.product_list_detail_link_icon {
		width:1.8vmax;
		height: 1.8vmax;
		margin-right:1.8vmax; }
	

}

/*------------------------
	spirits howto
------------------------*/

.spirits_howto {
	width:100%;
	border-bottom:1px solid rgba(103,103,105,.5);
	padding-bottom:6vmax;
	margin:8vmax 0 0 0;}

.spirits_howto_h3 {
	width:auto;
	text-align: center;
	height: 1.2vmax; }

.spirits_howto_h3 img {
	width:auto;
	height: 100%; }

.spirits_howto_p {
	line-height: 2;
	font-size: 0.8vmax;
	letter-spacing: 0.05vmax;
	max-width:100%;
	width:39.5vmax;
	margin:4vmax auto}

.spirits_howto_inner {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap}

.spirits_howto_box {
	width:50%;
	margin-bottom:6%;
	display: flex;
	justify-content: space-between;
	align-items: center;}

.spirits_howto_box:nth-last-of-type(1) {
	margin-bottom:0;}

.spirits_howto_box:nth-of-type(2) {
	animation-delay: .5s; }
.spirits_howto_box:nth-of-type(3) {
	animation-delay: 1s; }
.spirits_howto_box:nth-of-type(4) {
	animation-delay: 1.5s; }

.spirits_howto_image {
	display: block;
	width:48%;
	height: auto }

.spirits_howto_box_inner {
	width:48%;}

.spirits_howto_text{
	display: block;
	width:90%;
	height: auto;
	margin: 0; }

.spirits_howto_text_sp {
	display: none}

.spirits_howto_box_inner_p {
	margin:2vmax 0;
	font-size: 0.8vmax;
	letter-spacing: 0.05vmax;
	line-height: 2;}

.spirits_howto_box_inner_p br.none {
	display: none}

.spirits_howto_step {
	display: block;
	width:10vmax;
	max-width:100%;}

.spirits_howto_step_sp {
	display: none}

.spirits_howto_box_inner_comment {
	font-size: 0.7vmax;
	margin:1.5vmax 0 0 0;}

@media screen and (max-width:1300px) {
	.spirits_howto_h3 {height: 1.5vmax;}
	.spirits_howto_p {
		line-height: 2.5;
		font-size: 1.1vmax;
		letter-spacing: 0.1vmax;
		width:56vmax;
		margin:6vmax auto}
	.spirits_howto_box_inner_p {
		margin:2.5vmax 0;
		font-size: 1.1vmax;
		letter-spacing: 0.1vmax;}
	.spirits_howto_step {
		width:80%;}
	.spirits_howto_box_inner_comment {
		font-size: 1vmax;
		letter-spacing: 0.05vmax}
}

@media screen and (max-width:540px) {
	.spirits_howto_h3 {height: 2.3vmax;}
	.spirits_howto_p {
		line-height: 2.3;
		font-size: 1.6vmax;
		margin:6vmax auto}
	.spirits_howto_box {
		width:100%;
		text-align: center;
		margin-bottom:10%;
		flex-wrap: wrap;}
	.spirits_howto_image {
		width:45%;
		margin:0 auto;}
	.spirits_howto_box_inner {
		width:100%;}
	.spirits_howto_text {width:55%;margin: 0 auto;}
	.spirits_howto_text_pc {display: none}
	.spirits_howto_text_sp {display: block;}
	.spirits_howto_box_inner_p {
		margin:4vmax 0;
		font-size: 1.6vmax;}
	.spirits_howto_box_inner_p br.none {
		display: block}
	.spirits_howto_step {
		margin:0 auto;
		width:50%;}
	.spirits_howto_step_pc {display: none}
	.spirits_howto_step_sp {display: block}
	.spirits_howto_box_inner_comment {
		font-size: 1.5vmax;
		margin:3vmax 0 0 0;}
	.spirits_howto_box:nth-last-of-type(1) .spirits_howto_box_inner {
		margin-top:-25%;}
}

/*------------------------
	spirits arrange
------------------------*/

.spirits_arrange {
	width:100%;
	margin-bottom:8vmax; }

.spirits_arrange_p {
	line-height: 2;
	font-size: 0.8vmax;
	letter-spacing: 0.05vmax;
	max-width:80%;
	width:39.5vmax;
	margin:3vmax auto}

.spirits_arrange_inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width:100%;
	margin:3.5vmax auto 0 auto }

.spirits_arrange_box:nth-last-of-type(1),
.spirits_arrange_box:nth-last-of-type(4){
	width:20% }

.spirits_arrange_box:nth-last-of-type(2),
.spirits_arrange_box:nth-last-of-type(3) {
	width:30%}

.spirits_arrange_image {
	transition: .8s;
	display: block;
	width:100%;
	height: auto }

.spirits_arrange_box:hover .spirits_arrange_image {
	transform: scale(1.02)}

.spirits_arrange_image_sp {
	display: none}

.spirits_arrange_box_p {
	text-align: center;
	font-size: 0.8vmax;
	line-height: 1.8;
	letter-spacing: 0.05vmax;
	margin-top:1.5vmax;}

.spirits_arrange_box_p br.none {
	display: none}

@media screen and (max-width:1300px) {
	.spirits_arrange {
		padding:0 0 7vmax 0}
	.spirits_arrange_p {
		line-height: 2.5;
		font-size: 1.1vmax;
		letter-spacing: 0.1vmax;
		width:56vmax;}
	.spirits_arrange_inner {
		margin:4vmax auto 0 auto;}
	.spirits_arrange_box_p {
		margin-top:2vmax;
		font-size: 1vmax}
}

@media screen and (max-width:540px) {
	.spirits_arrange_p {
		line-height: 2.3;
		font-size: 1.6vmax;
		margin:6vmax auto}
	.spirits_arrange_inner {
		flex-wrap: wrap}
	.spirits_arrange_box:nth-of-type(1),
	.spirits_arrange_box:nth-of-type(2) {
		width:50%;
		margin-bottom:10%}
	.spirits_arrange_box:nth-of-type(3),
	.spirits_arrange_box:nth-of-type(4) {
		width:50%}
	.spirits_arrange_image_pc {
		display: none}
	.spirits_arrange_image_sp {
		display: block}
	.spirits_arrange_box_p {
		font-size: 1.6vmax}
	.spirits_arrange_box_p br.none {
		display: block}
}

.spirits_recipe_btn {
	display: block;
	border:1px solid rgba(103,103,105,.7);
	font-size: 0.7vmax;
	margin:5vmax auto 0 auto;
	letter-spacing: 0.05vmax;
	text-align: center;
	line-height: 1;
	color:#000;
	width:100%;
	max-width:11vmax;
	padding:0.9vmax 0;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgba(103,103,105,.7) 50%);
	background-position: 0 0;
	background-size: 200% auto;
	transition: .3s; }

.spirits_recipe_btn:hover{
	background-position: -100% 0;
	color: #fff; }

@media screen and (max-width:1300px) {
	.spirits_recipe_btn {
		font-size: 1vmax;
		max-width:15vmax;
		padding:1.2vmax 0; }
}

@media screen and (max-width:540px) {
	.spirits_recipe_btn {
		margin:8vmax auto 0 auto;
		font-size: 1.4vmax;
		max-width:23vmax;
		padding:2vmax 0; }

}