/*==RESET=======================================================*/
html,
body,
main,
h1,
h2,
h3,
h4,
ul,
p {
	margin: 0px;
	padding: 0px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html,
body {
	width: 100%;
	height: 100%;
}

body {
	font-family: 'Martel Sans', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}



/*==HEADER=======================================================*/
.header_wrp {
	position: fixed;
	top: 60px;
	left: 0;
	right: 0;
	width: 90%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: auto;
	z-index: 2;
}

.header_wrp h1 {
	flex-shrink: 0;
}

#gNav {
	width: 100%;
}

.gNav-menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 16px;
	font-weight: bold;
}

.gNav-menu li {
	list-style: none;
}

.onlinestore {
	border: 2px #000 solid;
	padding: 4px 20px 2px 20px;
	line-height: 1;
	white-space: nowrap;
}

/**hamburger*********/
.btn-gNav {
	display: none;
}


@media screen and (max-width: 767px) {
	header ul {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	header li {
		margin: 0 0 40px 0;
		font-size: 20px;
	}

	#hamburger .btn-gNav {
		display: block;
		position: fixed;
		top: 24px;
		right: 6%;
		width: 40px;
		height: 24px;
		z-index: 3;
		box-sizing: border-box;
		cursor: pointer;
		-webkit-transition: all 400ms;
		transition: all 400ms;
	}

	#hamburger .btn-gNav span {
		position: absolute;
		width: 100%;
		height: 2px;
		background: #000;
		border-radius: 10px;
		-webkit-transition: all 400ms;
		transition: all 400ms;
	}

	#hamburger .btn-gNav span:nth-child(1) {
		top: 0;
	}

	#hamburger .btn-gNav span:nth-child(2) {
		top: 10px;
	}

	#hamburger .btn-gNav span:nth-child(3) {
		top: 20px;
	}

	#hamburger .btn-gNav.open span:nth-child(1) {
		top: 6px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	#hamburger .btn-gNav.open span:nth-child(2),
	#hamburger .btn-gNav.open span:nth-child(3) {
		top: 6px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	#gNav {
		position: fixed;
		top: 0;
		right: -100%;
		width: 100%;
		height: 100%;
		font-size: 16px;
		box-sizing: border-box;
		z-index: 2;
		transition: .3s;
	}



	#gNav.open {
		right: 0px;
		background: rgba(201, 171, 134, 0.9)
	}

	.gNav-menu {
		display: block;
		text-align: right;
		margin-top: 100px;
		margin-right: 30px;
	}

	.onlinestore {
		border: 0;
		padding: 0;
		border-top: 1px #000 solid;
		display: inline-block;
		padding-top: 50px;
	}

}

@media screen and (min-width: 768px) and (max-width: 960px) {
	.logo{
		max-width:220px;
	}
	.onlinestore {
    padding: 2px 4px 1px 4px;
    font-size: 13px;
}
.gNav-menu{
	font-size:14px
}
} 

@media screen and (max-width: 767px) {
	.header_wrp {
		top: 20px;
	}

	#fv {
		background-size: cover;
	}

	.logo {
		max-width: 145px;
	}


}



/**ARROW BG-color*******************************************************
**********************************************************/
.arrow a {
	cursor: pointer;
	padding: 4vh 0;
	box-sizing: border-box;
	margin: auto;
	text-align: center;
	letter-spacing: 2px;
	color: #d2b48c;
	display: inline-grid;
	font-size: 14px;
}

.arrow img {
	max-width: 125px;
}

header .arrow a {
	padding: 0px 0 8vh 0;
}

@media all and (-ms-high-contrast: none) {

	*::-ms-backdrop,
	.arrow {
		width: 125px;
		margin: auto;
	}
}

.tan {
	background-color: #d2b48c;
}

.tan .arrow a {
	color: #fff;
	font-weight: 400;
	cursor: pointer;
	max-width: 125px;
	text-align: center;
}

img {
	width: 100%;
}

.when-pc {
	display: block;
}

.when-sp {
	display: none;
}

@media screen and (max-width: 767px) {
	.arrow a {
		font-size: 12px;
		margin: auto;
	}

	.arrow img,
	.tan .arrow a {
		max-width: 100px;
	}


	.when-pc {
		display: none !important;
	}

	.when-sp {
		display: block !important;
	}
}


/*popup arrow*/
.mfp-arrow-right:after,
.mfp-arrow-right::before {
	border-left: 0;
}

button.mfp-arrow-right {
	background: url(../images/pop-arrow-r.svg);
	width: 103px;
	height: 324px;
	top: 40%;
	right: 20%;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: right;
}

.mfp-arrow-left:after,
.mfp-arrow-left:before {
	border-right: 0;
}

button.mfp-arrow-left {
	background: url(../images/pop-arrow-l.svg);
	width: 103px;
	height: 324px;
	top: 40%;
	left: 20%;
}

/**link*******************************************************
**********************************************************/
a {
	transition: .3s;
	color: #000;
	text-decoration: none;
}


a i {
	color: #000;
	margin: 0px;
	font-size: 26px;
	font-weight: 400;
}

a:hover {
	opacity: 0.5;
	text-decoration: none;
}


section {
	min-height: 100vh;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}


/*==FV=======================================================*/

.fv_wrp {
	position: relative;
	display: flex;
	height: 100vh;
}

.fv_wrp .photo {
	width: 100%;
	height: 100%;
}

.fv_wrp img {
	object-fit: cover;
	object-position: top;
	height: 100%;
	width: 100%;
}

.fv_wrp .arrow {
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	margin: auto;
	display: inherit;
}



/*==CONCEPT=======================================================*/


.inner {
	margin: auto;
	text-align: center;
}










/**CONCEPT & CONTACT***************/

h2 {
	font-size: 16px;
	font-weight: 400;
	text-align: center;
	letter-spacing: 2px;
	margin: 1rem 0;
}


#concept img {
	max-width: 240px;
	margin: 3vh auto 0px auto;
}


.text {
	margin: 0 0 4vh 0;
	text-align: center;
	font-size: 16px;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	line-height: 1.8rem;

}

.br {
	margin-bottom: 16px;
}


@media screen and (max-width: 767px) {
	h2 {
		font-size: 15px;
		margin: 10px 0 20px 0;
		line-height: 130%;
	}

	#concept img {
		max-width: 140px;
		margin: auto;
	}

	.text {
		margin: 0;
		text-align: center;
		font-size: 12px;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		padding: 0 16px;
		box-sizing: border-box;
		line-height: 170%;
	}

	.br {
		margin-bottom: 8px;
	}

}





/**COLLECTION***************************************/
label {
	display: block;
	font-size: 14px;
	margin-top: 0px;
}

#collection h2 {
	margin: 1rem 0 0.4rem 0;
}

#collection .inner {
	justify-content: flex-start;
}

#collection .list {
	max-width: 960px;
	margin: 0 auto 0 auto;
	padding-left: 20px;
	box-sizing: border-box;
}

.list {
	display: flex;
	flex-wrap: wrap;
}

.list_item {
	width: 215px;
	height: 330px;
	box-sizing: border-box;
	margin: 0 20px 40px 0px;
	padding: 0px;
	/*background:  #d2b48c;*/

}

.mfp-counter {
	color: #444;
}

@media screen and (min-width: 768px) and (max-width: 959px) {
	#collection .list {
		max-width: 725px;
	}
}

@media screen and (max-width: 768px) {
	.mfp-container {
		padding-left: 16px;
		padding-right: 16px;
	}

	button.mfp-arrow-right {
		width: 20%;
		height: 20%;
		top: 46%;
		right: 4px;

	}

	button.mfp-arrow-left {
		width: 20%;
		height: 20%;
		top: 46%;
		left: 4px;
		background-repeat: no-repeat;
		background-size: contain;
	}
}




.list_item img {
	transition: .2s;
	vertical-align: top;
	line-height: 1.0em;
	width: 215px;
	/*height:330px;*/
}

.list_item img:hover {
	opacity: 0.6;
}

.caption {
	font-size: 16px;
	text-align: right;
}

.mfp-bg {
	background: #d2b48c;
}

.mfp-title {
	text-align: right;
	color: #000;
	word-wrap: break-word;
	padding-right: 0px;
	font-size: 13px;
	letter-spacing: 1px;
}

.mfp-figure:after {
	box-shadow: none;
	background: none;
}

.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
	cursor: pointer;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
	color: #d2b48c;
	right: 0px;
	text-align: right;
	padding-right: 6px;
	width: 100%;
	top: 30px;
}

.mfp-close {
	font-size: 0px;
	height: 60px;
}

.mfp-close:after {
	/*content: url(../images/close.png);*/
	content: "";
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url(../images/close.png);
	background-size: contain;
	vertical-align: middle;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
	right: 10px;
	top: 50px;
}



@media screen and (max-width: 767px) {
	#collection {
		height: 100% !important;
	}

	#collection .inner {
		/*height: 100vh;*/
		width: 100%;
		margin: auto;
		text-align: center;
		display: block;
	}

	#collection h2 {
		margin: 0.5rem 0 0.2rem 0;
	}

	#collection .list {
		max-width: none;
		flex-wrap: nowrap;
		flex-direction: row;
		overflow-x: auto;
	}


	.slick-prev {
		position: absolute;
		left: 0px;
		top: 30%;
		width: auto;
		padding: 0;
		margin: 0;
		background: none;
		border: 0;
		font-size: 0;
		line-height: 0;
		overflow: visible;
		cursor: pointer;
		z-index: 999;
	}

	.prev {
		max-height: 133px;
	}

	.next {
		position: absolute;
		right: 0px;
		top: 30%;
		width: auto;
		padding: 0;
		margin: 0;
		background: none;
		border: 0;
		font-size: 0;
		line-height: 0;
		overflow: visible;
		cursor: pointer;
		max-height: 133px;
	}


	.slick {
		margin-bottom: 0px;
		margin-top: 0px;
	}

	.slick-slide img {
		display: block;
		width: auto;
		max-height: 46vh;
	}

	.slick-list {
		margin-left: -16px;
	}

	.slick-slide {
		margin-right: 16px;
	}

	.slick-disabled .prev {
		display: none;
	}

	.slick-disabled .next {
		display: none;
	}

	.caption {
		font-size: 13px;
	}


}


/**stockist***********************/
#stockist .inner {
	max-width: 1024px;
}

#stockist .grid-container {
	display: flex;
	justify-content: space-around;
	width: 100%;
	max-width: 920px;
	margin: auto;
}

#stockist .grid-container div {
	padding: 0 16px;
}

.grid-container li {
	list-style: none;
	line-height: 150%;
	margin-bottom: 30px;
	font-size: 14px;
	text-align: left;
}

.grid-container span {
	font-size: 10px;
	letter-spacing: 1px;
}

@media screen and (max-width: 767px) {
	#stockist .grid-container {
		flex-direction: column;
		margin-top: 20px;
	}


	.grid-container li {
		margin-bottom: 20px;
		text-align: center;
	}
}

/******************************************/
#contact .inner {
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

#contact p {
	line-height: 130%;
}

.mail,
.insta {
	max-width: 24px;
	margin-top: 10px;
	-webkit-filter: invert(100%);
	-moz-filter: invert(100%);
	-o-filter: invert(100%);
	-ms-filter: invert(100%);
	filter: invert(100%);
}


.mail_margin {
	margin-top: 24px
}

.contact_title {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 4px;
}

.address {
	font-size: 13px;
	font-weight: 400;
}

.copy {
	font-size: 13px;
	margin-top: 24px
}

@media screen and (max-width: 767px) {

	.mail,
	.insta {
		max-width: 16px;
		margin-top: 10px;
	}

	.copy {
		margin-top: 10px;
		font-size: 13px;
	}

	.mail_margin {
		margin-top: 8px;
	}
}




/**COOKIE**************************************/
#cookie {
	padding-top: 80px;
}

#cookie .inner .text {
	max-width: 720px;
	font-size: 14px;
	text-align: left !important;
	margin: 40px auto 80px auto;
	line-height: 170%
}

#cookie .inner .title {
	font-weight: bold;
	font-size: 15px;
	margin-top: 40px;
	padding-bottom: 8px;
}

#cookie li {
	list-style: none !important;
	margin-bottom: 16px;
}

/**タブ*****/
.cp_tab *,
.cp_tab *:before,
.cp_tab *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.cp_tab {
	margin: 0 auto;
	line-height: 0;
}

.cp_tab>input[type='radio'] {
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	outline: none;
	background: none;
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

.cp_tab .cp_tabpanel {
	display: none;
}

.cp_tab>input:first-child:checked~.cp_tabpanels>.cp_tabpanel:first-child,
.cp_tab>input:nth-child(3):checked~.cp_tabpanels>.cp_tabpanel:nth-child(2),
.cp_tab>input:nth-child(5):checked~.cp_tabpanels>.cp_tabpanel:nth-child(3),
.cp_tab>input:nth-child(7):checked~.cp_tabpanels>.cp_tabpanel:nth-child(4),
.cp_tab>input:nth-child(9):checked~.cp_tabpanels>.cp_tabpanel:nth-child(5),
.cp_tab>input:nth-child(11):checked~.cp_tabpanels>.cp_tabpanel:nth-child(6),
.cp_tab>input:nth-child(13):checked~.cp_tabpanels>.cp_tabpanel:nth-child(7),
.cp_tab>input:nth-child(15):checked~.cp_tabpanels>.cp_tabpanel:nth-child(8),
.cp_tab>input:nth-child(17):checked~.cp_tabpanels>.cp_tabpanel:nth-child(9),
.cp_tab>input:nth-child(19):checked~.cp_tabpanels>.cp_tabpanel:nth-child(10),
.cp_tab>input:nth-child(21):checked~.cp_tabpanels>.cp_tabpanel:nth-child(11),
.cp_tab>input:nth-child(23):checked~.cp_tabpanels>.cp_tabpanel:nth-child(12),
.cp_tab>input:nth-child(25):checked~.cp_tabpanels>.cp_tabpanel:nth-child(13), 
.cp_tab>input:nth-child(27):checked~.cp_tabpanels>.cp_tabpanel:nth-child(14),
.cp_tab>input:nth-child(29):checked~.cp_tabpanels>.cp_tabpanel:nth-child(15),
.cp_tab>input:nth-child(31):checked~.cp_tabpanels>.cp_tabpanel:nth-child(16),
.cp_tab>input:nth-child(33):checked~.cp_tabpanels>.cp_tabpanel:nth-child(17) {
	display: block;
}

.cp_tab>label {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	cursor: pointer;
	border-bottom: 0;
}

.cp_tab>label:hover,
.cp_tab>input:focus+label {
	color: #d2b48c;
}

.cp_tab>input:checked+label {
	border-bottom: 1px #d2b48c solid;
	line-height: 1.2;
	margin-bottom: 0.6rem;
}

.cp_tab .cp_tabpanel {
	padding: 0.5em 1em;

}

@media (max-width: 480px) {
	.cp_tab {
		width: 100%;
		font-size: 0.8em;
		line-height: normal;
	}

	.cp_tab label {
		padding: 0.2rem 0.5em;
	}
}