/* Scss Document */

$breakpoint-sm: 374px;
$breakpoint:  900px;
$breakpoint-md: 1000px;
$breakpoint-lg: 1500px;
$txtcolor: #000000;
$gold: #C0966E;
$min: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho ProN W3","HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
$goth: "Hiragino Sans","ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo,"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "Noto Sans", sans-serif;


@mixin sm {
  @media screen and (max-width: $breakpoint-sm) {
    @content;
  }
}

@mixin mq {
  @media screen and (max-width: $breakpoint) {
    @content;
  }
}

@mixin ml {
  @media screen and (min-width: $breakpoint) {
    @content;
  }
}

@mixin md {
  @media screen and (max-width: $breakpoint-md) {
    @content;
  }
}

@mixin lg {
  @media screen and (min-width: $breakpoint-lg) {
    @content;
  }
}

@mixin mq-md {
  @media screen and (max-width: $breakpoint-md) {
    @content;
  }
}

//共通css
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

a{
	color: inherit;
	&:hover{
		opacity: 0.7 !important;
		transition: 0.5s;
	}
}

img{
	max-width: 100%;
	width: 100%;
}

html,body{
	font-family: $min;
	font-size: 62.5%; 
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body{
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 1.75;
	color: $txtcolor;
	font-feature-settings : "palt";
	animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	@include mq{
		font-size: 1.4rem;
	}
	&.add_overray{
		overflow: hidden;
	}
}

svg{fill: currentColor;}

.sp{
	display: none;
	@include mq{
		display: block !important;
	}
}

.tb{
	display: none;
	@include mq-md{
		display: block !important;
	}
}

.pc{
	display: block;
	@include mq{
		display: none !important;
	}
}

//フォント
.jost{
	font-family: 'Jost', sans-serif;
	font-weight: 700;
	font-style: italic;
}
.gara{
	font-family: 'EB Garamond', serif;
	font-weight: 400;
	font-style: normal;
}
.bodoni {
    font-family: 'Bodoni Moda', serif;
    font-weight: 700;
    font-style: normal;
}
@font-face {
  /*フォントの名前*/
  font-family: "LanieDaySH";
  /*フォントファイルへのパス（複数指定の場合、上から順に読み込まれる）*/
  src: url("../img/Laine.woff2") format("woff2"),
       url("../img/Laine.woff") format("woff");
}
.lainie {
    font-family: 'LanieDaySH', serif;
    font-style: normal;
}

//フェードイン
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.fadein {
    opacity : 0.5;
    transform : translate(0, 40px);
    transition : all 500ms;
	@include mq{
		transform : translate(0, 30px);
	}
}

.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

//震える
@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(5px, 5px) rotateZ(1deg)}
    50% {transform: translate(0px, 5px) rotateZ(0deg)}
    75% {transform: translate(5px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}
.fwari{
	display: block;
	&:hover{
		animation: hurueru .12s  infinite;
	}
}

//header
header{
	position: fixed;
    height: 80px;
    padding: 0;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
	transition: .7s;
	color: #fff;
	@include mq{
		height: 50px;
	}
	#gnav_btn{
		position: absolute;
		width: 80px;
		height: 80px;
		top: 0;
		left: 0;
		z-index: 99999;
		cursor: pointer;
		@include mq{
			width: 50px;
			height: 50px;
		}
		&:hover{
			transition: 0.5s;
		}
		&.open span{
			animation: nav_anim1 .5s forwards;
			&::after{
				animation: nav_anim2 .5s forwards;
			}
			&::before{
				animation: nav_anim3 .5s forwards;
			}
		}
	}
	nav{
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1000;
		overflow-y: scroll;
		color: #000000;
		height: 100%;
		@include mq{
			bottom: 0;
		}
		.allitem_header{
			background: url("../img/top/bg_menu.png"),#2d002e;
			padding-bottom: 120px;
			@include mq{
				padding-bottom: 100px;
			}
		}
		.allitem{
			color: #fff;
			&::after{
				content: none;
			}
		}
		.allitem_head{
			text-align: center;
			padding: 90px 0 80px;
			@include mq{
				padding: 90px 0 40px;
			}
			h1{
				width: 454px;
				margin: 0 auto 90px;
				@include mq{
					width: 78%;
					max-width: 300px;
					margin: 0 auto;
				}
			}
			ul{
				display: flex;
				justify-content: space-between;
				color: #fff;
				padding-top: 50px;
				max-width: 1150px;
				margin: 0 auto;
				@include mq{
					width: 100%;
					display: block;
					padding-top: 40px;
				}
				li{
					font-size: 3rem;
					padding-bottom: 10px;
					line-height: 1;
					@include mq{
						font-size: 2rem;
						margin-bottom: 30px;
					}
					&:last-child{
						@include mq{
							margin-bottom: 0;
						}
					}
					a{
						border-bottom: 1px solid #fff;
						display: inline;
						padding: 0 5px;
					}
				}
			}
		}
		#nav_back{
			background: #000;
			color: #fff;
			text-align: center;
			padding: 35px 0 60px;
			a{
				margin-bottom: 25px;
				display: block;
				img{
					width: 158px;
				}
			}
			.outside{
				padding: 10px 50px;
				border: 1px solid #fff;
				margin: 0 auto;
				display: block;
				width: 20%;
				font-size: 1.4rem;
				@include mq{
					width: 60%;
				}
			}
		}
	}
}

.allitem{
	padding: 60px 0 70px;
	position: relative;
	@include mq{
		padding: 55px 0;
	}
	&::after{
		position: absolute;
		width: 100%;
		content: url("../img/top/line_intro.svg");
		top: 0;
		left: 0;
		transform: translateY(-50%);
	}
	.content{
		text-align: center;
		margin: 0 auto;
		max-width: 1160px;
		width: 88%;
		h2{
			font-size: 7.7rem;
			margin-bottom: 40px;
			line-height: 1;
			@include mq{
				font-size: 4.8rem;
				margin-bottom: 30px;
			}
		}
		ul{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			li{
				width: 22.4%;
				margin-bottom: 30px;
				@include mq{
					width: 48%;
				}
				p{
					font-size: 3rem;
					line-height: 1;
					margin-bottom: 10px;
					@include mq{
						font-size: 2rem;
					}
				}
				figure{
					padding: 6px;
					border: 3px solid #dddab7;
					background: #fff;
					@include mq{
						padding: 4px;
					}
					img{
						border: 1px solid #dddab7;
					}
				}
				h3{
					font-size: 1.8rem;
					line-height: 1.3;
					margin-top: 10px;
					@include mq{
						font-size: 1.5rem;
					}
				}
			}
		}
		.seeall{
			margin-top: 20px;
			figure{
				margin: 0 auto;
				width: 284px;
				@include mq{
					width: 210px;
				}
			}
			p{
				font-size: 1.8rem;
				text-align: center;
				margin-top: 15px;
				@include mq{
					font-size: 1.4rem;
				}
			}
		}
	}
}

#collabo{
	background: url("../img/top/bg_intro.png");
	aside{
		font-size: 1.2rem;
		margin: 10px 20px;
		line-height: 1.2;
		@include mq{
			font-size: 1rem;
			text-align: center;
			margin: 10px auto 0;
			width: 95%;
		}
	}
	#intro{
		background: url("../img/top/bg_jolyen.png") right no-repeat;
		background-size: contain;
		padding-bottom: 160px;
		@include mq{
			padding-bottom: 70px;
			background: none;
		}
		.content{
			text-align: center;
			width: 90%;
			margin: 0 auto;
			h1{
				font-size: 5rem;
				font-weight: 600;
				padding: 160px 0 70px;
				line-height: 1.3;
				position: relative;
				@include mq{
					padding: 100px 0 60px;
					font-size: 2.8rem;
				}
				&::before{
					position: absolute;
					content: url("../img/top/ico_tatoo.svg");
					width: 50px;
					top: 70px;
					left: 50%;
					transform: translateX(-50%);
					@include mq{
						width: 40px;
						top: 40px;
					}
				}
				&::after{
					position: absolute;
					content: "";
					background: #000;
					width: 40px;
					height: 1px;
					bottom: 30px;
					left: 50%;
					transform: translateX(-50%);
					@include mq{
						width: 30px;
						bottom: 30px;
					}
				}
			}
			p{
				font-size: 1.8rem;
				line-height: 2.2;
				@include mq{
					font-size: 1.4rem;
				}
			}
		}
	}
}

#gallery{
	position: relative;
	&::after{
		position: absolute;
		width: 90px;
		content: url("../img/top/ico_tatoostar.svg");
		top: 0;
		left: 50%;
		transform: translate(-50%,-50%);
		@include mq{
			width: 60px;
		}
	}
}

#products{
	.products_txt{
		margin: 80px auto 0;
		width: 498px;
		@include mq{
			max-width: 260px;
			width: 80%;
			margin: 50px auto 30px;
		}
	}
	ul{
		li{
			display: flex;
			align-items: center;
			background: #fff;
			padding: 100px 0;
			position: relative;
			&::after{
				position: absolute;
				content: url("../img/top/line1.svg");
				bottom: 0;
				left: 0;
				width: 100%;
				transform: translateY(50%);
				z-index: 4;
			}
			@include mq{
				display: block;
				padding: 0; 
			}
			
			.item_img{
				width: 50%;
				@include mq{
					width: 100%;
				}
			}
			.item_txt{
				width: 50%;
				padding: 30px 6%;
				@include mq{
					width: 84%;
					margin: 0 auto;
					padding: 40px 0;
				}
				a{
					display: block;
				}
				.item_detail{
					margin-top: 40px;
					position: relative;
					@include mq{
						margin-top: 30px;
					}
					h2{
						font-size: 7rem;
						line-height: 1.3;
						margin-bottom: 5px;
						@include mq{
							font-size: 3.2rem;
						}
						span{
							font-size: 3rem;
							@include mq{
								font-size: 1.8rem;
							}
						}
					}
					.name{
						font-size: 1.6rem;
						font-weight: 600;
						margin-bottom: 30px;
						@include mq{
							font-size: 1.3rem;
							margin-bottom: 20px;
						}
						span{
							font-size: 2rem;
							margin-right: 15px;
							@include mq{
								font-size: 1.4rem;
							}
						}
					}
					dl{
						font-size: 1.9rem;
						padding-bottom: 55px;
						position: relative;
						@include mq{
							font-size: 1.3rem;
							padding-bottom: 40px;
						}
						&::before{
							position: absolute;
							bottom: 23px;
							left: 0;
							height: 3px;
							width: 100%;
							border-radius: 100000px;
							background: #000;
							content: "";
							@include mq{
								bottom: 18px;
							}
						}
						&::after{
							position: absolute;
							bottom: 24px;
							left: 1%;
							height: 1px;
							width: 98%;
							border-radius: 100000px;
							background: #fff;
							content: "";
							@include mq{
								bottom: 19px;
							}
						}
						dt{
							margin-bottom: 10px;
							font-weight: 600;
							line-height: 1.2;
							@include mq{
								margin-bottom: 5px;
							}
						}
						dd{
							font-weight: 600;
							line-height: 1.2;
						}
					}
					a.fwari{
						position: absolute;
						width: 134px;
						right: -10px;
						bottom: 50px;
						@include mq{
							width: 95px;
							bottom: auto;
							top: -80px;
						}
					}
				}
				.intro{
					font-size: 1.4rem;
					line-height: 2.2;
					@include mq{
						font-size: 1.3rem;
					}
				}
			}
			&:nth-child(2n){
				background: #2d002e;
				flex-direction: row-reverse;
				color: #fff;
				position: relative;
				&::after{
					position: absolute;
					content: url("../img/top/line2.svg");
					bottom: 0;
					left: 0;
					width: 100%;
					transform: translateY(50%);
					z-index: 4;
				}
				.item_txt{
					.item_detail{
						dl{
							&::before{
								position: absolute;
								bottom: 23px;
								left: 0;
								height: 3px;
								width: 100%;
								border-radius: 100000px;
								background: #fff;
								content: "";
								@include mq{
									bottom: 18px;
								}
							}
							&::after{
								position: absolute;
								bottom: 24px;
								left: 1%;
								height: 1px;
								width: 98%;
								border-radius: 100000px;
								background: #2d002e;
								content: "";
								@include mq{
									bottom: 19px;
								}
							}
						}
					}
				}
			}
		}
	}
}

#style{
	background: url("../img/top/bg_black.png") , #000;
	h2{
		width: 250px;
		text-align: center;
		background-size: cover;
		margin: 0 auto;
		padding: 140px 0 30px; 
		@include mq{
			padding: 60px 0 30px;
			width: 160px;
		}
	}
}

#allitem_footer{
	background: url("../img/top/bg_intro.png");
	padding-top: 80px;
	@include mq{
		padding-top: 40px;
	}
}

#map{
	h3{
		position: relative;
		width: 277px;
		margin: 0 auto;
		z-index: 3;
		@include mq{
			width: 110px;
		}
	}
	.iframe{
		width: 100%;
    	margin: -138px auto -10px;
		@include mq{
			height: 500px;
			margin: -55px auto -10px;
		}
		.mono{
			-webkit-filter: grayscale(1);
    		filter: grayscale(1);
		}
	}
}

#footer{
	background: #000;
	background-size: cover;
	color: #fff;
	padding-bottom: 50px;
	@include mq{
		background-size: contain;
	}
	.footer_inner{
		margin: 0 auto 0;
		padding-top: 50px;
		@include mq{
			margin: 0 auto;
			padding-top: 40px;
		}
		.shop{
			width: 88%;
			max-width: 900px;
			margin: 0 auto;
			ul{
				display: flex;
				flex-wrap: nowrap;
				padding: 30px 0 40px;
				justify-content: center;
				@include mq{
					display: block;
					padding: 0;
				}
				li{
					border-left: 1px solid #fff;
					padding: 5px 20px;
					font-size: 1.2rem;
					@include mq{
						margin-bottom: 20px;
						width: 100%;
					}
					&:first-child{
						border-left: none;
						padding-right: 0;
					}
					&.flag{
						width: 18%;
						font-size: 1.4rem;
						padding-left: 0;
						letter-spacing: 1px;
						@include mq{
							width: 100%;
							margin-bottom: 30px;
						}
					}
					h3{
						font-size: 2rem;
						margin-bottom: 20px;
						letter-spacing: 2px;
					}
					p{
						margin-bottom: 10px;
						&:last-child{
							margin-bottom: 0;
						}
					}
					a{
						padding: 5px 5px 5px 6px;
						border: 1px solid #fff;
						margin-left: 10px;
						color: #fff;
						font-size: 1.2rem;
					}
				}
			}
			.shop_tel{
				width: 90%;
				margin: 0 auto;
				display: flex;
				font-size: 2.2rem;
				text-align: center;
				justify-content: space-between;
				color: #fff;
				@include mq{
					width: 100%;
					display: block;
					font-size: 1.4rem;
				}
				a{
					width: 48%;
					padding: 20px 10px;
					line-height: 1.2;
					background: #333;
					@include mq{
						width: 100%;
						margin-bottom: 10px;
						display: block;
						padding: 10px;
					}
					img{
						width: 20px;
						margin-right: 8px;
						margin-top: 1px;
						@include mq{
							width: 13px;
							margin-right: 6px;
							margin-top: 0;
						}
					}
					&:nth-child(2){
						img{
							width: 24px;
							margin-right: 8px;
							margin-top: 3px;
							@include mq{
								width: 15px;
								margin-top: 1px;
							}
						}
					}
				}
			}
		}
		.footer_2box{
			margin: 80px auto 70px;
			@include mq{
				margin: 95px auto 60px;
			}
			ul{
				display: flex;
				@include mq{
					display: block;
				}
				li{
					width: 50%;
					background: #333;
					@include mq{
						width: 93.333%;
						margin: 0 auto 10px;
						&:last-child{
							margin-bottom: 0;
						}
					}
					figure{
						position: relative;
					}
					h3{
						position: absolute;
						top: 50%;
						left: 100%;
						transform: translate(-50%,-50%);
						background: #fff;
						padding: 10px 20px 5px 25px;
						font-size: 3rem;
						line-height: 1;
						color: #000;
						letter-spacing: 1rem;
						@include mq{
							top: 0;
							left: 50%;
							font-size: 1.8rem;
							letter-spacing: 0.5rem;
							padding: 8px 12px 6px 15px;
						}
					}
					@include ml{
						&:first-child{
							border-right: 1px solid #fff;
						}
					}
					p{
						width: 83%;
						margin: 0 auto;
						padding: 45px 0 70px;
						@include mq{
							font-size: 1.2rem;
							padding: 25px 0;
						}
					}
				}
			}
		}
		.sns{
			border: 1px solid $gold;
			text-align: center;
			position: relative;
			width: 88%;
			max-width: 900px;
			margin: 0 auto;
			article{
				border: 1px solid $gold;
				margin: 0.25% auto;
				width: 99.5%;
				padding: 60px;
				@include mq{
					padding: 25px 25px 15px;
				}
			}
			h3{
				font-size: 5.2rem;
				line-height: 1;
				background: #000;
				padding: 0 20px;
				position: absolute;
				top: 0;
				left: 50%;
				transform: translate(-50%,-50%);
				color: $gold;
				@include mq{
					font-size: 2.8rem;
				}
			}
			p{
				@include mq{
					font-size: 1.2rem;
				}
			}
			.link_app{
				text-align: center;
				font-size: 1.2rem;
				margin-bottom: 40px;
				color: $gold;
				position: relative;
				margin-top: 60px;
				@include mq{
					margin-top: 40px;
					font-size: 1.4rem;
					margin-bottom: 30px;
				}
				&::after{
					position: absolute;
					top: -30px;
					left: 50%;
					transform: translateX(-50%);
					content: "";
					background: #fff;
					width: 50px;
					height: 1px;
					@include mq{
						top: -20px;
					}
				}
			}
			.link_icos{
				display: flex;
				justify-content: space-between;
				width: 80%;
				flex-wrap: wrap;
				margin: 0 auto;
				align-items: center;
				@include  mq{
					width: 70%;
				}
				li{
					a{
						display: block;
					}
					&:nth-child(1),&:nth-child(2),&:nth-child(4),&:nth-child(6){
						img{
							width: 48px;
						}
					}
					&:nth-child(3),&:nth-child(5){
						img{
							width: 40px;
						}
					}
					@include mq{
						margin-bottom: 20px;
						width: 33.333%;
					}
				}
			}
		}
		.footer_content{
			width: 88%;
			max-width: 900px;
			padding: 3%;
			display: flex;
			font-size: 1.4rem;
			margin: 35px auto 35px;
			border: 1px solid #fff;
			h4{
				width: 14%;
				border-right: 1px solid #fff;
				@include mq{
					width: 40%;
				}
			}
			ul{
				padding: 0 6%;
				display: flex;
				flex-wrap: wrap;
				width: 86%;
				@include mq{
					width: 60%;
					display: block;
				}
				li{
					width: 25%;
					@include mq{
						width: 100%;
					}
				}
			}
		}
		.footer_logo{
			text-align: center;
			margin: 60px auto 25px;
			width: 116px;
		}
		.footer_copy{
			text-align: center;
			font-size: 1.4rem;
		}
	}
}

#pan{
	background: #000;
	margin-bottom: 120px;
	@include mq{
		margin-bottom: 105px;
	}
	ul{
		width: 95%;
		font-size: 1.4rem;
		display: flex;
		color: #fff;
		margin: 0 auto;
		@include mq{
			font-size: 1.2rem;
		}
		li{
			margin: 10px 5px;
			line-height: 1;
		}
	}
}