@charset "UTF-8";

#container {
	padding: 0;
}

@media only screen and (max-width: 767px) {
	
	#wrapper {
		padding: 0;
	}

}


/*------------------------------------------------------------
	見出し
------------------------------------------------------------*/

h5 {
	font-size: 7vw;
	font-weight: 500;
	text-align: center
}

h5 + p {
	font-size: 1.3rem;
	text-align: center;
	margin-bottom: 20px;
}

@media only screen and (min-width: 768px) {
	
	h5 {
		font-size: 4rem;
	}
	
	h5 + p {
		font-size: 1.6rem;
		margin-bottom: 30px;
	}
	
}

/*------------------------------------------------------------
	メインビジュアル
------------------------------------------------------------*/

#main-vis-area {
	position: relative;
	margin-bottom: 40px;
}

@media only screen and (min-width: 768px) {
	
	#main-vis-area {
/* 		margin-bottom: 90px; */
		margin-bottom: 70px;
	}
	
}

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

#slideshow {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

@media only screen and (min-width: 768px) {
	
	#slides {
		width: 100%;
		height: 100vh;
		min-height: 500px;
	}

}

/*------------------------------------------------------------
	メインビジュアル（コピー）
------------------------------------------------------------*/

.main-copy {
	width: 100%;
	color: #000;
	position: absolute;
    top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
    z-index: 10;
}

.main-copy h1 {
	font-size: 6.3vw;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
    color: #fff;
	margin-bottom: 8px;
	text-shadow: 0 0 20px #000;
}

@media only screen and (min-width: 768px) {
	
	.main-copy h1 {
		font-size: 5.6rem;
		letter-spacing: 1px;
		margin-bottom: 12px;
	}
	
}

.main-copy p {
	font-size: 4.2vw;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.5px;
	text-align: center;
	color: #fff;
	text-shadow: 0 0 10px #000;
}

@media only screen and (min-width: 768px) {
	
	.main-copy p {
		font-size: 2rem;
		font-weight: 500;
		letter-spacing: 1px;
	}
	
}


/*------------------------------------------------------------
	動画
------------------------------------------------------------*/

#movie-area {
	margin-bottom: 40px;
}

#movie-area .movie-holder {
	width: 100%;
	margin: 0 auto;
}

#movie-area .movie-holder video {
	width: 100%;
	max-width: 100%;
}

@media only screen and (min-width: 768px) {
	
	#movie-area {
		margin-bottom: 90px;
	}
	
	#movie-area .movie-holder {
		width: 800px;
	}
	
}


/*------------------------------------------------------------
	コンセプト
------------------------------------------------------------*/

#concept-area {
	margin-bottom: 50px;
}

@media only screen and (max-width: 769px) {
	
	#concept-area div.one-half {
		width: 90%;	
		margin: 0 auto;
	}
	
}

@media only screen and (min-width: 768px) {
	
	#concept-area {
		min-width:1120px;
		max-width: 1380px;
		margin: 0 auto 120px;
	}
	
}


#concept-area .one-half .concept-inner p:not(:last-child) {
	margin-bottom: 10px;
}

h2 {
	font-size: 7vw;
	font-weight: 500;
	line-height: 1.6;
	text-align: center;
	margin: 0 0 20px;
}

#concept-area .one-half a.button {
	margin-top: 30px;
}

#concept-area .one-half img {
	margin: 40px auto 0;
}

@media only screen and (min-width: 768px) {
	
	#concept-area .one-half .concept-inner {
		width: 520px;
		padding: 0 20px;
		margin: 0 auto;
	}
	
	h2 {
		font-size: 3.8rem;
		margin: 20px 0 30px;
	}
	
	#concept-area .one-half a.button {
		margin-top: 40px;
	}
	
	#concept-area .one-half img {
		max-width: 360px;
		margin: 60px auto 0;
	}

}


#concept-area figure.one-half {
	display: block;
	background: url(../img/top/bg_concept.jpg) left bottom / cover no-repeat;
	height: 80vw;
	margin-bottom: 30px;
}

@media only screen and (min-width: 768px) {
	
	#concept-area figure.one-half {
		height: auto;
		margin: 0;
	}
	
}


/*------------------------------------------------------------
	店舗数
------------------------------------------------------------*/

#store-number {
	background: url(../img/top/bg_number.jpg) center center / cover no-repeat;
	width: 100%;
	padding: 50px 0;
	text-align: center;
	margin-bottom: 40px;
}

.store-number-inner {
	width: 90%;
	margin: 0 auto;
}

@media only screen and (min-width: 768px) {
	
	#store-number {
		padding: 90px 0;
		margin-bottom: 80px;
	}
	
	.store-number-inner {
		width: 1080px;
	}
	
}

#store-number h2 {
	font-size: 4.6vw;
	font-weight: 500;
	margin: 0;
}

#store-number .one-fourth {
	margin-top: 40px;
}

@media only screen and (min-width: 768px) {
	
	#store-number h2 {
		font-size: 3rem;
	}
	
	#store-number .one-fourth {
		margin-bottom: 0;
	}

	
}

#store-number .one-fourth dl {
	line-height: 1;
}

#store-number .one-fourth dl dt {
	font-size: 12vw;
	font-weight: 500;
	margin-bottom: 10px;
}

#store-number .one-fourth dl dd {
	font-size: 1.6rem;
	font-weight: 500;
}

@media only screen and (min-width: 768px) {
	
	#store-number .one-fourth dl dt {
		font-size: 7rem;
		margin-bottom: 15px;
	}
	
	#store-number .one-fourth dl dd {
		font-size: 1.6rem;
	}
	
}

/*------------------------------------------------------------
	EXPRIENCE
------------------------------------------------------------*/

#exprience-area {
	margin-bottom: 60px;
}

@media only screen and (min-width: 768px) {
	
	#exprience-area {
		margin-bottom: 120px;
	}
	
}

#exprience-area .txt-box p {
	margin: 10px auto;
}

#exprience-area .txt-box p:last-of-type {
	margin-bottom: 10px;
}

@media only screen and (min-width: 768px) {
	
	#exprience-area .txt-box p {
		width: 800px;
	}
	
	#exprience-area .txt-box p:last-of-type {
		margin-bottom: 40px;
	}

}

#exprience-area .exprience-inner .one-fourth {
	text-align: center;
	line-height: 1.4;
	border: 1px solid #1c1c1c;
	padding: 15px;
	margin-top: 20px;
}

#exprience-area .exprience-inner .one-fourth p {
	font-weight: 500;
	margin-top: 10px;
}

@media only screen and (min-width: 768px) {
	
	#exprience-area .exprience-inner {
		max-width: 1080px;
		margin: 0 auto;
	}
	
	#exprience-area .exprience-inner .one-fourth {
		padding: 30px 40px 40px;
		margin-top: 0;
	}
	
	#exprience-area .exprience-inner .one-fourth img {
		max-width: 180px;
		margin: 0 auto;
	}
	
	#exprience-area .exprience-inner .one-fourth p {
		margin-top: 20px;
	}
		
}

#exprience-area a.button {
	margin-top: 30px;
}

@media only screen and (min-width: 768px) {
	
	#exprience-area a.button {
		margin-top: 40px;
	}
		
}


/*------------------------------------------------------------
	Service
------------------------------------------------------------*/

#service-area {
	margin-bottom: 60px;
}

@media only screen and (min-width: 768px) {
	
	#service-area {
		margin-bottom: 120px;
	}
	
}

#service-area .service-inner {
	margin: 0 auto;
}

#service-area .service-inner .one-third {
	margin-bottom: 40px;
}


#service-area .service-inner .one-third:last-child {
	margin-bottom: 0;
}

@media only screen and (min-width: 768px) {
	
	#service-area .service-inner {
		width: 1080px;
	}
	
	#service-area .service-inner .one-third {
		margin-bottom: 0;
		position: relative;
		padding-bottom: 75px;
	}
	
}

#service-area .service-inner dl {
	text-align: center;
}

#service-area .service-inner dl dt {
	font-size: 6vw;
	font-weight: 500;
	text-align: center;
	position: relative;
	margin-top: 20px;
}

#service-area .service-inner dl dt span {
	display: block;
	background: #fff;
	font-size: 1.4rem;
	line-height: 1;
	padding: 5px 20px;
	border: 1px solid #1c1c1c;
	position: absolute;
	top: -35px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}

#service-area .service-inner a.button {
	margin-top: 20px;
}

@media only screen and (min-width: 768px) {
	
	#service-area .service-inner dl dt {
		font-size: 2rem;
		margin-top: 30px;
	}
	
	#service-area .service-inner dl dt span {
		top: -40px;
	}
	
	#service-area .service-inner a.button {
		position: absolute;
		transform: translate(-50%);
		left: 50%;
		bottom: 0;
	}
		
}

/*------------------------------------------------------------
	Featured In
------------------------------------------------------------*/

#featured-area {
	margin-bottom: 60px;
}

@media only screen and (min-width: 768px) {
	
	#featured-area {
		margin-bottom: 120px;
	}
	
}

#featured-area ul {
	margin: 0 auto;
	font-size: 0;
	text-align: center;
}

#featured-area ul li {
	display: inline-block;
	padding: 0 10px 20px;
}

#featured-area ul li img {
	width: auto;
	height: 30px;
}

@media only screen and (min-width: 768px) {
	
	#featured-area ul {
		width: 1080px;
		margin: 0 auto;
		font-size: 0;
		text-align: center;
	}
	
	#featured-area ul li {
		display: inline-block;
		padding: 20px 20px;
	}
	
	#featured-area ul li img {
		width: auto;
		height: 50px;
	}

}


/*------------------------------------------------------------
	Google Review 
------------------------------------------------------------*/

#review-area {
	background: #EEEFF1;
	width: 100%;
	padding: 40px 0;
	text-align: center;
	margin-bottom: 40px;
}

@media only screen and (min-width: 768px) {
	
	#review-area {
		padding: 60px 0 70px;
		margin-bottom: 100px;
	}
	
}


#review-area h2 {
	font-size: 5vw;
	font-weight: 500;
	margin: 0;
}

#review-area img {
	width: 200px;
	margin: 20px auto;
}

@media only screen and (min-width: 768px) {
	
	#review-area h2 {
		font-size: 3rem;
	}
	
	#review-area img {
		margin: 30px auto;
	}
	
}

.review-inner {
	width: 90%;
	margin: 0 auto;
}

.review-inner blockquote {
	margin-bottom: 30px;
	padding-bottom: 35px;
	border-bottom: 1px solid #ccc;
	position: relative;
}

.review-inner blockquote:last-of-type {
	margin-bottom: 0;
}

.review-inner blockquote:before {
	content: '\f10d';
	display: block;
	font-size: 3rem;
	font-family: 'fontawesome';
	color: #aaa;
	position: absolute;
	top: -20px;
	left: 0;
}

@media only screen and (min-width: 768px) {

	.review-inner {
		width: 100%;
		min-width:1120px;
		max-width: 1380px;
		margin: 0 auto;
	}
	
	.review-inner blockquote {
		width: calc(85% / 4);
		margin:0 5% 0 0;
		padding-bottom: 0;
		border-bottom: none;
	}
	
	.review-inner blockquote:last-of-type {
		margin: 0;
	}
	
}


#review-area dl dt {
	font-size: 2.6rem;
	font-weight: 500;
	margin-bottom: 5px;
}

#review-area dl dd {
	text-align: left;
}


/*------------------------------------------------------------
	Promotions
------------------------------------------------------------*/

#promotion-area {
	margin-bottom: 60px;
}

@media only screen and (min-width: 768px) {
	
	#promotion-area {
		margin-bottom: 80px;
	}
	
}

.promo-holder {
	width: 100%;
	margin: 0 0 20px 0;
}

.promo-holder:last-child {
	margin: 0;
}

@media only screen and (min-width: 768px) {
	
	.promotions {
		justify-content: center;
		align-items: flex-start;
	}
	
	.promo-holder {
		background: none;
		width: calc(92% / 5);
		margin-right: 2%;
		margin: 0 2% 30px 0;
	}
	
	.promo-holder:last-child {
		margin-right: 0;
	}
	
}

.promo-holder figure {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	width: 80px;
	height: 100%;
}

.promo-holder figure img {
	display: none;
}

@media only screen and (min-width: 768px) {
	
	.promo-holder figure {
		width: 100%;
		height: auto;
	}
	
	.promo-holder figure img {
		display: block;
	}
		
}

.promo-holder dl {
	margin-left: 15px;
}

.promo-holder dl dt {
	font-size: 1.6rem;
	font-weight: 500;
}

.promo-holder dl dt span {
	font-size: 1.3rem;
}

@media only screen and (min-width: 768px) {
	
	.promo-holder dl {
		width: 100%;
		margin: 10px 0 0;
	}
	
	.promo-holder dl dt {
		font-size: 1.6rem;
		text-align: center;
		margin-bottom: 5px;
	}
	
}

.promo-holder dl dd {
	font-size: 1.15rem;
	line-height: 1.8;
}

.promo-holder dl dd:nth-child(n+3) {
	margin-top: 5px;
}

.promo-holder dl dd span {
	background: #fff9cc;
	font-size: 1.4rem;
	font-weight: 500;
}


/*------------------------------------------------------------
	notice（休業のご案内）
------------------------------------------------------------*/

p.notice {
	display: block;
	width: 90vw;
	font-size: 1.3rem;
	line-height: 1.6;
	font-weight: 400;
	color: #a93535;
	text-align: center;
	margin: -10px auto 30px;
	border: 1px solid #a93535;
	padding: 10px 8px;
	margin-top: 30px;
}

@media only screen and (min-width: 768px) {
	
	p.notice {
        max-width: 740px;
        font-size: 1.8rem;
        line-height: 2;
        margin: 20px auto 70px;
        padding: 30px 0;
	}
	
}



/*------------------------------------------------------------
	Location
------------------------------------------------------------*/

#location-area {
	margin-bottom: 60px;
}

@media only screen and (min-width: 768px) {
	
	#location-area {
		margin-bottom: 100px;
	}
	
}

#location-area .carusel {
	width: 100%;
	margin: 5px auto 0;
}

@media only screen and (min-width: 768px) {
	
	#location-area .carusel {
		width: 1080px;
		margin: 15px auto 0;
	}
	
}

#location-area .carusel .slick-slide {
	position: relative;
}

#location-area .carusel .slick-slide .salon-summary {
	background: rgba(255,255,255,.75);
	width: 84%;
	font-size: 1.2rem;
	line-height: 1.6;
	padding: 10px 10px 15px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 100;
}

@media only screen and (min-width: 768px) {
	
	#location-area .carusel .slick-slide .salon-summary {
		width: auto;
		font-size: 1.4rem;
		line-height: 1.8;
		padding: 25px 30px 30px;
		top: auto;
		bottom: 40px;
		left: 40px;
		transform: none;
	}
	
}

#location-area .carusel .slick-slide .salon-summary h6 {
	font-size: 2.4rem;
	line-height: 1.6;
}

#location-area .carusel .slick-slide .salon-summary dl dt {
	font-weight: 500;
	margin-top: 5px;
}

@media only screen and (min-width: 768px) {
	
	#location-area .carusel .slick-slide .salon-summary h6 {
		font-size: 3rem;
		font-weight: 500;
		line-height: 1.6;
	}
	
	#location-area .carusel .slick-slide .salon-summary dl dt {
		font-weight: 500;
		margin-top: 5px;
	}

}


/*------------------------------------------------------------
	Instagram
------------------------------------------------------------*/

#instagram-area {
	margin-bottom: 60px;
}

@media only screen and (min-width: 768px) {
	
	#instagram-area {
		margin-bottom: 120px;
	}
	
}

.instagram-inner figure {
	margin-bottom: 20px;
}