@charset "utf-8";

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html{font-family: YakuHanMP_Noto, "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{color:#000;background-color:transparent;text-decoration:none}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:bottom;max-width:100%;height:auto}svg:not(:root){overflow:hidden}figure{margin:0}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace;font-size:1em}li{list-style:none}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}img {backface-visibility: hidden;}


/* template style ----------------------*/

body {
	font-size: 14px;
	line-height: 1.8;
	color: #333333;
	overflow-x:hidden;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	margin: auto;
	padding-top: 50px;
	padding-bottom: 40px;
	opacity: 0;
	transition: all 1s ease;
}
body.loaded {
	opacity: 1;
}
body.menu-open {
	overflow: hidden;
}

body.is-android {
	font-family: 'Noto Serif JP', serif !important;
}

h1,h2,h3,h4,h5,h6,th { font-weight: normal; }

#wrapper { position:relative; }
.sp-bl,
.sp-il,
.tablet-bl,
.sp-se5 {
	display:none;
}
.inner {
	width:87.5%;
	max-width:560px;
	margin-right:auto;
	margin-left:auto;
	position:relative;
}
.opa {
	transition: 0.3s ease-in-out;
}
.opa:hover {
	opacity: 0.85;
	filter: alpha(opacity=85);
}

.clearfix:before,
.clearfix:after,
.cf:before,
.cf:after {
	content: "";
	display: table;
}
.clearfix:after,
.cf:after {
	clear: both;
}
.clearfix,
.cf {
	zoom: 1;
}

.table {
	display: table;
}
.tableCell {
	display: table-cell;
}

.amiri {
	font-family: 'Amiri', serif;
}

.notoSans{
	font-family: 'Noto Sans JP', sans-serif;
}

a.disabled{
  pointer-events: none;
  text-decoration: none !important;
}


/* loading ----------------------*/

#loading {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	z-index: 3000;
	background: #FFF;
	pointer-events: none;
}
	.loaded #loading {
		transition: all 1s ease 4s;
		opacity: 0;
	}
	.visited #loading {
		display: none;
	}

	#loading .inner {
		height: 100%;
	}
	#loading .logo {
		position: absolute;
		top: 50%;
		right: 0;
		left: 0;
		margin: 0 auto;
		max-width: 220px;
		width: 39.2857%;
		transform: translateY(-50%);
		transition: all 1s ease 4s;
	}
		.loaded #loading .logo {
			transform: translateY(-50%) scale(1.15);
			opacity: 0;
		}

	/* 回転して登場するローディング */
	#loading .logo .icon {
		transition: all 2s ease-in-out;
		transform: scale(0) rotate(360deg);
	}
		.loaded #loading .logo .icon {
			transform: scale(1) rotate(0deg);
		}

	#loading .flower {
		position: relative;
	}
		#loading .flower .petal {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			transition: all 2s ease;
			opacity: 0;
			transform: scale(.8);
		}
		#loading .flower .petal1 {
			transform-origin: center bottom;
		}
		#loading .flower .petal2 {
			transform-origin: left bottom;
		}
		#loading .flower .petal3 {
			transform-origin: left center;
		}
		#loading .flower .petal4 {
			transform-origin: left top;
		}
		#loading .flower .petal5 {
			transform-origin: center top;
		}
		#loading .flower .petal6 {
			transform-origin: right top;
		}
		#loading .flower .petal7 {
			transform-origin: right center;
		}
		#loading .flower .petal8 {
			transform-origin: right bottom;
		}
		.loaded #loading .flower .petal1,
		.loaded #loading .flower .petal3,
		.loaded #loading .flower .petal5,
		.loaded #loading .flower .petal7 {
			transform: scale(1);
			opacity: 1;
		}
		.loaded #loading .flower .petal2,
		.loaded #loading .flower .petal4,
		.loaded #loading .flower .petal6,
		.loaded #loading .flower .petal8 {
			transform: scale(1);
			opacity: 1;
			transition-delay: .5s;
		}

	#loading .logo .txt {
		transition: all 2s ease 2s;
		opacity: 0;
	}
		.loaded #loading .logo .txt {
			opacity: 1;
		}




/* header ----------------------*/

#header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	max-width: 768px;
	width: 100%;
	height: 50px;
	background: #FFF;
	margin: 0 auto;
	z-index: 1000;
}
	#header .boxInner {
		position: relative;
		display: block;
		height: 50px;
		z-index: 1000;
		background: #FFF;
	}
	#header .logo {
		float: left;
		width: 110px;
		margin-top: 10px;
		margin-left: 10px;
	}
	#header h1 {
		font-family: YakuHanJP_Noto, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
		font-size: 10px;
		line-height: 1.4285;
		letter-spacing: 0px;
		color: #666;
		float: left;
		margin-top: 20px;
		margin-left: 10px;
		transform: scale(.8);
		transform-origin: top left;
		width: 200px;
		white-space: nowrap;
	}
	#header .menuBtn {
		position: absolute;
		top: 0;
		right: 0;
		width: 50px;
		background: #6c2754;
	}
	#header .menuBtn a {
		display: block;
		position: relative;
		right: 0;
		padding: 0;
		width: 100%;
		height: 100%;
	}
	#header .menuBtn a img {
		transition: all .3s ease-in-out;
	}
	#header .menuBtn a .close {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		opacity: 0;
	}
	.drawer-open #header .menuBtn a .close {
		opacity: 1;
	}
	.drawer-open #header .menuBtn a .open {
		opacity: 0;
	}


#headerNav {
	position: fixed;
	right: 0;
	left: 0;
	height: calc(100% - 50px);
	background: #dfdcdb;
	max-width: 768px;
	width: 100%;
	margin: 0 auto;
	z-index: 900;
	overflow-y: auto;
}
	#headerNav .navInner {
		transition-timing-function: inherit !important;
		transform: none !important;
		overflow: auto;
	}
	.drawer--top.drawer-open #headerNav {
		top: 50px;
	}
	#headerNav .parentList .parent {
		position: relative;
		display: block;
		background: #5f5049;
		color: #FFF;
		box-sizing: border-box;
		padding: 20px;
		cursor: pointer;
	}
		#headerNav .parentList .parent.toggle:after {
			content: "";
			position: absolute;
			top: 0;
			right: 20px;
			bottom: 0;
			margin: auto;
			width: 15px;
			height: 15px;
			background: url(../img/common/sp/icon_plus.png) no-repeat center / contain;
			transition: all .3s ease-in-out;
		}
		#headerNav .parentList .parent.open.toggle:after {
			background: url(../img/common/sp/icon_minus.png) no-repeat center / contain;
		}
		#headerNav .parentList .parent .en {
			font-size: 20px;
			line-height: 1;
			display: block;
		}
		#headerNav .parentList .parent .jp {
			display: block;
			font-size: 14px;
			line-height: 1;
			margin-top: 5px;
		}
		#headerNav .parentList > li + li {
			border-top: solid 1px #FFF;
		}

	#headerNav .childList {
		border-top: solid 1px #FFF;
		padding: 20px;
		display: none;
	}
		#headerNav .childList li + li {
			margin-top: 20px;
		}
		#headerNav .childList li a {
			display: block;
			font-size: 14px;
			line-height: 1;
		}

	#headerNav .btnList {
		max-width: 300px;
		width: 93.75%;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 20px 0;
	}
		#headerNav .btnList li + li {
			margin-top: 10px;
		}

@media screen and (max-width:320px) {
	#header h1 {
		transform: scale(.6);
		margin-top: 25px;
		width: 140px;
	}

	.sp-se5 {
		display: block;
	}
}




/* main ------------------------*/

#main {
	max-width: 768px;
	width: 100%;
	margin: 0 auto;
}


.noteBox {
	margin: 10px auto;
}

/* #kv ------------------------*/

#kv {
	position: relative;
}
	#kv .photo {
		height: 125px;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	#kv .ttl {
		text-align: center;
		position: absolute;
		top: 50%;
		right: 0;
		left: 0;
		transform: translateY(-50%);
		margin: 0 auto;
		color: #fff;
		font-size: 30px;
		line-height: 1.3;
	}
	#kv .ttl span {
		display: block;
		font-size: 16px;
	}




/* footer ----------------------*/

#footer {
	max-width: 768px;
	width: 100%;
	margin: 0 auto;
}
	#footer .bandTtl {
		background: #5f5049;
		color: #FFF;
		text-align: center;
		padding: 10px 0;
		margin-bottom: 20px;
	}
		#footer .bandTtl p {
			font-size: 13px;
			line-height: 1;
		}

	#footer .about {
		padding: 50px 0 35px;
	}
		#footer .about .bnrShop {
			margin: 0 auto 70px;
		}
		#footer .about .logo {
			max-width: 220px;
			width: 39.2858%;
			margin: 0 auto;
		}
		#footer .about .name-sub {
			font-size: 14px;
			line-height: 1;
			text-align: center;
			margin-top: 35px;
		}
		#footer .about .name {
			font-size: 18px;
			line-height: 1;
			text-align: center;
			margin-top: 10px;
		}
		#footer .about .pointList {
			width: 195px;
			margin: 15px auto 0;
			border: solid 1px #b1b1b1;
		}
		#footer .about .pointList li {
			float: left;
			width: 50%;
			font-size: 11px;
			line-height: 1;
			text-align: center;
			padding: 10px 0;
			box-sizing: border-box;
		}
		#footer .about .pointList li + li {
			border-left: solid 1px #b1b1b1;
		}

	#footer .access {
		padding-bottom: 35px;
	}
		#footer .access .address {
			text-align: center;
		}
		#footer .access .address p {
			display: inline-block;
			font-size: 11px;
			text-align: left;
		}
		#footer .access .btn {
			max-width: 195px;
			width: 100%;
			margin: 15px auto 0;
		}
		#footer .access .gmapBtn a {
			display: block;
			background: #874b6a;
			font-size: 16px;
			line-height: 1;
			color: #FFF;
			text-align: center;
			padding: 15px 0;
		}

	#footer .contact {
		padding-bottom: 30px;
	}
		#footer .contact .txt {
			font-size: 10px;
			text-align: center;
		}
		#footer .contact .btn {
			max-width: 195px;
			width: 100%;
			margin: 15px auto 0;
		}
		#footer .contact .telBtn a {
			position: relative;
			display: block;
			background: #d37034;
			font-size: 18px;
			line-height: 1;
			color: #FFF;
			text-align: center;
			padding: 15px 0 15px 20px;
		}
		#footer .contact .telBtn a:before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: 28px;
			margin: auto;
			width: 15px;
			height: 15px;
			background: url(../img/common/pc/icon_tel.png) no-repeat center / contain;
		}
		#footer .contact .sales {
			max-width: 280px;
			margin: 15px auto 0;
		}
		#footer .contact .sales .notes {
			font-size: 10px;
		}
		#footer .contact .salesTb {
			margin-left: -5px;
		}
		#footer .contact .salesTb th {
			font-size: 11px;
			line-height: 1;
			width: 5.5em;
			text-align: center;
			vertical-align: top;
			padding: 3px 0;
		}
		#footer .contact .salesTb td {
			font-size: 11px;
			line-height: 1;
			text-align: left;
			vertical-align: top;
			padding: 3px 0;
		}
	#footer .instaglam {
		text-align: center;
		margin: 30px auto 0;
	}
		#footer .instaglam img {
			width: 140px;
		}

	#footer .copyright {
		font-size: 10px;
		line-height: 1;
		text-align: center;
		color: #666666;
		background: #eee8e1;
		padding: 5px 0;
	}




/* fixedNav -----------------------*/

#fixedNav {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	max-width: 768px;
	width: 100%;
	margin: 0 auto;
	z-index: 500;
}
	#fixedNav ul {}
		#fixedNav ul li {
			float: left;
			position: relative;
		}
		#fixedNav ul li + li:before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			width: 1px;
			height: 100%;
			background: #FFF;
		}
		#fixedNav ul li a {
			display: block;
			background: #000;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
		}
		#fixedNav ul li.tel {
			width: 25%;
		}
		#fixedNav ul li.hotpepper {
			width: 50%;
		}
		#fixedNav ul li.salon {
			width: 25%;
		}
		#fixedNav ul li.tel a {
			background: #d37034;
		}
		#fixedNav ul li.hotpepper a {
			background: #ad2f5b;
		}
		#fixedNav ul li.salon a {
			background: #6c2754;
		}
		#fixedNav ul li a img {
			width: auto;
			height: 100%;
		}




/* commonTtl -----------------------*/

.commonTips {
	text-align: center;
}
	.commonTips .ttl {
		position: relative;
		display: inline-block;
		font-size: 22px;
		line-height: 1.4;
		letter-spacing: 1px;
		padding: 0 35px;
		box-sizing: border-box;
		min-width: 180px;
		margin-bottom: 15px;
	}
	.commonTips .ttl:before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		width: 25px;
		height: 10px;
		background: url(../img/common/pc/icon_ttl-left.png) no-repeat center / contain;
	}
	.commonTips .ttl:after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 25px;
		height: 10px;
		background: url(../img/common/pc/icon_ttl-right.png) no-repeat center / contain;
	}
	.commonTips p {
		font-size: 14px;
		text-align: left;
	}




/* .basicTips -----------------------*/

.basicTips .ttl{
    font-size: 16px;
    text-align: center;
}
.basicTips p {
    font-size: 14px;
}



/* .breadcrumbs -----------------------*/

.breadcrumbs {
	padding: 20px 0;
	margin-bottom: 10px;
}
	.breadcrumbs ul {
		line-height: 1;
		text-align: left;
	}
		.breadcrumbs ul li {
			position: relative;
			display: inline-block;
			font-size: 10px;
			line-height: 1;
			vertical-align: top;
			font-family: 'Noto Sans JP', sans-serif;
		}
		.breadcrumbs ul li + li:before {
			content: "＞";
		}
		.breadcrumbs ul li a {
			text-decoration: underline;
		}
		.breadcrumbs ul li a:hover {
			text-decoration: none;
		}



/* parts -----------------------*/

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




/* parts -----------------------*/

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




/*  Universal animation
--------------------------------------------------*/

.animated {
	animation-duration: .5s;
	animation-fill-mode: both;
}

/* fade in */
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
.fadeIn {
	animation-name: fadeIn;
	animation-fill-mode:both;
	animation-duration:1s;
	animation-timing-function: cubic-bezier(0.15, 0.31, 0.24, 0.88);
	visibility: visible !important;
	opacity: 0;
}


/* fade in up */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 30px, 0);
	}
	to {
		opacity: 1;
		transform: none; 
	}
}
.fadeInUp {
	animation-name: fadeInUp;
	animation-fill-mode:both;
	animation-duration:1s;
	animation-timing-function: cubic-bezier(0.15, 0.31, 0.24, 0.88);
	visibility: visible !important;
	opacity: 0;
}


/* fade in right */
@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translate(30px,0); 
	}
	to {
		opacity: 1;
		transform: none; 
	}
}
.fadeInRight {
	animation-name: fadeInRight;
	animation-fill-mode:both;
	animation-duration:1s;
	animation-timing-function: cubic-bezier(0.15, 0.31, 0.24, 0.88);
	visibility: visible !important;
	opacity: 0;
}


/* fade in left */
@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translate(-30px,0); 
	}
	to {
		opacity: 1;
		transform: none; 
	}
}
.fadeInLeft {
	animation-name: fadeInLeft;
	animation-fill-mode:both;
	animation-duration:1s;
	animation-timing-function: cubic-bezier(0.15, 0.31, 0.24, 0.88);
	visibility: visible !important;
	opacity: 0;
}


/* fade out */
@keyframes fadeOut {
	from { opacity: 1; } 
	to { opacity: 0; }
}
.fadeOut { animation-name: fadeOut; }