@charset "utf-8";
@import "function";

$gothic: 'Noto Sans JP', sans-serif;
/* Thin 100、Light 300、Regular 400、Medium 500 */

$minchou: 'Noto Serif JP', serif;
/* Extra-light 200、Light 300、Regular 400、Medium 500、Semi-bold 600、Bold 700 */

$vollkorn: 'Vollkorn', serif;
/* Regular 400、Regular 400 italic、Medium 500、Medium 500 italic */






/*! ALL ***************************************************/

html{
    font-size: 62.5%;  /* 62.5% 10px 1em */
    //scroll-behavior: smooth; //スクロール
}


body {
   color:$black;
   font-family:$gothic;
   font-size: 1.5rem;
   font-weight:400;
   line-height:1.8;
   background: #fff;
   min-width:1200px;
   -webkit-text-size-adjust: none;
   //font-feature-settings : "pkna";
}

img{
    vertical-align: top;
    max-width: 100%;
    height: auto;
}

h1,h2,h3,h4,h5,em{
	font-family: $minchou;
	font-weight: 500;
	line-height: 1.6;
}



.animation{
  transform: translate(0px, 10px);
  opacity: 0;
  transition: opacity 1s ease,transform 1s ease;
  backface-visibility: hidden;

  &.active{
  transform: translate(0%, 0%);
  opacity: 1;
  }
}


a{
	color: $black;
    text-decoration: none;
    border: 0;
    transition: all 0.2s ease;
    backface-visibility: hidden;


    img{
		transition: all 0.2s ease;
		backface-visibility: hidden;
    }


    &:hover{

        img{

        }
    }
}


#wrap{
    position: relative;
    width: 100%;
    //max-width: 1400px;
    overflow: hidden;
    padding-top: 98px;
}

@media screen and (max-width:740px)  {
#wrap{
    padding-top: 64px;
}
}//media


img.cover, video.cover {
	object-fit: cover;
	max-width: none;
}



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

    body {
       min-width:320px;
       font-size: 1.4rem;
    }

    img {
        max-width:100%;
        height:auto;
    }
    .pc{
        display: none !important;
    }

}//sp @media



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

.tel{
	pointer-events: none;

	span{
		font-family: 'Century',serif;
	}
}
@media screen and (max-width:740px)  {
.tel{
	pointer-events: auto;
}
}//media


#header_bg{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 98px;
	background: #fff;
	z-index: 80;
	pointer-events: none;
	opacity: 0;

	&.slide-open{
		opacity: 1;
	}
}



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

#header_bg{
	top: 0px;
	width: 100%;
	height: 64px;
}

}//media




header{
	position:relative;
	width: 100%;


	#seo{
		position: absolute;
		z-index: 10;
		left: 0;
		top: 98px;
		width: 90px;
		height: 650px;
		background: #fff;

		display: flex;
		justify-content: center;
		align-items: center;

		span{
			writing-mode: vertical-rl;
			-ms-writing-mode: tb-rl;
			-webkit-writing-mode:vertical-rl;
			font-size: 1rem;
		}
	}

	.header_content{
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
		width: 100%;
		min-width: 1200px;
		padding-right: 98px;
		box-sizing: border-box;
		height: 98px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		backface-visibility: hidden;

		&:before{
			content: "";
			@include cover;
			background: #fff;
		}

		&.slide-open{

			&:before{
				opacity: 0;
			}

			.logo{


				a:before{
					opacity: 1;
				}
			}

			.salon_contact{

					.item{

						em{
							color:#f9d99f;
							transition: all 1s ease;
						}

					.tel{

						.icon-tel{
							color: #f9d99f;
							margin-right: 0px;
							transition: all 1s ease;
						}

						span{
							color:#f9d99f;
							transition: all 1s ease;
						}
					}
					.rsv{

						.icon-mail{
							color: #f9d99f;
							transition: all 1s ease;
						}
						span{
							color: #f9d99f;
							transition: all 1s ease;
						}
					}
				}
				.item:before {
							color: #f9d99f;
							transition: all 1s ease;
				}
			}
		}

		.logo{
			padding-left: 20px;
			position: relative;
			z-index: 10;
			margin-right: auto;

			a{
				display: block;
				position: relative;

				&:before{
					content: "";
					@include cover;
					background: url(../img/logo_color.png) no-repeat center center;
					background-size: 100% 100%;
					transition: all 0.8s ease 0.3s;
					backface-visibility: hidden;
					opacity: 0;
				}
			}
			a:hover:before{
				filter: brightness(120%);
			}
		}
		.salon_contact{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			position: relative;
			z-index: 100;
			padding-right: 25px;

			.item{
				display: flex;
				justify-content: center;
				align-items: center;
				em{
					font-size: 1.3rem;
					padding-right: 10px;
				}
				.tel{
					display: flex;
					justify-content: center;
					align-items: center;
					padding-right: 15px;



					.icon-tel{
						color: $red;
						margin-right: 0px;
					}

					span{
						font-size: 1.5rem;
						font-family:Century;
					}
				}
				.rsv{
					display: flex;
					justify-content: center;
					align-items: center;

					&:hover{
						color: $red;
					}

					.icon-mail{
						color: $red;
						margin-right: 3px;
					}
					span{
						font-family: $minchou;
						font-size: 1.1rem;
						font-weight: 500;
						transition: all 0.2s ease;
						backface-visibility: hidden;
					}
				}
			}
			.item + .item:before{
				content: "/";
				margin: 0 10px;
			}

		}

	}

	#slidemenuBtn{
		position: fixed;
		right: 0;
		top: 0;
		width: 98px;
		height: 98px;
		@include black;
		z-index: 110;

		&.slide-open{
			span{
				&:before{
					top: 50%;
					transform: rotate(24deg);
					transition: top 0.2s ease,transform 0.2s ease 0.2s;
					backface-visibility: hidden;
				}
				&::after{
					top: 50%;
					transform: rotate(-24deg);
					transition: top 0.2s ease,transform 0.2s ease 0.2s;
					backface-visibility: hidden;
				}
			}
			small{

			}
		}

		span{
			width: 36px;
			height: 12px;
			position: absolute;
			left: 31px;
			top: 34px;

			&:before{
				content: "";
				width: 100%;
				height: 1px;
				background: #f9d99f;
				position: absolute;
				left: 0;
				top: 0;
				transition:transform 0.2s ease, top 0.2s ease 0.2s;
				backface-visibility: hidden;
			}
			&:after{
				content: "";
				width: 100%;
				height: 1px;
				background: #f9d99f;
				position: absolute;
				right: 0;
				bottom: 0;
				transition:transform 0.2s ease, top 0.2s ease 0.2s;
				backface-visibility: hidden;
			}
		}
		small{
			position: absolute;
			left: 0;
			bottom: 33px;
			width: 100%;
			text-align: center;
			font-size: 1rem;
			font-family: $minchou;
			color: #f9d99f;
			line-height: 1;
			letter-spacing: 2px;
			transition: all 0.2s ease;
			backface-visibility: hidden;
		}
	}

}




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

header{
	position:fixed;
	left: 0;
	top: 0;
	z-index: 100;
	width: 100%;
	transition: all 0.2s ease;
	backface-visibility: hidden;

	&.on{
		top: -20px;
	}

	#seo{
		position:static;
		width: 100%;
		height: auto;
		background: #f5f5f5;
		display:block;
		white-space: nowrap;
		padding: 5px;
		line-height: 1;
		box-sizing: border-box;
		text-align: center;

		span{
			display: block;
			font-family: $gothic;
			line-height: 1;
			writing-mode: horizontal-tb;
			-ms-writing-mode: lr-tb;
			-webkit-writing-mode:horizontal-tb;
			font-size: 1rem;
			font-weight: 300;
		}
	}

	.header_content{
		width: 100%;
		padding-right: 0;
		height: 64px;
		position: relative;

		.logo{
			padding-left: 10px;

			img{
				width: auto;
				height: 44px;
			}
		}
		.salon_contact{
			display: none;
		}

	}

	#slidemenuBtn{
		position: absolute;
		top: 20px;
		width: 64px;
		height: 64px;



		span{
			width: 30px;
			height: 12px;
			position: absolute;
			left: 17px;
			top: 17px;

		}
		small{
			bottom: 16px;
			font-size: 1rem;
			letter-spacing: 1px;
		}
	}

}

}//media







#main_title{
	padding-left: 90px;
	width:100%;
	//max-width: 1400px;
	box-sizing: border-box;
	display: flex;
	justify-content:flex-start;
	background: url(../img/bg_black.png) repeat 0 0;
	background-size: 340px 340px;


	.swiper-container{
		width: 57.25%;

		.swiper-wrapper{

			.swiper-slide{
				background: no-repeat center center;
				background-size: cover;

				&#slide01{
					background-image:url(../../img/slide01.jpg);
				}
				&#slide02{
					background-image:url(../../img/slide02.jpg);
				}
				&#slide03{
					background-image:url(../../img/slide03.jpg);
				}

			}
		}
		.swiper-pagination{
			bottom: auto;
			left: auto;
			top: 0;
			right: 0;
			text-align: right;
			padding-right: 10px;

			.swiper-pagination-bullet{
				border-radius: 0;
				background: #fff;
				opacity: 0.8;

				&.swiper-pagination-bullet-active{
					background: $champagne;
					opacity: 1;
				}

			}
		}
		.swiper-text{
			position: absolute;
			left: 20px;
			bottom: 20px;
			z-index: 10;
		}


	}
	.image-rights{
		width: 42.75%;


		.campaign{
			width: 100%;
			padding-bottom: 74.821%;

			position: relative;

			a{
				@include cover;
				z-index: 100;
				background: url(../img/bg_black.png) repeat 0 0;
				background-size: 340px 340px;
				z-index: 10;
				transition: all 0.2s ease;
				backface-visibility: hidden;
				opacity: 1;
			}
			a:hover{
				opacity: 0.9;

				& ~ .campaign_txt{
					filter: brightness(200%);
				}

			}
			.campaign_txt{
				position: absolute;
				left: 50%;
				top: 50%;
				z-index: 10;
				transform: translate(-50%,-50%);
				text-align: center;
				color: #ffe8b8;
				pointer-events: none;
				transition: all 0.4s ease;
				backface-visibility: hidden;

				em{
					display: block;
					width: 400px;
					margin: 0 auto;
					border-top: #ffe8b8 solid 1px;
					border-bottom: #ffe8b8 solid 1px;
				}
				p{
					font-size: 1.7rem;
					font-family: $minchou;
					padding-top: 10px;
					line-height: 1.8;
				}
				h3{
					font-size: 4.4rem;
					line-height: 1.3;
					letter-spacing: -0.06em;

				}
			}
			.more{
				position: absolute;
				right: 30px;
				bottom: 0px;
				z-index: 10;
				text-align: center;

				span{
					color: #ffe8b8;
					display: block;
					line-height: 1;
					font-family: $minchou;
					position: relative;
					top: 20px;
				}
				.icon-more{
					display: block;
					line-height: 1;
					font-size: 6rem;
					color: #ffe8b8;
				}
			}

		}
		.bottom-image{
			display: flex;
			justify-content: center;
			align-items: center;

			img{
				width: 100%;
			}
		}
	}

}






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

#main_title{
	padding-left: 0px;
	width:100%;
	box-sizing: border-box;
	flex-direction :column;
	background: #fff;

	.swiper-container{
		width: 100%;
		height: 97.86vw;

		.swiper-text{
			position: absolute;
			left: 20px;
			bottom: 20px;
			z-index: 10;

			width: calc(100% - 40px);
			text-align: center;

			img{
				max-width: 358px;
				height: auto;
			}
		}


	}
	.image-rights{
		width: 100%;


		.campaign{
			width: 100%;
			padding-bottom: 240px;


			.campaign_txt{

				em{
					font-size: 1rem;
					width: 200px;
				}
				p{
					font-size: 1.3rem;
					padding-top: 10px;
					line-height: 1.6;
				}
				h3{
					font-size: 2.6rem;
					line-height: 1.3;
					letter-spacing: -0.06em;
					white-space: nowrap;

				}
			}
			.more{
				right: 10px;
				bottom: 0px;

				span{
					top: 10px;
					font-size: 1rem;
				}
				.icon-more{
					font-size: 4rem;
				}
			}


		}

	}

}

}//media


















#welcome{
	width: 100%;
	@include black;
	position: relative;
	z-index: 10;
	margin-bottom: 120px;

	.inner{
		padding: 50px 50px 0;

		h2{
			text-align: center;
			margin-bottom: 50px;

			em{
				display: inline-block;
				font-size: 2.5rem;
				font-weight: 500;
				position: relative;

				background: linear-gradient( to right,  rgba(243, 203, 132, 1) 10%, rgba(255, 230, 181, 1) 50% ,rgba(243, 203, 132, 1) 90% );
				-webkit-background-clip: text;
				color: transparent;

				&:before{
					content: "";
					position: absolute;
					left: calc(100% + 20px );
					top: 50%;
					width: 66px;
					height: 1px;
					background: #f1c782;
				}
				&::after{
					content: "";
					position: absolute;
					right: calc(100% + 20px );
					top: 50%;
					width: 66px;
					height: 1px;
					background: #f1c782;
				}
			}

			@media all and (-ms-high-contrast: none){
			  em {
			    background: none;
			    color: #ffe8b8;
			  }
			}
			small{
				display: block;
				line-height: 1;
				text-align: center;
				font-size: 1.25rem;
				font-weight: 500;
				letter-spacing: 2px;
				color: #ffe8b8;
				background: linear-gradient( to right,  rgba(243, 203, 132, 1) 10%, rgba(255, 230, 181, 1) 50% ,rgba(243, 203, 132, 1) 90% );
				-webkit-background-clip: text;
				color: transparent;
			}

			@media all and (-ms-high-contrast: none){
			  small {
			    background: none;
			    color: #ffe8b8;
			  }
			}


		}

		.shield_box{
			display: flex;
			justify-content: center;
			align-items: center;

			.text{
				text-align: center;
				margin-right: 7.1vw;

				h3{
					line-height: 1.3;

					small{
						display: block;
						font-size: 2.1rem;
						font-weight: 500;
						background: linear-gradient( to right,  rgba(243, 203, 132, 1) 10%, rgba(255, 230, 181, 1) 50% ,rgba(243, 203, 132, 1) 90% );
				-webkit-background-clip: text;
				color: transparent;
					}

					em{
						display: block;
						font-size: 3.3rem;
						font-weight: 500;
						background: linear-gradient( to right,  rgba(243, 203, 132, 1) 10%, rgba(255, 230, 181, 1) 50% ,rgba(243, 203, 132, 1) 90% );
				-webkit-background-clip: text;
				color: transparent;

					}

					@media all and (-ms-high-contrast: none){
					  small,em {
					    background: none;
					    color: #ffe8b8;
					  }
					}


				}

				h3 + small{
					display: block;
					font-family: $minchou;
					font-size: 1.1rem;
					letter-spacing: 1px;
					padding: 10px 0;
					font-weight: 500;
					background: linear-gradient( to right,  rgba(243, 203, 132, 1) 10%, rgba(255, 230, 181, 1) 50% ,rgba(243, 203, 132, 1) 90% );
					-webkit-background-clip: text;
					color: transparent;
				}
				p{
					display: block;
					font-family: $minchou;
					font-size: 1rem;
					letter-spacing: 1px;
					padding: 10px 0;
					font-weight: 500;
					background: linear-gradient( to right,  rgba(243, 203, 132, 1) 10%, rgba(255, 230, 181, 1) 50% ,rgba(243, 203, 132, 1) 90% );
					-webkit-background-clip: text;
					color: transparent;
				}

					@media all and (-ms-high-contrast: none){
					  h3 + small,p {
					    background: none;
					    color: #ffe8b8;
					  }
					}

			}

			.ranking{
				display: flex;
				justify-content: center;
				align-items: center;

				figure + figure{
					margin-left: 20px;
				}
			}



		}

	}

	.covid-19-banner{
		width: calc(100% - 180px);
		max-width: 1220px;
		margin: 0 auto;
		transform: translateY(50%);

		a{
			width: 100%;
			height: 82px;
			display: flex;
			justify-content: center;
			align-items: center;
			@include gold;

			&:hover{
				filter: brightness(120%);
			}

			span{
				font-family: $minchou;
				font-size: 1.9rem;
				font-weight: 500;
			}
			.icon-more{
				position: absolute;
				right: 20px;
				top: 0;
				line-height: 82px;
				font-size: 5rem;
			}
		}

	}





}





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

#welcome{
	margin-bottom:0px;

	.inner{
		padding: 30px 15px;

		h2{
			margin-bottom: 30px;

			em{
				display: inline-block;
				font-size: 1.5rem;
				line-height: 1.5;

				&:before{
					content: "";
					position: absolute;
					left: calc(100% + 20px );
					top: 0;
					width: 13px;
					height: 56px;
					border:#f1c782 solid 1px;
					box-sizing: border-box;
					border-left: 0;
					background: none;
				}
				&::after{
					content: "";
					position: absolute;
					right: calc(100% + 20px );
					top: 0;
					width: 13px;
					height: 56px;
					border:#f1c782 solid 1px;
					box-sizing: border-box;
					border-right: 0;
					background: none;
				}

			}

			small{
				font-size: 1rem;
				letter-spacing: 1px;
			}
		}

		.shield_box{
			flex-direction: column;

			.text{
				text-align: center;
				margin-right:0;

				h3{

					small{
						font-size: 1.6rem;
					}

					em{
						font-size: 2.5rem;

					}

				}

				h3 + small{
					font-size: 1rem;
					letter-spacing: 1px;
					padding: 10px 0;
					font-weight: 500;
				}




			}

			.ranking{
				padding-top: 20px;

				figure + figure{
					margin-left: 10px;
				}
			}
			p{
				font-size: 1rem;
				padding: 10px 0;
				position: relative;
				z-index: 10;
				color: #f1c782;
				letter-spacing: -0.06em;
			}



		}

	}

	.covid-19-banner{
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		transform: translateY(0%);

		a{
			width: 100%;
			padding: 10px 0;
			box-sizing: border-box;
			height: 82px;
			text-align: center;
			display: block;


			span{
				font-size: 1.5rem;
				letter-spacing: -0.06em;
				line-height: 1.5;
				display: block;
				text-align: center;
			}
			.icon-more{
				position: relative;
				top: -15px;
				right: auto;
				line-height: 1;
				font-size: 5rem;
			}
		}

	}

}

}//media







.vertical_sect{
	display: flex;
	justify-content: flex-start;

	.vertical_ttl{
		flex-shrink: 0;
		width: 90px;
		border-top: #000 solid 2px;
		display: flex;
		justify-content: center;

		span{
				writing-mode: vertical-rl;
				-ms-writing-mode: tb-rl;
				-webkit-writing-mode:vertical-rl;

			em{
				padding-top: 28px;
				font-size: 2.9rem;
				font-weight: 500;
				letter-spacing: 2px;
			}
			small{
				padding-top: 20px;
				color: #ce9d25;
				font-family:$vollkorn;
				font-weight: 400;
			}
		}

	}
	.section_inner{
		width: calc(100% - 90px);
	}

}


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

	.vertical_sect{
		display:block;

		.vertical_ttl{
			flex-shrink: 0;
			width: 100%;
			border-top: 0;
			padding: 40px 0;

			span{
					display: block;
					text-align: center;
					position: relative;
					padding-bottom: 20px;

					writing-mode: horizontal-tb;
					-ms-writing-mode: lr-tb;
					-webkit-writing-mode:horizontal-tb;

					&:before{
						content: "";
						position: absolute;
						left: calc(50% - 20px);
						bottom: 0;
						width: 40px;
						height: 1px;
						background: #000;
					}

				em{
					display: block;
					padding-top: 0;
					font-size: 2.8rem;
					letter-spacing: 1px;
					line-height: 1;
				}
				small{
					padding-top: 10px;
					font-size: 1rem;
				}
			}

		}
		.section_inner{
			width: 100%;
		}

	}

}//media







.btn{
	width: 293px;
	height: 58px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: $red;
	margin: 0 auto;

	span{
		color:#fff;
		font-family: $minchou;
		font-weight: 600;
		font-size: 1.6rem;
	}

	&:hover{
		filter: brightness(120%);
	}
}




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

.btn{
	width: 290px;
	height: 48px;

	span{
		font-size: 1.4rem;
	}

}

}//media



.concept_sect{
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 90px 0;

	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;

	.text{
		padding: 0 90px;
		width: 740px;
		box-sizing: border-box;


		h2{
		    display: block;
		    font-family: $vollkorn;
		    color:#ce9d25;
		    font-weight: 400;
		    letter-spacing: 4px;
		    font-style: italic;
		    font-size: 5rem;
		    line-height: 1;
		}
		h3{
			font-size: 2.9rem;
			font-weight: 600;
			padding: 20px 0 30px;
		}

		p{
			line-height: 2.2;
			padding-bottom: 2em;
		}
		.bold{
			display:inline;
			border-bottom: $champagne solid 2px;
			font-family: $minchou;
			font-size: 2rem;
			letter-spacing: 1px;
			font-weight: 600;
		}
		.btn{
			margin-left: 0;
			margin-top: 40px;
		}
	}

	figure{
		width: calc(100% - 740px);
		max-width: 570px;

		img{
			width: 100%;
		}
	}

}

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

.concept_sect{
	width: 100%;
	max-width: 100%;
	padding: 15px;
	box-sizing: border-box;
	flex-direction: column;

	.text{
		order: 1;
		padding: 15px 0;
		width:100%;
		box-sizing: border-box;
		text-align: left;


		h2{
		    letter-spacing: 2px;
		    font-size: 2.4rem;
		    text-align: center;
		}
		h3{
			font-size: 1.7rem;
			padding: 10px 0 15px;
			 text-align: center;
		}

		p{
			line-height: 2;
			padding-bottom: 1em;


		}
		.bold{
				border-bottom: $champagne solid 1px;
				font-size: 1.6rem;
				letter-spacing: 0px;
		}
		.btn{
			margin-left: auto;
			margin-top: 20px;
		}
	}

	figure{
		order: 0;
		width: 100%;
		flex-shrink: 0;
	}

}

}//media




#Campaign{
	background: #f7f3ec;


	.Campaign_list{
		display: flex;
		justify-content: flex-start;
		padding: 100px 0 50px;

		.item{
			width: 420px !important;
			margin-right: 25px;
			position: relative;

			a{
				@include cover;
			}
			figure{
				width: 100%;
				overflow: hidden;

				img{
					width: 420px;
					height: 420px;
					transition: all 0.2s ease;
					backface-visibility: hidden;
				}
			}
			a:hover ~ figure{

				img{
					transform: scale(1.1);
					filter: brightness(120%);
				}
			}
			.text{
				padding: 20px 0 0;

				h3{
					font-size: 1.9rem;
					font-weight: 600;
				}
				p{
					font-weight: 400;
					padding: 20px 0;
				}
			}
		}
	}



@media screen and (max-width:740px)  {
.Campaign_list{
		display: flex;
		justify-content: flex-start;
		padding: 0 0 40px;

		.item{
			width: 280px !important;
			margin:0 10px;
			position: relative;

			a{
				@include cover;
			}
			figure{
				width: 100%;
				overflow: hidden;

				img{
					width: 280px;
					height: 280px;
					transition: all 0.2s ease;
					backface-visibility: hidden;
				}
			}
			a:hover ~ figure{

				img{
					transform: scale(1.1);
					filter: brightness(120%);
				}
			}
			.text{
				padding: 20px 0 0;

				h3{
					font-size: 1.7rem;
				}
				p{
					padding:10px 0;
				}
			}
		}
	}
}//media






.price_box{
	display: block;
	line-height: 1;

	.limited,
	.regular{
		display: flex;
		justify-content: flex-start;
		align-items: center;

		em{
			width: 86px;
			height: 25px;
			background: $red;
			display: flex;
			justify-content: center;
			align-items: center;
			color:#fff;
			font-family: $gothic;
			font-weight: 500;
			font-size: 1.3rem;
			letter-spacing: 1px;
		}

		.price_line{
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.time{
				font-weight: 600;
				color: $red;
				padding-left: 15px;
			}
			.fee{
				padding-left: 15px;
				font-size: 2.4rem;
				color: $red;
				font-weight: 600;
				position: relative;
				top: -5px;
			}
			.other{
				font-weight: 600;
				color: $red;
				padding-left: 0.5em;
				letter-spacing: 1px;
				font-feature-settings: "palt";
				text-align: justify;
			}
		}
	}
	.regular{
		margin-top: 15px;

		em{
			background:#e2e2e2;
			color:$black;
		}
		.price_line{

			.time{
				font-weight: 500;
				color: $black;
			}
			.fee{
				font-size: 1.8rem;
				font-weight: 500;
				color: $black;
				//text-decoration: line-through;
				top: -1px;
			}
			.other{
				font-weight: 500;
				color: $black;
			}
		}
	}
}




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

	.price_box{
		display: block;
		padding-left: 0;

		.limited,
		.regular{
			display: flex;
			justify-content:flex-start;
			align-items: center;

			em{
				width: 66px;
				height: 22px;
				font-size: 1rem;
				letter-spacing: 1px;
			}

			.price_line{

				.time{
					padding-left: 10px;
				}
				.fee{
					padding-left: 10px;
					font-size: 1.8rem;
					position: relative;
					top: -2px;
				}
				.other{
					padding-left: 0.25em;
					letter-spacing: 0;
				}
			}
		}
		.regular{
			margin-left: 0px;
			margin-top: 15px;

			.price_line{

				.fee{
					font-size: 1.5rem;
				}

			}
		}
	}

}//media

}











#information{
	padding-bottom: 60px;

	.information_list{
		display: flex;
		justify-content: flex-start;
		padding: 100px 0 50px;

		.item{
			width: 258px !important;
			margin-right: 35px;
			position: relative;

			a{
				@include cover;
			}
			figure{
				width: 100%;
				overflow: hidden;

				img{
					width: 258px;
					height: 258px;
					transition: all 0.2s ease;
					backface-visibility: hidden;
				}
			}
			a:hover ~ figure{

				img{
					transform: scale(1.1);
					filter: brightness(120%);
				}
			}
			.text{
				padding: 20px 0 0;
				time{
					display: block;
					color: $champagne;
					font-size: 1.2rem;
				}
				p{
					font-weight: 400;
				}
			}
		}
	}

}




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

#information{
	padding-bottom: 40px;

	.information_list{
		display: flex;
		justify-content: flex-start;
		padding: 0px 0 40px;

		.item{
			width: 210px !important;
			margin:0 10px;
			position: relative;
			.text{
				padding: 15px 0 0;
			}

			figure{

				img{
					width: 210px;
					height: 210px;
				}
			}


		}
	}

}

}//media



#pick_up{
	background: #fdf8f2;
	padding-bottom: 80px;

	.pick_up_line{
		width: 100%;
		height: 44px;
		@include black;

		em{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 240px;
			height: 44px;
			@include gold;
			font-size: 2rem;
			font-family: $vollkorn;
			font-weight: 400;
			letter-spacing: 2px;
		}
	}
	.pick_up_inner{
		padding:0 90px;

		h2{
			color: $gold;
			line-height: 1.5;
			padding: 68px 0;
			position: relative;

			&:before{
				content: "";
				position: absolute;
				left: 0;
				bottom: 0;
				width: 90px;
				height: 2px;
				background: $gold;
			}

			small{
				display: block;
				font-size: 2.7rem;
				font-weight: 500;
			}
			em{
				display: block;
				font-size: 3.5rem;
				font-weight: 500;
				text-indent: -0.5em;
			}
		}
		.pick_up_item{
			display: flex;
			justify-content: space-between;
			max-width: 1220px;

			.text{
				width: 50%;
				padding-right: 10%;
				box-sizing: border-box;

				h3{
					font-size: 3.1rem;
					padding: 50px 0;
				}
				p{
					padding-bottom: 50px;
				}
				.btn{
					margin-left: 0;
				}
			}
			.photo{
				width: 50%;

				figure + figure{
					transform: translate(-80px,-40px);
					position: relative;
					z-index: 10;
				}
			}
		}
	}
}





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

#pick_up{
	padding-bottom: 0px;

	.pick_up_line{
		width: 100%;
		height: 26px;

		em{
			width: 50%;
			height: 26px;
			font-size: 1.2rem;
			letter-spacing: 1px;
		}
	}
	.pick_up_inner{
		padding:20px 15px;

		h2{
			line-height: 1.3;
			padding:0 0 20px;
			text-align: center;
			position: relative;

			&:before{
				content: none;
			}

			small{
				font-size: 1.5rem;
			}
			em{
				font-size:2.1rem;
				text-indent: 0em;
			}
		}
		.pick_up_item{
			flex-direction: column;
			max-width:100%;
			position: relative;
			padding-bottom: calc( 52vw + 30px );

			.text{
				order: 1;
				width: 100%;
				padding-right: 0%;
				box-sizing: border-box;

				h3{
					font-size: 1.9rem;
					padding: 20px 0;
					text-align: center;
				}
				p{
					padding-bottom: 20px;
				}
				.btn{
					margin-left:auto;
				}
			}
			.photo{
				width: 100%;

				figure{
					order: 0;
				}

				figure + figure{
					transform: translate(0px,0px);
					position:absolute;
					z-index: 10;
					left: 0;
					bottom: 0;
				}
			}
		}
	}
}

}//media




















#course{
	background: url(../img/bg_beige.jpg) repeat center center;
	background-size: 250px 250px;


	.course_inner{
		padding-top: 100px;
		max-width: 1400px;
		margin: 0 auto;

		.course_box{
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 60px;

			.course_images{
				position: relative;
				z-index: 10;
				flex-shrink: 0;
			}

			.course_box_inner{
				position: relative;
				box-sizing: border-box;

				&:before{
					content: "";
					@include cover;
					background: #fff;
					z-index: 0;
				}

				.course_name{
					padding-bottom: 60px;
					position: relative;
					z-index: 10;

					em{
						display: block;
						font-family: $vollkorn;
						color: $champagne;
						font-weight: 400;
						letter-spacing: 2px;
						font-style: italic;
						font-size: 5rem;
						line-height: 1;
					}
					h3{
						font-size: 1.9rem;
						font-weight: 700;
						padding: 10px 0;
					}
					p{
						font-family: $minchou;
						font-size: 1.6rem;
						font-weight: 600;
					}
				}//course_name

				.course_list{
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					position: relative;
					z-index: 10;

					.item{
						width: calc(50% - 20px);
						padding-bottom: 40px;

						a{
							h4{
								display: flex;
								justify-content: flex-start;


								.icon-circle{
									color: $red;
									font-size: 1.8rem;
									position: relative;
									top: 4px;
									transition: all 0.2s ease;
									backface-visibility: hidden;
								}
								em{
									transition: all 0.2s ease;
									backface-visibility: hidden;
									padding-left: 10px;
									font-size: 1.6rem;
									font-weight: 700;
								}
							}
							p{
								transition: all 0.2s ease;
								backface-visibility: hidden;
								padding-top: 10px;
								padding-left: 28px;
								font-size: 1.3rem;
							}


							&:hover{
								h4 em,p{
									color: $red;

								}
								h4{
									.icon-circle{
										filter: brightness(120%);
										transform: translateX(3px);
									}
								}
							}



						}
					}
				}//course_list

			}//course_box_inner

		}//course_box

		#course01{
			.course_box_inner{
				padding: 70px 178px 28px 58px;
				order: 0;
			}
			.course_images{
				margin-left: -120px;
				width: 36vw;
				max-width: 510px;
				order: 1;
			}

		}


		#course02{
			margin-left: -90px;
			padding-right: 90px;
			align-items: flex-start;

			.course_box_inner{
				padding: 70px 58px 28px 178px;
				order: 1;
			}
			.course_images{
				margin-top: 50px;
				margin-right: -120px;
				width: 36vw;
				max-width: 510px;
				order: 0;
			}

		}

		#course03{
			padding-right: 90px;
			align-items: flex-start;

			.course_box_inner{
				padding: 70px 178px 28px 58px;
				order: 0;
			}
			.course_images{
				margin-top: 50px;
				margin-left: -120px;
				width: 30vw;
				max-width: 420px;
				order: 1;
			}

		}

		#course04{
			padding-right: 90px;
			align-items: flex-start;

			.course_box_inner{
				padding: 70px 58px 28px 178px;
				order: 1;
			}
			.course_images{
				margin-top: 50px;
				margin-right: -120px;
				width: 30vw;
				max-width: 420px;
				order: 0;
			}

		}
		#course05{
			justify-content: space-between;

			.course_box_inner{
				padding: 70px 178px 28px 58px;
				order: 0;

				.item{
					width: 50%;
				}
			}
			.course_images{
				margin-left:-400px;
				width: 56vw;
				max-width: 791px;
				order: 1;
			}

		}

/*
		#course06{
			margin-left: 0px;
			padding-right: 90px;
			align-items: flex-start;

			.course_box_inner{
				padding: 70px 58px 28px 178px;
				order: 1;
			}
			.course_images{
				margin-top: 50px;
				margin-right: -120px;
				width: 30vw;
				max-width: 420px;
				order: 0;
			}

		}
*/
#course06{
			padding-right: 90px;
			align-items: flex-start;

			.course_box_inner{
				padding: 70px 178px 28px 58px;
				order: 0;
			}
			.course_images{
				margin-top: 50px;
				margin-left: -120px;
				width: 30vw;
				max-width: 420px;
				order: 1;
			}

		}


	}
}






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

#course{


	.course_inner{
		padding-top:0px;
		max-width: 100%;
		width: 100%;
		overflow: hidden;

		.course_box{
			display:block;
			margin-bottom: 20px;
			position: relative;

			.course_images{
				position:absolute;
				right: 0;
				top: 0;
				z-index: 10;
				flex-shrink: 0;
				margin:0px !important;

				width: 40vw !important;
				max-width: 40vw !important;
				padding-top: 25px;
			}

			.course_box_inner{
				position:static;
				background: #fff;
				margin-left: 5px;
				margin-right: 25px;
				padding: 25px 15px 15px !important;

				&:before{
					content: none;
				}

				.course_name{
					width: 60%;
					padding: 0px 0 20vw;
					box-sizing: border-box;
					position: relative;
					z-index: 10;

					em{
						letter-spacing: 1px;
						font-size: 1.6rem;
					}
					h3{
						font-size: 1.7rem;
						font-weight: 700;
						padding:0px 0 10px;
					}
					p{
						font-family: $minchou;
						font-size: 1.3rem;
						font-weight: 600;
					}
				}//course_name

				.course_list{

					.item{
						width:100% !important;
						padding-bottom: 20px;

						a{
							h4{
								display: flex;
								justify-content: flex-start;


								.icon-circle{
									font-size: 1.5rem;
									top: 5px;
								}
								em{
									transition: all 0.2s ease;
									backface-visibility: hidden;
									padding-left: 10px;
									font-size: 1.5rem;
									font-weight: 700;
								}
							}
							p{
								padding-top: 5px;
								padding-left: 25px;
								font-size: 1.2rem;
							}


							&:hover{
								h4 em,p{
									color: $red;

								}
								h4{
									.icon-circle{
										filter: brightness(120%);
										transform: translateX(3px);
									}
								}
							}



						}
					}
				}//course_list

			}//course_box_inner

		}//course_box

		#course01,
		#course03,
		#course06{
			padding-right: 0;

			.course_images{

				figure + figure{
					display: none;
				}
			}

		}


		#course02,
		#course04{
			margin-left: 0;
			margin-right: 0;
			padding: 0;

			.course_box_inner{
				    margin-left: 25px;
					margin-right: 5px;

				.course_name{
					margin-left: auto;
				}
			}
			.course_images{
				right: auto;
				left: 0;

			}

		}
	}
}

}//media











#salon{
	.salon_box{
		width: 100%;
		max-width: 1310px;
		padding: 100px 90px 100px 0;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		margin: 0 auto;

		.item{
			width: 50%;
			figure{
				width: 100%;
				overflow: hidden;
				a{
					display: block;

					img{
						width: 100%;
						height: auto;
						transition: all 0.2s ease;
						backface-visibility: hidden;
					}

				}
				a:hover{
					img{
						transform: scale(1.1);
						filter: brightness(120%);
					}
				}

			}
			.text{
				text-align: center;
				letter-spacing: 1px;

				h3{
					font-family: $vollkorn;
					font-size: 3rem;
					font-weight: 400;
					font-style: italic;
					line-height: 1;
					color: $champagne;
					padding: 30px 0;
				}
				h4{
					font-weight: 600;
					font-size: 1.9rem;
					line-height: 1;
				}
				.tel{
					.icon-tel{
						font-size: 2rem;
						position: relative;
						top: 1px;
					}
					span{
						font-size: 2.2rem;
					}
				}
				p{
					padding-top: 30px;
				}
				.btn{
					margin-top: 30px;
				}
			}

		}

	}
}




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

	#salon{
		.salon_box{
			width: 100%;
			max-width:100%;
			padding: 0 15px;
			box-sizing: border-box;
			display: block;

			.item{
				width: 100%;
				padding-bottom: 20px;

				.text{
					text-align: center;
					letter-spacing: 1px;

					h3{
						font-size: 2.4rem;
						padding: 20px 0;
					}
					h4{
						font-size: 1.7rem;
					}

					p{
						padding-top: 10px;
						font-size: 1.3rem;
					}
					.btn{
						margin-top: 15px;
					}
				}

			}

		}
	}

}//media





#Recruit{
	position: relative;
	display: flex;
	justify-content: center;

	a{
		@include cover;
	}
	a:hover ~ figure,
	a:hover ~ .text{
		filter: brightness(110%);
	}
	figure{
		width: 50%;
		height: 410px;
		background: url(../../img/resruit.jpg) no-repeat center center;
		background-size: cover;
		transition: all 0.2s ease;
		backface-visibility: hidden;

	}
	.text{
		width: 50%;
		background: #f7f3ec;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.2s ease;
		backface-visibility: hidden;

		.inner{
			text-align: center;

			h3{
				padding-bottom: 25px;

				em{
					display: block;
					padding: 10px 0 0;
					line-height: 1;
					font-size: 4.4rem;
					font-weight: 400;
					letter-spacing: 2px;
					font-family: $vollkorn;
					font-style: italic;
					color: $gold;
				}
				small{
					display: block;
					font-family: $minchou;
					font-weight: 600;
					font-size: 1.9rem;
				}

			}
		}
	}

}





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

#Recruit{
	flex-direction: column;


	figure{
		width: 100%;
		height: auto;
		padding-bottom: 58%;

	}
	.text{
		width: 100%;
		display:block;
		padding-bottom: 25px;

		.inner{

			>em{
				display: block;
				margin-top: -20px;
			}

			h3{
				padding-bottom: 25px;

				em{
					padding: 10px 0 0;
					font-size: 2.4rem;
					letter-spacing: 1px;
				}
				small{
					font-size: 1.7rem;
				}

			}
		}
	}

}

}//media













#banner{
	background:url(../img/bg_gold2.jpg) repeat left center;
	background-size: 1400px auto;
	padding: 55px;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.item{
		width: calc(50% - 25px);

		a{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 265px;
			@include black;
			transition: all 0.2s ease;
			backface-visibility: hidden;

			&:hover{
				filter: brightness(120%);
			}

			span{
				color: $champagne;
				display: block;
				text-align: center;

				.icon-mark{
					font-size: 8rem;
					height: 100px;
					display: block;
				}
				.icon-award{
					font-size: 8rem;
					height: 100px;
					display: block;
				}

				em{
					display: block;
					line-height: 1;
					font-size: 2.1rem;
					font-weight: 600;
					padding-bottom: 10px;
				}
				small{
					display: block;
					line-height: 1;
					font-size: 1.1rem;
					font-family: $minchou;
					font-weight: 500;

				}
			}
		}
	}

}


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

#banner{
	padding: 15px;
	flex-direction: column;

	.item{
		width:100%;

		a{
			height: 148px;

			span{
				color: $champagne;
				display: block;
				text-align: center;

				.icon-mark{
					font-size: 5rem;
					height: 60px;
				}
				.icon-award{
					font-size: 5rem;
					height: 60px;
				}

				em{
					font-size: 1.6rem;
					padding-bottom: 10px;
				}
				small{
					font-size: 1rem;

				}
			}
		}
	}
	.item + .item{
		margin-top: 15px;
	}

}

}//media














#Products{
	background: #f7f3ec;
	padding-bottom: 100px;

	.Products_list{
		display: flex;
		justify-content: flex-start;
		padding: 100px 0 50px;

		.item{
			width: 330px !important;
			margin-right: 25px;
			position: relative;

			a{
				@include cover;
			}
			figure{
				width: 100%;
				overflow: hidden;

				img{
					width: 330px;
					height: 330px;
					transition: all 0.2s ease;
					backface-visibility: hidden;
				}
			}
			a:hover ~ figure{

				img{
					transform: scale(1.1);
					filter: brightness(120%);
				}
			}
			.text{
				padding: 20px 0 0;
				em{
					display: block;
					font-family: $gothic;
					font-weight: 500;
					color: $champagne;
					font-size: 1.2rem;
				}
				p{
					font-weight:400;
				}
			}
		}
	}
}



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

#Products{
	padding-bottom: 40px;

	.Products_list{
		display: flex;
		justify-content: flex-start;
		padding: 0px 0 40px;

		.item{
			width: 210px !important;
			margin:0 10px;
			position: relative;

			figure{

				img{
					width: 210px;
					height: 210px;
				}
			}


			.text{
				padding: 15px 0 0;
			}



		}
	}

}

}//media





#blog{
	padding-bottom: 100px;

	.blog_list{
		display: flex;
		justify-content: flex-start;
		padding: 100px 0 50px;

		.item{
			width: 258px !important;
			margin-right: 35px;
			position: relative;

			a{
				@include cover;
			}
			figure{
				width: 100%;
				overflow: hidden;

				img{
					width: 258px;
					height: 258px;
					transition: all 0.2s ease;
					backface-visibility: hidden;
				}
			}
			a:hover ~ figure{

				img{
					transform: scale(1.1);
					filter: brightness(120%);
				}
			}
			.text{
				padding: 20px 0 0;
				time{
					display: block;
					font-family: $gothic;
					font-weight: 400;
					color: $champagne;
					font-size: 1.2rem;
				}
				p{
					font-weight: 400;
				}
			}
		}
	}
}


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

#blog{
	padding-bottom: 40px;

	.blog_list{
		display: flex;
		justify-content: flex-start;
		padding: 0px 0 40px;

		.item{
			width: 210px !important;
			margin:0 10px;
			position: relative;

			figure{

				img{
					width: 210px;
					height: 210px;
				}
			}


			.text{
				padding: 15px 0 0;
			}
		}
	}

}

}//media





#media{
	padding-right: 90px;

	.section_inner_flex{
		width: calc(100% - 90px);
		max-width: 1310px;
		padding-top: 100px;
		margin: 0 auto;
		display: flex;
		justify-content:space-between;

		.media{
			width: calc(100% - 560px);

			.media_inner{
				width: 100%;
				height: 620px;
				padding-right: 50px;
				box-sizing: border-box;
				overflow-y: auto;
				position: relative;
				margin-bottom:50px;

				.ps__rail-y{
					background: #fff;
				}

				.ps__thumb-y{
					background: $red;
					border-radius: 0;
				}

				.item{
					position: relative;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					margin-bottom: 25px;

					a{
						@include cover;
					}
					a:hover ~ figure{
						img{
							transform: scale(1.1);
							filter: brightness(120%);
						}
					}
					a:hover ~ .text{
						p{
							color: $champagne;
						}
					}
					figure{
						flex-shrink: 0;
						width: 129px;
						overflow: hidden;

						img{
							width: 129px;
							height: 129px;
							transition: all 0.2s ease;
							backface-visibility: hidden;
						}
					}
					.text{
						padding-left: 24px;

						time{
							display: none;
							//display: block;
							font-family: $gothic;
							font-weight: 500;
							color: $champagne;
							font-size: 1.2rem;
						}
						p{
							font-weight:400;
							transition: all 0.2s ease;
							backface-visibility: hidden;
						}

					}
				}

			}
		}
		.insta_banner{
			width: 500px;

			a{
				display: block;
				margin-bottom: 20px;
			}
			a:hover{
				filter: brightness(120%);
			}

		}
	}
}





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

#media{
	padding-right:0px;

	.section_inner_flex{
		width: 100%;
		max-width:100%;
		padding-top: 0px;
		margin: 0 auto;
		flex-direction: column;

		.media{
			width: 100%;
			padding-left: 15px;
			padding-bottom: 30px;
			box-sizing: border-box;

			.media_inner{
				width: 100%;
				height: 440px;
				padding-right: 20px;
				margin-bottom:30px;


				.item{
					position: relative;
					margin-bottom: 15px;

					figure{
						width: 100px;

						img{
							width: 100px;
							height: 100px;
						}

					}
					.text{
						padding-left:15px;

					}
				}

			}
		}
		.sns{
			width: 100%;
			padding: 0 15px;
			box-sizing: border-box;

			.timeline{
				width: 100%;
				height:0px;
				margin-bottom:0px;
				position: relative;

				iframe{
					@include cover;
				}
			}
			.instagram_btn{
				padding: 15px 0;

				span{
					padding-left: 10px;
				}
			}
		}
	}
}

}//media



















footer{
	margin-top: 150px;
	@include black;

	.footer_contactBox{
		width: 100%;
		height: 650px;
		background:url(../img/footer.jpg) no-repeat center center;
		background-size: cover;

		display: flex;
		justify-content: center;
		align-items: center;

		.inner{
			text-align: center;
			color:#fff;

			h2{
				em{
					display: block;
					line-height: 1;
					font-size: 2.9rem;
					font-weight: 500;
					padding-bottom: 12px;
				}
				small{
					display: block;
					line-height: 1;
					font-family: $vollkorn;
				}

			}
			h3{
				padding: 50px 0 25px;
				font-size: 1.8rem;
				font-weight: 600;
			}
			.salon_box{
				display: flex;
				justify-content: center;
				padding-top: 50px;

				.item{
					text-align: center;
					color:#fff;
					width: 350px;
					border: #fff solid 1px;
					border-top: 0;
					box-sizing: border-box;
					position: relative;
					padding: 30px 0;

					&:before{
							content: "";
							position: absolute;
							left: 0;
							top: 0;
							width: calc(50% - 60px);
							height: 1px;
							background: #fff;

						}
					&::after{
							content: "";
							position: absolute;
							right: 0;
							top: 0;
							width: calc(50% - 60px);
							height: 1px;
							background: #fff;

						}

					h4{
						position: absolute;
						left: 0;
						top: -0.85em;

						width: 100%;
						text-align: center;
						font-size: 1.75rem;
						font-weight: 500;


					}
					.salon_btn{
						display: flex;
						justify-content: center;
						align-items: center;
						line-height: 1;

					.tel{
						display: flex;
						justify-content: center;
						align-items: center;
						padding-right: 15px;
						color: #fff;



						.icon-tel{
							color: #fff;
							margin-right: 4px;
						}

						span{
							font-size: 1.6rem;
							font-family:Century;
						}
					}
					.rsv{
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;

						&:hover{
							color: $champagne;
						}


						.icon-mail{
							margin-right: 5px;
							transition: all 0.2s ease;
							backface-visibility: hidden;
						}
						span{
							font-family: $minchou;
							font-size: 1.3rem;
							font-weight: 500;
							transition: all 0.2s ease;
							backface-visibility: hidden;
						}
					}
					}
				}
				.item + .item{
					margin-left: 40px;
				}
			}
		}

	}
	.sitemap{
		padding: 90px 90px 0;

		.inner{
			width: 100%;
			max-width: 1200px;
			margin: 0 auto;

			h2{
				width: 100%;
				margin: 0 auto;
				padding: 0 0 40px;
				box-sizing: border-box;
				line-height: 1;
				letter-spacing: 2px;


				a{
					color: $champagne;
					font-family: $vollkorn;
					font-style: italic;
					font-size: 2rem;

				}


			}
			.sitemap_list{
				width: 100%;
				display: flex;
				justify-content:flex-start;
				flex-wrap: wrap;
				border-bottom: $champagne solid 1px;

				.item{
					width: 25%;

					dl{
						dt{
							padding-bottom: 10px;

							a{
								color: $champagne;
								line-height: 1;
								font-family: $vollkorn;
								font-size: 2rem;
								font-style: italic;
								letter-spacing:1px;
							}
							.toggle{
								display: none;
							}
						}
						dd{
							ol{
								line-height: 2.2;
								li{
									a{
										color: $champagne;
										font-size: 1.1rem;
									}
									a:hover{
										filter: brightness(120%);
									}
								}
							}
						}
					}
					dl + dl{
						margin-top: 60px;
					}
				}


				.wide_item{
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex-wrap: wrap;

					padding: 60px 0;

					ul{
						display: flex;
						justify-content: flex-start;
						align-items: center;
						flex-wrap: wrap;


						li{
							margin-right: 3em;
							padding-bottom: 10px;

							a{
								color: $champagne;
								font-weight: 600;
								font-size: 1.1rem;
							}
							a:hover{
										filter: brightness(120%);
									}
						}
					}
					.copy{
						font-size: 1rem;
						color: $champagne;
						text-align: right;
						width: 100%;
					}
				}
			}
		}
	}
	.other_info{
			width: 100%;
			max-width: 1380px;
			margin: 0 auto;
			padding: 25px 90px;
			box-sizing: border-box;

			display: flex;
			justify-content:flex-start;
			align-items: center;

			.logo{
				a:hover{
					filter: brightness(120%);
				}
			}

			.sns_icon{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding-left: 15px;

				a{
					display: block;
					padding: 0 15px;

					.icon-instagram{
						font-size: 2.5rem;
						color: $champagne;
					}
					.icon-facebook{
						font-size: 2.5rem;
						color: $champagne;
					}
				}
				a:hover{
					filter: brightness(120%);
				}

			}
			.union{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				margin-left: auto;

				p{
					font-size: 1rem;
					color: $champagne;
					margin-right: 20px;
				}
				a + a{
					margin-left: 10px;
				}
			}


	}

}



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

footer{
	margin-top: 50px;

	.footer_contactBox{
		width: 100%;
		padding: 40px 15px 15px;
		box-sizing: border-box;

		height: auto;
		background:url(../img/footer@sp.jpg) no-repeat center center;
		background-size: cover;

		display:block;

		.inner{

			h2{
				em{
					font-size: 2.9rem;
				}
				small{
					font-size: 1.2rem;
					letter-spacing: 2px;
				}

			}
			h3{
				padding: 25px 0 25px;
				font-size: 1.8rem;
				font-weight: 600;
			}
			h3 + p{
				text-align: left;
			}
			.salon_box{
				flex-direction: column;
				padding-top: 20px;

				.item{
					width: 100%;
					padding: 25px 0 20px;



					.salon_btn{
						flex-direction: column;

					.tel{
						padding-right:0;
						margin-bottom: 15px;

						.icon-tel{
							font-size: 2rem;
							margin-right: 4px;
						}

						span{
							font-size: 2.2rem;
						}
					}
					.rsv{

						.icon-mail{
							margin-right: 5px;
							font-size: 2rem;
						}
						span{
							font-size: 1.7rem;
						}
					}
					}
				}
				.item + .item{
					margin-left:0px;
					margin-top: 30px;
				}
			}
		}

	}
	.sitemap{
		padding:20px 15px;

		.inner{
			width: 100%;
			max-width:100%;

			h2{
				width: 100%;
				margin: 0 auto;
				padding:15px 0;
				box-sizing: border-box;
				line-height: 1;
				letter-spacing: 1px;


				a{
					font-size: 2rem;
					font-weight: 400;
				}


			}
			.sitemap_list{
				width: 100%;
				display:block;
				border-bottom: $champagne solid 1px;

				.item{
					width: 100%;

					dl{
						dt{
							position: relative;
							padding-bottom: 0;

							a{
								letter-spacing:1px;
								padding: 15px 0;
								font-size: 1.6rem;
								position: relative;
								pointer-events: auto;
								display: flex;
								justify-content: flex-start;
								align-items: center;


								small{
									font-family: $gothic;
									font-size: 1rem;
									padding-left: 1em;
								}


							}
							.toggle{
									display: block !important;
									width: 48px;
									height: 48px;
									position:absolute;
									right: 0;
									top: 0;

									&:before{
										content: "";
										position: absolute;
										right: 14px;
										top: 50%;
										width: 20px;
										height: 1px;
										background: $champagne;
									}
									&::after{
										content: "";
										position: absolute;
										right: 14px;
										top: 50%;
										width: 20px;
										height: 1px;
										background: $champagne;
										transform: rotate(90deg);
										transition: all 0.2s ease;
										backface-visibility: hidden;
									}
									&.on:after{
										transform: rotate(180deg);
									}

								}
						}
						dd{
							display: none;
							padding-left: 1em;
							padding-bottom: 10px;

							ol{
								line-height: 2.2;
								li{
									a{
										&:before{
											display: inline-block;
											content: "";
											width: 6px;
											height: 6px;
											border-radius: 50%;
											background: $champagne;
											margin-right: 8px;
											opacity: 0.5;
											transition: all 0.2s ease;
											backface-visibility: hidden;

										}
									}

								}
							}
						}
					}
					dl + dl{
						margin-top:0px;
					}
				}


				.wide_item{
					width: 100%;
					display:block;
					padding: 20px 0 0;

					ul{
						display: flex;
						justify-content: flex-start;
						align-items: center;
						flex-wrap: wrap;

						li{
							width: 50%;
							padding-bottom: 10px;
							margin-right: 0;

							a{
								font-size: 1.2rem;
								font-weight: 400;
							}

						}
						li + li{
							margin-left: 0;
						}
					}
					.copy{
						font-size: 1rem;
						color: $champagne;
						text-align: center;
						padding: 20px;
						box-sizing: border-box;
					}
				}
			}
		}
	}
	.other_info{
			width: 100%;
			max-width:100%;
			margin: 0 auto;
			padding: 15px 15px 30px;
			box-sizing: border-box;

			display:block;
			text-align: center;

			.logo{
				a:hover{
					filter: brightness(120%);
				}
			}

			.sns_icon{
				display: flex;
				justify-content:center;
				align-items: center;
				padding: 25px 0;

				a{
					display: block;
					padding: 0 15px;
				}

			}
			.union{
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: wrap;
				margin-left: auto;

				p{
					width: 100%;
					text-align: center;
					font-size: 1rem;
					margin-right: 0px;
					padding-bottom: 10px;
				}
				a + a{
					margin-left: 10px;
				}
			}


	}

}

}//media
















#pageTop{
	position: fixed;
	right: 0px;
	bottom: -90px;
	z-index: 10;
	transition: all 0.5s cubic-bezier(1,0,0,1);
	backface-visibility: hidden;

	&.on{
		bottom: 0px;
	}

	a{
		width: 90px;
		height: 90px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;


		&:before{
			content: "";
			@include cover;
			background: $red;
			transition: all 0.2s ease;
			backface-visibility: hidden;

		}


		&:hover{
			filter: brightness(120%);

			&:before{
				transform: scale(1.2);
				opacity: 0.8;

			}
		}

		.icon-top{
			color:#fff;
			font-size: 2.3rem;
			position: relative;
			z-index: 10;
		}

	}
}

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

#pageTop{
	bottom: -66px;

	a{
		width: 55px;
		height: 55px;

		.icon-top{
			font-size: 1.6rem;
		}

	}
}

}//media



#slide_menu{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	transition: all 0.8s cubic-bezier(0.55, 0.05, 0.22, 0.99);

	&:before{
		content: "";
		@include cover;
		@include black;
		z-index: 0;
		transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99) 0.3s;
		backface-visibility: hidden;

		transform: translateY(100%);
		opacity: 0;
	}

	&.slide-open{
		z-index: 90;
		opacity: 1 !important;
		pointer-events: auto;

		&:before{
			opacity: 1;
			transform: translateY(0%);
			transition: all 0.8s cubic-bezier(0.55, 0.05, 0.22, 0.99);
		}

		.logo{
			opacity: 1;
		}

		.inner{
			opacity: 1;
			transform: translateY(0%);
			transition: all 0.8s cubic-bezier(0.55, 0.05, 0.22, 0.99) 0.3s;
		}

	}

	.inner{
		width: 100%;
		height: calc(100% - 98px);
		padding: 50px 0 0;
		box-sizing: border-box;
		margin: 98px auto 0;
		overflow-y: auto;

		position: relative;
		z-index: 10;


		opacity: 0;
		transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99);
		backface-visibility: hidden;
		transform: translateY(100%);



			h2{
				width: 100%;
				max-width: 1400px;
				margin: 0 auto;
				padding: 0 50px 40px;
				box-sizing: border-box;
				line-height: 1;
				letter-spacing: 2px;


				a{
					color: $champagne;
					font-family: $vollkorn;
					font-style: italic;
					font-size: 2rem;
				}


			}
			.sitemap_list{
				width: 100%;
				max-width: 1400px;
				margin: 0 auto;
				padding: 0 50px;
				box-sizing: border-box;
				display: flex;
				justify-content:space-between;

				.item{
					//width: 25%;

					&.narrow{
						//width: 20%;
					}
					&.wide{
						//width: 30%;
					}

					dl{
						dt{
							padding-bottom: 10px;

							a{
								color: $champagne;
								line-height: 1;
								font-family: $vollkorn;
								font-size: 2rem;
								font-style: italic;
								letter-spacing:1px;
							}
							.toggle{
								display: none;
							}
						}
						dd{
							ol{
								line-height: 2.8;
								li{
									padding-top: 20px;
									a{
										color: $champagne;
										font-family: $minchou;
										font-size: 1.3rem;
										line-height: 1.5;
										font-weight: 600;
										display: flex;
										justify-content: flex-start;

										&:before{
											display: inline-block;
											content: "";
											width: 6px;
											height: 6px;
											border-radius: 50%;
											border: $champagne solid 1px;
											box-sizing: border-box;
											margin-right: 8px;
											position: relative;
											top: 8px;
											transition: all 0.2s ease;
											backface-visibility: hidden;

										}


									}
									a:hover{
										text-decoration: underline;
										filter: brightness(120%);

										&:before{
											background: $champagne;
										}
									}
								}
							}
						}
					}
					dl + dl{
						margin-top: 60px;
					}
				}



			}

			.wide_item{
					width: 100%;
					min-width: 1000px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20px 20px 10px;
					@include gold;
					background-repeat:repeat;
					background-position:center top;
					margin-top: 50px;
					box-sizing: border-box;

					ul{
						display: flex;
						justify-content: flex-start;
						align-items: center;
						flex-wrap: wrap;
						width: 100%;

						li{
							margin-right: 3em;
							padding-bottom: 10px;

							a{
										color: #000;
										font-family: $minchou;
										font-size: 1.4rem;
										line-height: 1.5;
										font-weight: 600;
										display: flex;
										justify-content: flex-start;

										&:before{
											display: inline-block;
											content: "";
											width: 6px;
											height: 6px;
											border-radius: 50%;
											border: #000 solid 1px;
											box-sizing: border-box;
											margin-right: 8px;
											position: relative;
											top: 8px;
											transition: all 0.2s ease;
											backface-visibility: hidden;

										}


									}
							a:hover{
										text-decoration: underline;
										filter: brightness(120%);

										&:before{
											background: #000;
										}
									}
						}
					}

				}
	}
}


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

#slide_menu{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	pointer-events: none;

	&:before{
		content: "";
		@include cover;
		@include black;
		z-index: 0;
		transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99) 0.3s;
		backface-visibility: hidden;

		transform: translateY(100%);
		opacity: 0;
	}

	&.slide-open{
		opacity: 1;
		pointer-events: auto;

		&:before{
			opacity: 1;
			transform: translateY(0%);
			transition: all 0.8s cubic-bezier(0.55, 0.05, 0.22, 0.99);
		}

		.logo{
			opacity: 1;
		}


		.inner{
			opacity: 1;
			transform: translateY(0%);
			transition: all 0.8s cubic-bezier(0.55, 0.05, 0.22, 0.99) 0.3s;
		}

	}

	.inner{
		width: 100%;
		height: calc(100% - 64px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0;
		box-sizing: border-box;
		margin: 64px auto 0;

		position: relative;
		z-index: 10;


		opacity: 0;
		transition: all 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99);
		backface-visibility: hidden;
		transform: translateY(100%);



			.salon_contact{
				padding: 15px;

				.item{
					display: flex;
					justify-content: space-between;
					align-items: center;

					border: $champagne solid 1px;
					padding: 10px;


					em{
						width: 30%;
						font-size: 1.3rem;
						color: $champagne;
						text-align: center;
					}
					.tel{
						display: block;
						text-align: center;
						width: 30%;

						.icon-tel{
							display: block;
							line-height: 1;
							color: $champagne;
							font-size: 2.4rem;
						}

						span{
							padding-top: 8px;
							display: block;
							line-height: 1;
							color: $champagne;
							font-size: 1rem;
							font-family: $minchou;
						}
					}
					.rsv{
						display: block;
						text-align: center;
						width: 40%;

						.icon-mail{
							display: block;
							line-height: 1;
							color: $champagne;
							font-size:2.4rem;

						}
						span{
							padding-top: 5px;
							display: block;
							line-height: 1;
							color: $champagne;
							font-size: 1rem;
							letter-spacing: -0.06em;
							font-family: $minchou;
						}
					}
				}
				.item + .item{
					margin-top: 15px;
				}

			}//salon_contact




			h2{
				width: 100%;
				margin: 0 auto;
				padding:30px 15px 15px;
				box-sizing: border-box;
				line-height: 1;
				letter-spacing: 1px;


				a{
					font-size: 2rem;
					font-weight: 400;
				}


			}
			.sitemap_list{
				width: 100%;
				padding: 0 15px;
				box-sizing: border-box;
				display:block;

				.item{
					width: 100% !important;

					dl{
						dt{
							position: relative;

							a{
								letter-spacing:1px;
								padding: 15px 0;
								font-size: 1.6rem;
								position: relative;
								pointer-events: auto;
								display: flex;
								justify-content: flex-start;
								align-items: center;


								small{
									font-family: $gothic;
									font-size: 1rem;
									padding-left: 1em;
								}


							}
							.toggle{
									display: block !important;
									width: 48px;
									height: 48px;
									position:absolute;
									right: 0;
									top: 0;

									&:before{
										content: "";
										position: absolute;
										right: 14px;
										top: 50%;
										width: 20px;
										height: 1px;
										background: $champagne;
									}
									&::after{
										content: "";
										position: absolute;
										right: 14px;
										top: 50%;
										width: 20px;
										height: 1px;
										background: $champagne;
										transform: rotate(90deg);
										transition: all 0.2s ease;
										backface-visibility: hidden;
									}
									&.on:after{
										transform: rotate(180deg);
									}

								}
						}
						dd{
							display: none;
							padding-left: 1em;

							ol{
								line-height: 2.2;
								padding-bottom: 30px;

								li:first-child{
									padding-top: 0;
								}

								li{
									a{
										&:before{
											display: inline-block;
											content: "";
											width: 6px;
											height: 6px;
											border-radius: 50%;
											background: $champagne;
											margin-right: 8px;
											opacity: 0.5;
											transition: all 0.2s ease;
											backface-visibility: hidden;

										}
									}

								}
							}
						}
					}
					dl + dl{
						margin-top:0px;
					}
				}



			}

			.wide_item{
					width: 100%;
					min-width:100%;

					padding: 10px;
					box-sizing: border-box;
					margin-top: 20px;
					display: block;

					ul{
						display: flex;
						justify-content:flex-start;
						align-items: center;
						flex-wrap: wrap;
						width: 100%;

						li{
							padding: 10px;
							width: 50%;
							box-sizing: border-box;
							margin-right: 0;

							&.wide{
								width: 100%;
							}

							a{
										color: #000;
										font-family: $minchou;
										font-size: 1.3rem;
										line-height: 1.5;
										font-weight: 600;
										display: flex;
										justify-content: flex-start;

										&:before{
											display: inline-block;
											content: "";
											width: 6px;
											height: 6px;
											border-radius: 50%;
											border: #000 solid 1px;
											box-sizing: border-box;
											margin-right: 8px;
											position: relative;
											top: 8px;
											transition: all 0.2s ease;
											backface-visibility: hidden;

										}


									}

						}
						li + li{
							margin-left: 0em;
						}
					}

					.sns_icon{
						display: flex;
						justify-content:center;
						align-items: center;
						padding-top: 15px;
						padding-bottom: 30px;

						a{
							display: block;
							padding: 0 15px;

							.icon-instagram{
								font-size: 2rem;
								color: $black;
							}
							.icon-facebook{
								font-size: 2rem;
								color: $black;
							}
						}

					}


				}
	}
}

}//media