@charset "utf-8";

/* RESET */
html { color: #1a1a19; background: #fff; -webkit-font-smoothing: antialiased; font-weight: normal; letter-spacing: 0em; font-size: 14px; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, select, p, blockquote, th, td { margin: 0; padding: 0;}
table { border-collapse: collapse; border-spacing: 0 }
fieldset, img { border: 0 }
address, button, caption, cite, code, dfn, em, input, optgroup, option, select, strong, textarea, th, var { font: inherit }
del, ins { text-decoration: none }
li { list-style: none }
caption, th { text-align: left }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
q:before, q:after { content: '' }
abbr, acronym { border: 0; font-variant: normal }
sup { vertical-align: baseline }
sub { vertical-align: baseline }
legend { color: #000 }
a { text-decoration: none; color: #33b4fd; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
::-moz-selection { background: rgba(79, 117, 148, 0.3); }
::selection { background: rgba(79, 117, 148, 0.3); }
a {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);}
a:hover{color:#9c555f;}

/* //////////////////////////////////////////////

COMMON

////////////////////////////////////////////// */


body, html { width: 100%; overflow-x: hidden; font-family: "Sawarabi Mincho" , YuMincho, "游明朝", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", Honoka, Meiryo, "メイリオ", serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 14px; line-height: 1.8; box-sizing: border-box; }

.clear{
	clear:both;
}
a.link{
	background:#d28a94;
	height:60px;
	padding:0 60px;
	display: block;
    text-align: center;
	position:absolute;
	overflow: hidden;
}
.link p{
	color: #fff !important;
    font-size: 0.9em;
    vertical-align: middle;
    letter-spacing: 0.2em;
    font-family: 'Abel', sans-serif;
    position: relative;
    box-sizing: border-box;
    top: 50%;
    margin-top: -0.9em;
    left: 0;
	display:block;
	z-index: 3;
}
a.link:after {
	position: absolute;
	-webkit-transition: .3s;
	transition: .3s;
	content: '';
	width: 0;
	height: 120%;
	left: -10%;
	-webkit-transform: skewX(15deg);
		  transform: skewX(15deg);
	z-index: 2;
	top: 0;
	background: #9c555f;
}
a.link:hover::after {
	left: -10%;
	width: 120%;
}

/* HEADER-NAVI */
header{
	width: 100%;
}
.header1{
	position: relative;
    width: 100%;
    z-index: 200;
    font-weight: 700;
    font-size: 13px;
    box-sizing: border-box;
}
.wrap{
	display: block;
}
.header1 .carelively-logo{
	display: block;
	width: 90px;
	margin: 20px;
}
.header1 .carelively-logo svg{
	width: 90px;
}
.header1 nav{
	position: absolute;
	right: 0;
	bottom: 0;
}
nav .nav-ol .nav{
	display: flex;
	font-family: 'Lustria', serif;
	letter-spacing: 0.2em;
}
nav .nav-ol .nav li{
	margin: 0 15px;
	position:relative;
}
nav .nav-ol .nav li.reserve{
	margin-right:-20px;
	-webkit-transform: skewX(-16deg);
		  transform: skewX(-16deg);
}
nav .nav-ol .nav a{
	font-size:12px;
	color:#878787;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}
nav .nav-ol .nav li.reserve a{
	padding: 24px 80px 24px 28px;
	width:100%;
    color: #fff;
    background: #33b4fd;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}
nav .nav-ol .nav a:hover{
	color:#0168a3;
}
nav .nav-ol .nav li.reserve a:hover{
	background: #0168a3;
}

/*HEADER-NAVI SP*/
.header1 nav .nav-sp{
	display:none;
}
.header1 nav .inner {
	padding:40px 50px 30px 40px;
	width: 26px;
	height: 22px;
	position:relative;
	z-index:1001;
 }
 .header1 nav .inner a{
	width: 116px;
	left:0;
	top:0;
    height: 92px;
    display: block;
    position: absolute;
  box-sizing: border-box;
 }
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  box-sizing: border-box;
}
.menu-trigger {
  position: absolute;
  width: 26px;
  height: 22px;
  z-index: -1;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #33b4fd;
  border-radius: 4px;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
	top: 10px;
	right: 0;
	left: initial;
	width: 80%;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(10px) rotate(-45deg);
  transform: translateY(10px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  right: -50%;
  opacity: 0;
  -webkit-animation: active-menu-bar02 .8s forwards;
  animation: active-menu-bar02 .8s forwards;
}
@-webkit-keyframes active-menu-bar02 {
  100% {
    height: 0;
  }
}
@keyframes active-menu-bar02 {
  100% {
    height: 0;
  }
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-10px) rotate(45deg);
  transform: translateY(-10px) rotate(45deg);
}
p .font_red {color:crimson;
	
}



/*--SP MENU OPEN--*/
#sp-menu{
	display:none;
	position:fixed;
	top:0;
	left:-100%;
	width:100%;
	height:100%;
	opacity:0;
	z-index:1000;
	background: #fff;
	overflow:scroll;
}
#sp-menu .nav{
	position:relative;
	top:50%;
	transform:translateY(-50%);
}
#sp-menu li{
	font-family: 'Lustria', serif;
	letter-spacing: 0.2em;
	position:relative;
	display:block;
	opacity:0;
	text-align:center;
	height:40px;
	margin:10px auto;
}
#sp-menu li.reserve{
	padding: 20px 20px 5px;
    border-bottom: 1px solid #bbb;
    border-top: 1px solid #bbb;
    display: table;
}
#sp-menu li a{
	color:#878787;
}
#sp-menu li.reserve a{
	color: #63adea;
}
#sp-menu .menu-sns{
	margin:0 auto;
	width:64px;
	padding:40px 100px;
	text-indent:-100000px;
	border-bottom:none;
	display:none;
}
#sp-menu .menu-sns a{
	float:left;
	width:22px;
	margin-left:0;
	padding:0;
	display:block;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
#sp-menu .menu-sns a.fb{
	background:url(http://antique-hair-salon.com/img/header/icn_fb.svg) no-repeat;
	background-size:22px;
}
#sp-menu .menu-sns a.ig{
	margin-left:20px;
	background:url(http://antique-hair-salon.com/img/header/icn_instagram.svg) no-repeat;
	background-size:22px;
}
#sp-menu .menu-sns a:hover{
	filter:alpha(opacity=70);
	-moz-opacity:0.6;
	opacity:0.6;
}
#header-sp a.active{
	opacity:0.2;
}

/*FOOTER*/
footer{
	width:100%;
	margin-top:180px;
	background:#33b4fd;
}
.footer-main{
	width:90%;
	padding:60px 0 120px;
	margin:0 auto;
}
.footer-main:after{
	clear:both;
	display:block;
	content:"";
}
.bnr-shop{
	float:left;
	display: flex;
}
.bnr-shop .meets{
	background:url(../img/logo_meets.svg);
	background-repeat:no-repeat;
	background-size:contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background-position:center;
	-webkit-box-sizing: content-box;
  	box-sizing: content-box;
	width:100px;
	height:70px;
	margin-right:35px;
    text-align: center;
    display: block;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}
.bnr-shop .music{
	background:url(../img/logo_music.png);
	background-repeat:no-repeat;
	background-size:contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background-position:center;
	-webkit-box-sizing: content-box;
  	box-sizing: content-box;
	width:100px;
	height:70px;
	margin-right:35px;
    text-align: center;
    display: block;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}
.bnr-sns{
    float: right;
    display: flex;
	color: #9e9e9e;
	margin-top:21px;
}
.bnr-sns .reserved{
	font-size:0.8rem;
	margin:2px 0 0 20px;
}
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/sns_icn/P84fnsc_icomoon.eot');
  src:  url('../fonts/sns_icn/P84fnsc_icomoon.eot#iefix') format('embedded-opentype'),
    url('../fonts/sns_icn/P84fnsc_icomoon.ttf') format('truetype'),
    url('../fonts/sns_icn/P84fnsc_icomoon.woff') format('woff'),
    url('') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bnr-sns .icon-facebook:before {
  content: "\ea90";
}
.bnr-sns .icon-instagram:before {
  content: "\ea92";
}
.bnr-sns .instagram,
.bnr-sns .facebook{
	width:16px;
	padding: 5px;
	color: #9e9e9e;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}
.bnr-shop .meets:hover,
.bnr-shop .music:hover,
.bnr-sns .instagram:hover,
.bnr-sns .facebook:hover{
	opacity:0.5;
}

/*main-LOADER*/
#body-wrapper{
	opacity:0;
}
#lorder-main{
	background:#fff;
	position:fixed;
	width:100%;
	height:100%;
	display:block;
	z-index:10000;
}
#canvas{
	opacity:0;
	top: 50%;
	left:50%;
    transform: translate(-50%,-50%);
	position: relative;
}
	
path.path_black {
	fill-opacity:0;
	transition: fill-opacity 1s;
}

.fill path.path_black{
	fill: #000;
	fill-opacity: 1;
}

.fill path{
	-webkit-animation: path-in 1s 1 ease forwards;
  	animation: path-in 1s 1 ease forwards;
	
}
@keyframes path-in {
	0% {
		stroke-opacity:1;
	}
	30% {
		stroke-opacity:1;
	}
	60% {
		stroke-opacity:0;
	}
	100% {
		stroke-opacity:0;
	}
}
@-webkit-keyframes path-in {
	0% {
		stroke-opacity:1;
	}
	30% {
		stroke-opacity:1;
	}
	60% {
		stroke-opacity:0;
	}
	100% {
		stroke-opacity:0;
	}
}
/*LOADER*/
.load-view {
  font-size: 10px;
  margin: 0px auto;
  text-indent: -9999em;
  width: 7em;
  height: 7em;
  border-radius: 50%;
  background: #72a0c6;
  background: -moz-linear-gradient(left, #72a0c6 10%, rgba(114, 160, 198,0) 42%);
  background: -webkit-linear-gradient(left, #72a0c6 10%, rgba(114, 160, 198,0) 42%);
  background: -o-linear-gradient(left, #72a0c6 10%, rgba(114, 160, 198,0) 42%);
  background: -ms-linear-gradient(left, #72a0c6 10%, rgba(114, 160, 198,0) 42%);
  background: linear-gradient(to right, #72a0c6 10%, rgba(114, 160, 198,0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.load-view:before {
  width: 50%;
  height: 50%;
  background: #72a0c6;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.load-view:after {
  background: #fff;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*SCROLL EFFECT*/
.effect .ac{
	position:relative;
	overflow:hidden;
}
.effect .ac .bg{
	opacity:0;
	-webkit-animation: fadein-bg 3s 1 ease forwards;
  	animation: fadein-bg 3s 1 ease forwards;
}
.effect .ac:after{
	content:"";
	display:block;
	background:#33b4fd;
	z-index:2;
	width:0%;
	height:120%;
	left: -10%;
	top: 0;
	position: absolute;
	-webkit-transform: skewX(15deg);
		  transform: skewX(15deg);
	-webkit-animation: fadein0 3s 1 ease forwards;
  	animation: fadein0 3s 1 ease forwards;
}
.effect .ac:before{
	content:"";
	display:block;
	background:#fff;
	z-index:1;
	width:130%;
	height:120%;
	left: -10%;
	top: 0;
	position: absolute;
	-webkit-transform: skewX(15deg);
		  transform: skewX(15deg);
	-webkit-animation: fadein1 2s 1 ease forwards;
  	animation: fadein1 2s 1 ease forwards;
}
.effect .ac.bg-ny:before{
	background:#222222 !important;
}
.effect .ac.bg-ny p{
	color:#222222;
	-webkit-animation: fadein-ny 3s 1 ease forwards;
  	animation: fadein-ny 3s 1 ease forwards;
}
@keyframes fadein-bg {
	0% {
		opacity: 0;
	}
	30% {
		opacity: 0;
	}
	60% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
@-webkit-keyframes fadein-bg {
	0% {
		opacity: 0;
	}
	30% {
		opacity: 0;
	}
	60% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadein0 {
	0% {
		width:0%;
		left:-12.5%;
		opacity: 1;
	}
	30% {
		width:130%;
		left:-12.5%;
		opacity: 1;
	}
	60% {
		width:130%;
		left:130%;
		opacity: 1;
	}
	100% {
		width:130%;
		left:130%;
		opacity: 0;
	}
}
@-webkit-keyframes fadein0 {
	0% {
		width:0%;
		left:-12.5%;
		opacity: 1;
	}
	30% {
		width:130%;
		left:-12.5%;
		opacity: 1;
	}
	60% {
		width:130%;
		left:130%;
		opacity: 1;
	}
	100% {
		width:130%;
		left:130%;
		opacity: 0;
	}
}

@keyframes fadein1 {
	0% {
		width:130%;
		left:-12.5%;
		opacity: 1;
	}
	30% {
		width:130%;
		left:-12.5%;
		opacity: 1;
	}
	60% {
		width:130%;
		left:130%;
		opacity: 1;
	}
	100% {
		width:130%;
		left:130%;
		opacity: 0;
	}
}
@-webkit-keyframes fadein1 {
	0% {
		width:130%;
		left:-12.5%;
		opacity: 1;
	}
	30% {
		width:130%;
		left:-12.5%;
		opacity: 1;
	}
	60% {
		width:130%;
		left:130%;
		opacity: 1;
	}
	100% {
		width:130%;
		left:130%;
		opacity: 0;
	}
}


@keyframes fadein1 {
	0% {
		width:130%;
		left:-12.5%;
		opacity: 1;
	}
	30% {
		width:130%;
		left:-12.5%;
		opacity: 1;
	}
	60% {
		width:130%;
		left:130%;
		opacity: 1;
	}
	100% {
		width:130%;
		left:130%;
		opacity: 0;
	}
}
@-webkit-keyframes fadein1 {
	0% {
		width:130%;
		left:-12.5%;
		opacity: 1;
	}
	30% {
		width:130%;
		left:-12.5%;
		opacity: 1;
	}
	60% {
		width:130%;
		left:130%;
		opacity: 1;
	}
	100% {
		width:130%;
		left:130%;
		opacity: 0;
	}
}

@keyframes fadein-ny {
	0% {
		color:#222222;
	}
	30% {
		color:#222222;
	}
	60% {
		color:#fff;
	}
	100% {
		color:#fff;
	}
}
@-webkit-keyframes fadein-ny {
	0% {
		color:#222222;
	}
	30% {
		color:#222222;
	}
	60% {
		color:#fff;
	}
	100% {
		color:#fff;
	}
}


.ac-t0{
	opacity:0;
	margin-top:-25px;
	-webkit-animation: fadein-t0 1.5s 1 ease forwards;
  	animation: fadein-t0 1.5s 1 ease forwards;
}
.ac-t1{
	opacity:0;
	padding-top:40px;
	-webkit-animation: fadein-t1 2s 1 ease forwards;
  	animation: fadein-t1 2s 1 ease forwards;
}
.ac-t2{
	opacity:0;
	padding-top:30px;
	-webkit-animation: fadein-t2 3s 1 ease forwards;
  	animation: fadein-t2 3s 1 ease forwards;
}
@keyframes fadein-t0 {
	0% {
		opacity:0;
		margin-top:-25px;
	}
	30% {
		opacity:0;
		margin-top:-25px;
	}
	60% {
		opacity:1;
		margin-top:0;
	}
	100% {
		opacity:1;
		margin-top:0;
	}
}
@-webkit-keyframes fadein-t0 {
	0% {
		opacity:0;
		margin-top:-25px;
	}
	30% {
		opacity:0;
		margin-top:-25px;
	}
	60% {
		opacity:1;
		margin-top:0;
	}
	100% {
		opacity:1;
		margin-top:0;
	}
}
@keyframes fadein-t1 {
	0% {
		opacity:0;
		padding-top:40px;
	}
	30% {
		opacity:0;
		padding-top:40px;
	}
	60% {
		opacity:1;
		padding-top:0;
	}
	100% {
		opacity:1;
		padding-top:0;
	}
}
@-webkit-keyframes fadein-t1 {
	0% {
		opacity:0;
		padding-top:40px;
	}
	30% {
		opacity:0;
		padding-top:40px;
	}
	60% {
		opacity:1;
		padding-top:0;
	}
	100% {
		opacity:1;
		padding-top:0;
	}
}
@keyframes fadein-t2 {
	0% {
		opacity:0;
		padding-top:30px;
	}
	30% {
		opacity:0;
		padding-top:30px;
	}
	60% {
		opacity:1;
		padding-top:0;
	}
	100% {
		opacity:1;
		padding-top:0;
	}
}
@-webkit-keyframes fadein-t2 {
	0% {
		opacity:0;
		padding-top:30px;
	}
	30% {
		opacity:0;
		padding-top:30px;
	}
	60% {
		opacity:1;
		padding-top:0;
	}
	100% {
		opacity:1;
		padding-top:0;
	}
}

@media screen and (max-width: 900px) , (max-device-width : 900px) {
	.header1{
		position:fixed;
		background:#fff;
	}
	#top{
		padding-top:121px !important;
	}
	.header1 nav .nav-ol{
		display:none;
	}
	.header1 nav .nav-sp{
		display:block;
	}
}
@media screen and (max-width: 600px) , (max-device-width : 600px) {
	.header1 .antique-logo{
		margin: 20px;
	}
	.header1 antique-logo svg{
		width:75px;
	}
	.header1 nav{
		bottom: initial;
		top:0;
	}
	.header1 nav .inner{
		padding: 30px
	}
	#top{
		padding-top:84px !important;
	}
	.footer-main{
		width:80%;
		padding: 10px 0;
	}
	.footer-main ul{
		float:none;
	}
	.footer-main ul.bnr-shop{
		width:195px;
		margin:0 auto;
	}
	.bnr-shop .meets,
	.bnr-shop .music{
		width:80px;
		height:50px;
	}
	.bnr-shop .music{
		margin-right:0;
	}
	.footer-main ul.bnr-sns{
		margin:30px auto 0;
		display:block;
	}
	.bnr-sns li{
		padding-top: 20px;
		text-align:center;
		/*border-top:1px solid #4e4e4e;*/
	}
	.bnr-sns li.reserved{
		float:none;
		clear:both;
		margin:20px 0 0;
	}
}

/* //////////////////////////////////////////////

IE

////////////////////////////////////////////// */

.is_ie { letter-spacing: 0; }