@charset "UTF-8";

/* ----------------------------- リセット */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, var, b, i,
dl dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
}

body {
	  font-size: 12px;
		line-height: 1; }


ol, ul {
		list-style: none; }


a {
		margin: 0;
		padding: 0;
		vertical-align: baseline;
		background: transparent; }




/* ----------------------------- 全体 */
html {
		font-size: 62.5%; }



a:link, a:visited {
		color: #3E3A39;
		text-decoration: none; }

a:hover, a:active {
		color: #3E3A39;
		text-decoration: underline; }

a, a img {
		-webkit-transition: 0.2s ease all;
		transition: 0.2s ease all; }

@media screen and (min-width: 768px) {
		.sp-only {
				display: none !important; } }

@media screen and (max-width: 767px) {
		.pc-only {
				display: none !important; } }

img,
.bx-wrapper img {
		max-width: 100%;
		height: auto; }




/*=======================================
ヘッダー
=========================================*/
.l-header {
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 500;
		-webkit-transition: 0.3s ease all;
		transition: 0.3s ease all; }
		.l-header-wrap {
			
				display: flex;
				justify-content: space-between;
				align-items: center; }
				.l-header-wrap:before, .l-header-wrap:after {
						display: none; }
		.l-header-bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				-webkit-transition: 0.3s ease all;
				transition: 0.3s ease all;
				background: transparent; }
		.l-header__logo {
				padding: 10px 36px;
				position: relative;
				z-index: 999; }
				.l-header__logo a {
						display: block;
						background-repeat: no-repeat;
						background-position: left top;
						background-size: contain; }
				.l-header__logo img {
						-webkit-transition: 0.3s ease all;
						transition: 0.3s ease all; }
		.l-header__nav {
				text-align: right;
				position: relative;
			
			margin-bottom: 80px;
				z-index: 2; }
				.l-header__nav .onlineshop,
				.l-header__nav .btn {
						display: inline-block;
						*display: inline;
						*zoom: 1;
						vertical-align: middle; 
}
				.l-header__nav .onlineshop {
						margin-right: 128px;
						font-size: 13px;
						font-size: 1.3rem;
						line-height: 123.0769%;
						letter-spacing: 0.04em; }
						.l-header__nav .onlineshop a {
								color: #fff;
								font-family: "Euclid Square Regular", "EuclidSquare-Regular", "Euclid", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
								text-decoration: none; }
				.l-header__nav .btn {
						padding: 20px 16px;
						text-align: center;
						width: 70px;
				position: absolute;
					border: 1px #DEDEDE solid;
					top: 0px;
					right: 40px;
						cursor: pointer;
						-webkit-box-sizing: border-box;
						box-sizing: border-box; }
						.l-header__nav .btn span {
								display: inline-block;
								*display: inline;
								*zoom: 1;
								position: relative;
								width: 24px;
								height: 8px;
								vertical-align: middle;
								-webkit-transition: 0.3s ease all;
								transition: 0.3s ease all; }
								.l-header__nav .btn span:before, .l-header__nav .btn span:after {
										display: block;
										content: "";
										background: #fff;
										position: absolute;
										width: 100%;
										height: 1px;
										left: 0;
										-webkit-transition: 0.3s ease all;
										transition: 0.3s ease all; }
								.l-header__nav .btn span:before {
										top: 0px; }
								.l-header__nav .btn span:after {
										bottom: 0px; }


		.l-header.is-scrolled .l-header__logo a {
				background-image:url("../images/logo_01.svg"); 
				background-color:rgba(255,255,255,0.7);
			border-radius: 5px;
			
}

		

		.l-header.is-scrolled .l-header__logo img {
				opacity: 0;
				-ms-filter: "alpha(opacity=0)";
				filter: alpha(opacity=0); }
		.l-header.is-scrolled .l-header__nav .onlineshop a {
				color: #3E3A39; }
.l-header.is-scrolled .l-header__nav .btn{
	background-color:rgba(255,255,255,0.9);
}
		.l-header.is-scrolled .l-header__nav .btn span:before, .l-header.is-scrolled .l-header__nav .btn span:after {
				background-color: #3E3A39; }
		
				.l-header.is-home.is-finish {
						-webkit-transition: 1s ease all 1s;
						transition: 1s ease all 1s;
						opacity: 1;
						-ms-filter: "alpha(opacity=100)";
						filter: alpha(opacity=100); }
						.l-header.is-home.is-finish.is-scrolled-start {
								-webkit-transition: 0.3s ease all;
								transition: 0.3s ease all; }
		.l-header.is-news {
				border-bottom: 1px solid rgba(62, 58, 57, 0.4);
				background: #fff; }

/*=======================================
メニュー
=========================================*/
.l-nav {
		position: fixed;
		width: 100%;
		height: 100vh;
		background: #fff;
		left: 0;
		top: 0;
		z-index: 9999;
		-webkit-transition: 0.4s ease all;
		transition: 0.4s ease all;
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%); }
		.l-nav-img1 {
				float: left;
				width: 37.8571%;
				position: relative;
				height: 100%;
				overflow: hidden; }
				.l-nav-img1:before {
						display: block;
						content: "";
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background:url("../images/brand_back.svg") no-repeat center;
						background-size: cover;
						-webkit-transition: 2s ease all 0.1s;
						transition: 2s ease all 0.1s;
						-webkit-transform: scale(1.1);
						transform: scale(1.1); }
		.l-nav-content {
				float: right;
				width: 62.1429%;
				height: 100%;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				overflow: auto;
				padding: 27px 48px 70px;
				display: flex;
				flex-direction: column;
				justify-content: space-between; }
				.l-nav-content:before, .l-nav-content:after {
						display: none; }
		.l-nav__heading {
				display: flex;
				justify-content: space-between;
				align-items: center; }
				.l-nav__heading:before, .l-nav__heading:after {
						display: none; }
				.l-nav__heading h1 {
						flex-grow: 2; }
				.l-nav__heading .language {
						flex-grow: 1;
						display: flex;
						text-align: center; }
						.l-nav__heading .language li {
								font-family: "Euclid Square Regular", "EuclidSquare-Regular", "Euclid", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
								font-size: 13px;
								font-size: 1.3rem;
								letter-spacing: 0.04em;
								line-height: 140%; }
								.l-nav__heading .language li + li {
										margin-left: 24px; }
				.l-nav__heading .close {
						cursor: pointer;
						flex-grow: 1;
						text-align: right; 
					opacity: 1;
					
margin-bottom: 150px;}
		.l-nav__menu {
				display: flex;
				justify-content: space-between;
				align-items: flex-end; }
				.l-nav__menu:before, .l-nav__menu:after {
						display: none; }
				.l-nav__menu .block1 {
						width: 63.3074%; }
				.l-nav__menu .block2 {
						width: 34.8837%; }
				.l-nav__menu a:hover {
						text-decoration: none; }
				.l-nav__menu .layer1 {
						margin-bottom: 60px; }
						.l-nav__menu .layer1 li {
								font-size: 30px;
								font-size: 2.5rem;
								line-height: 130%;
								margin-bottom: 35px;
								font-family: "A1 Mincho", "A1明朝", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "リュウミン R-KL", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
								font-weight: 600;
								-webkit-transition: 1s ease all 0.1s;
								transition: 1s ease all 0.1s;
								-webkit-transform: translateY(30px);
								transform: translateY(30px);
								opacity: 0;
								-ms-filter: "alpha(opacity=0)";
								filter: alpha(opacity=0);
								font-feature-settings: "palt";
								letter-spacing: 0.1em; }
								.l-nav__menu .layer1 li a {
										-webkit-transition: 0.3s ease all;
										transition: 0.3s ease all; }
								.l-nav__menu .layer1 li span {
										display: inline-block;
										*display: inline;
										*zoom: 1;
										vertical-align: middle;
										margin-left: 15px;
										font-size: 11px;
										font-size: 1.1rem;
										line-height: 120%;
										font-family: "Euclid Square Regular", "EuclidSquare-Regular", "Euclid", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
										letter-spacing: 0.04em;
										font-weight: normal; }
						.l-nav__menu .layer1:hover li a {
								opacity: 0.2;
								-ms-filter: "alpha(opacity=20)";
								filter: alpha(opacity=20); }
						.l-nav__menu .layer1:hover li:hover a {
								opacity: 1;
								-ms-filter: "alpha(opacity=100)";
								filter: alpha(opacity=100); }
				.l-nav__menu .layer2 li {
						font-size: 15px;
						font-size: 1.5rem;
						line-height: 120%;
						margin-bottom: 12px;
						letter-spacing: 0.02em;
						-webkit-transition: 1s ease all 0.2s;
						transition: 1s ease all 0.2s;
						-webkit-transform: translateY(30px);
						transform: translateY(30px);
						opacity: 0;
						-ms-filter: "alpha(opacity=0)";
						filter: alpha(opacity=0); }
				.l-nav__menu .layer3 {
						margin-bottom: 60px; }
						.l-nav__menu .layer3 li {
								font-size: 12px;
								font-size: 1.2rem;
								line-height: 120%;
								margin-bottom: 12px;
								-webkit-transition: 1s ease all 0.3s;
								transition: 1s ease all 0.3s;
								-webkit-transform: translateY(30px);
								transform: translateY(30px);
								opacity: 0;
								-ms-filter: "alpha(opacity=0)";
								filter: alpha(opacity=0); }
								.l-nav__menu .layer3 li a {
										color: #888; }
								.l-nav__menu .layer3 li:last-child {
										margin-bottom: 0; }
				.l-nav__menu .sns li {
						margin-bottom: 15px;
						font-family: "Euclid Square Regular", "EuclidSquare-Regular", "Euclid", YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
						font-size: 14px;
						font-size: 1.4rem;
						-webkit-transition: 1s ease all 0.4s;
						transition: 1s ease all 0.4s;
						-webkit-transform: translateY(30px);
						transform: translateY(30px);
						opacity: 0;
						-ms-filter: "alpha(opacity=0)";
						filter: alpha(opacity=0); }
						.l-nav__menu .sns li:last-child {
								margin-bottom: 0; }
						.l-nav__menu .sns li a {
								display: inline-block;
								*display: inline;
								*zoom: 1;
								background-repeat: no-repeat;
								background-position: left center;
								background-size: 21px auto;
								padding-left: 34px; }
						.l-nav__menu .sns li.instagram a {
								background-image: url("../images/hed_sns01.svg"); }
						.l-nav__menu .sns li.youtube a {
								background-image: url(); }
						.l-nav__menu .sns li.facebook a {
								background-image:url("../images/hed_sns02.svg"); }
		.l-nav.is-open {
				opacity: 1;
				-ms-filter: "alpha(opacity=100)";
				filter: alpha(opacity=100);
				-webkit-transform: translateY(0);
				transform: translateY(0); }
				.l-nav.is-open .l-nav-img1:before {
						-webkit-transform: scale(1);
						transform: scale(1); }
				.l-nav.is-open .l-nav__menu .layer1 li,
				.l-nav.is-open .l-nav__menu .layer2 li,
				.l-nav.is-open .l-nav__menu .layer3 li,
				.l-nav.is-open .l-nav__menu .sns li {
						-webkit-transform: translateY(0);
						transform: translateY(0);
						opacity: 1;
						-ms-filter: "alpha(opacity=100)";
						filter: alpha(opacity=100); }


/* ----------------------------- タブレット */
/* ----------------------------- スマホ */
@media screen and (max-width: 767px) {
		.l-header__logo {

	vertical-align: top;
	margin-bottom: 100px;}
		.l-header__nav .onlineshop {
				margin-right: 0; }
		.l-header__nav .btn {
				width: 50px;
				padding: 14px 5px;
			right: 20px;
	top:-50px;}
		.l-header.is-scrolled .l-header__logo a {
				background-image:url("../images/logo_01.svg"); }
		.l-nav-content {
				float: none;
				width: auto;
				justify-content:flex-start; 
				padding: 14px 10px;
			 }
		.l-nav__heading {
				margin-bottom: 0px; 
	}
		.l-nav__menu {
			
				display: block;
	}
				.l-nav__menu .block1 {
						width: auto; }
	
	.l-nav__menu .block2 {
		width: 20%;
	}
	


				.l-nav__menu .block1 {
						margin-bottom: 50px; }
				.l-nav__menu .layer1 {
						margin-bottom: 48px; }
						.l-nav__menu .layer1 li {
								margin-bottom: 22px;
								font-size: 18px;
								font-size: 2.0rem; }
								.l-nav__menu .layer1 li span {
										font-size: 11px;
										font-size: 1.1rem; }
				.l-nav__menu .layer2 {
						float: left;
						width: 46%; }
				.l-nav__menu .layer3 {
						float: right;
						width: 46%;
						margin-bottom: 0; }
		.l-pagetitle {
				padding-top: 240px;
				padding-bottom: 240px; }
				.l-pagetitle .h {
						font-size: 30px;
						font-size: 3rem; }
				.l-pagetitle.is-news {
						padding-top: 120px;
						padding-bottom: 60px; }
		.cursor,
		.cursor-wrap {
				display: none; } }



/* ----------------------------- スマホ */
@media screen and (max-width: 767px) {
		body {
				font-size: 14px;
				font-size: 1.4rem;
				line-height: 160%;
				min-width: initial; } }


@media screen and (max-width: 394px) {
		.l-header__logo {

	vertical-align: top;
	margin-bottom: 100px;}
		.l-header__nav .onlineshop {
				margin-right: 0; }
		.l-header__nav .btn {
				width: 50px;
				padding: 14px 5px;
			right: 20px;
	top:-50px;}
		
		.l-nav-content {
			
				padding: 14px 5px;
		 }
		.l-nav__heading {
				margin-bottom: 0px;
			
			height: 180px;			
}
		.l-nav__menu {
		
				display: block; }
				.l-nav__menu .block1 {
					
						width: auto; }
				.l-nav__menu .block1 {
						margin-bottom: 50px; }
				.l-nav__menu .layer1 {
						margin-bottom: 48px; }
						.l-nav__menu .layer1 li {
								margin-bottom: 25px;
								font-size: 16px;
								font-size: 1.6rem; }
								.l-nav__menu .layer1 li span {
										font-size: 10px;
										font-size: 1.0rem; }
				.l-nav__menu .layer2 {
						
						width: 46%; }
				.l-nav__menu .layer3 {
					
						width: 46%;
						margin-bottom: 0; }
		.l-pagetitle {
				padding-top: 240px;
				padding-bottom: 240px; }
				.l-pagetitle .h {
						font-size: 30px;
						font-size: 3rem; }
				.l-pagetitle.is-news {
						padding-top: 120px;
						padding-bottom: 60px; }

	
	
}