/* ------------------------------------------------------------------------------
	Template Name: Rooky
	Author: Designstub
	Author URI: http://www.designstub.com
	License: GNU General Public License version 3.0
	License URI: http://www.gnu.org/licenses/gpl-3.0.html
	Version: 1.0

/* ------------------------------------------------------------------------------
	Typography
-------------------------------------------------------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Roboto:100,300,400,500,600,700);




p {
	font-size: 14px;
	line-height: 22px;

}


h1 {
	font-size: 43px;
	color: #fff;
}
h2 {
	font-size: 30px;
	line-height:37px;
	color: #000;
	font-weight:100;
}
h3 {
	font-size: 28px;
	line-height: 35px;
	color: #2d3033;
	font-weight: 100;
	letter-spacing:1px;
}
h4 {
	font-size: 17px;
	color: #000;
	font-weight: 400;
}
h5 {
	font-size: 14px;
	color: #2d3033;
	text-transform: uppercase;
	font-weight: 700;
}


.wf-roundedmplus1c { font-family: "Rounded Mplus 1c";
	font-weight: normal;
}





.btn {
	/*background-color: #e84545;*/

	font-size: 16px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	display: inline-block;
	text-transform: uppercase;
	margin-top: -3px;
}

.btn a{color:#C1A700 }

a:hover {
    color: #C1A700;
}

.gothic{font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"}

@media(max-width: 576px){
 .btn {
	margin: .4rem;
    width: 45%;
}
	
	.btn {
	/*background-color: #e84545;*/

	font-size: 12px;
		
}
	
	.button-row{display: flex;flex-direction: column;}	
	
	
}



.btn:hover, .btn:focus {
	background-color:none;
	color: #fff;

}
.btn-large {
	padding: 15px 40px;
}

.bg-black{background:#000;}

/*
.border-bottom {
    border-bottom: 1px solid #333 !important;
}*/

.border-bottom-f {
    border-bottom: 1px solid #6d6c6c !important;
}
.border-bottom-df {
    border-bottom: 1px dotted#6d6c6c !important;
}

.border-bottom-dark {
    border-bottom: 1px solid #333 !important;
}

table td, .table th {
    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid #6d6c6c;
}

.table td, .table th {
    padding: .75rem;
    vertical-align:middle;
    border-top: 1px solid #6d6c6c;
}

/* ------------------------------------------------------------------------------
	Global Styles
-------------------------------------------------------------------------------*/
a {
	color: #fff;
}
a:hover, a:focus {
	text-decoration: none;
	-moz-transition: background-color, color, 0.3s;
	-o-transition: background-color, color, 0.3s;
	-webkit-transition: background-color, color, 0.3s;
	transition: background-color, color, 0.3s;
}
body {
	font-family: "Roboto", sans-serif;
	font-weight: 300;
	color:#efefef;
	font-size: 14px;
	letter-spacing:0.5px;
	line-height: 18px;
	overflow-y: auto;
	overflow-x: hidden;
	background: #000;
}

ul, ol {
	margin: 0;
	padding: 0;
}
ul li {
	list-style: none;
}

.w-80{width: 80%;}


.section {
	padding: 100px 0;
}
.no-padding {
	padding: 0;
}
.no-gutter [class*=col-] {
 padding-right: 0;
 padding-left: 0;
}
.section-title {
	margin-top: 0;
	letter-spacing:2px;
}
.section-title span {
	font-weight: 400;
}
.section-intro {
	margin:5% 10% 12% 10%;
	color: #636363;
	font-size:14px;
	line-height:21px;
	font-weight: 300;
	letter-spacing:1px;
}
.icon {
	font-size:33px;
	color:#000;
}


.img-responsive {
	margin:auto;
}

.lead {
    font-size: 1.25rem;
    font-weight: 300;
	line-height: 1.6rem;
}

.small, small {
    font-size: 80%;
    font-weight: 400;
}

.top-title,.salon-title,.title{
font-family: 'Playfair Display', 'Hiragino Mincho ProN', serif;
	letter-spacing: 0.01em;
}

h2.title{
	letter-spacing: 0.1em;
}


h1.title{
font-size:30px;
}


.top-catch{margin-top:6rem;
 			margin-left:-4rem;
			width: 90%;
			background-color:rgba(0,0,0,0.5);
}	


.display-4{font-weight: 100;}
.display-5{font-size: 2.7rem;
			line-height: 3.2rem;}
.display-6{font-size: 2.5rem;
			line-height: 3rem;}
.text-gray{color:#b3b3b3;}



.opw1 {background-color:rgba(182,189,189,0.1);}
.opw2 {background-color:rgba(255,255,255,0.2);}
.opw3 {background-color:rgba(f,f,f,f.3)}
.opw4 {background-color:rgba(f,f,f,f.4)}
.opw5 {background-color:rgba(f,f,f,f.5)}
.opw6 {background-color:rgba(f,f,f,f.6)}
.opw7 {background-color:rgba(f,f,f,f.7)}
.opw8 {background-color:rgba(0,0,0,0.8)}
.opw9 {background-color:rgba(0,0,0,0.9)}

.op1 {background-color:rgba(0,0,0,0.1);}
.op2 {background-color:rgba(0,0,0,0.2);}
.op3 {background-color:rgba(0,0,0,0.3);}
.op4 {background-color:rgba(0,0,0,0.4);}
.op5 {background-color:rgba(0,0,0,0.5);}
.op6 {background-color:rgba(0,0,0,0.6);}
.op7 {background-color:rgba(0,0,0,0.7);}
.op8 {background-color:rgba(0,0,0,0.8);}
.op9 {background-color:rgba(0,0,0,0.9);}



.pt-lg-9, .py-lg-9 {padding-top: 7rem!important;}
.pt-lg-10, .py-lg-10 {padding-top: 8rem!important;}
.pt-lg-11, .py-lg-11 {padding-top: 9rem!important;}
.pt-lg-12, .py-lg-12 {padding-top: 10rem!important;}
.pt-lg-13, .py-lg-13 {padding-top: 11rem!important;}
.pt-lg-14, .py-lg-14{padding-top: 12rem!important;}
.pt-lg-15, .py-lg-15{padding-top: 13rem!important;}
.pt-lg-16, .py-lg-16{padding-top: 14rem!important;}
.pt-lg-17, .py-lg-17{padding-top: 15rem!important;}

@media (min-width: 992px){
.mt-lg-6, .my-lg-6 {
    margin-top: 4rem!important;
}
.mt-lg-7, .my-lg-7 {
		margin-top: 5rem!important;}
	
.mb-lg-6, .my-lg-6 {
    margin-bottom: 4rem!important;
}
.mb-lg-7, .my-lg-7 {
		margin-bottom: 5rem!important;}	
	
.py-6 {
	padding-top: 5rem!important;
    padding-bottom: 5rem!important;
}
.py-7{
	padding-top: 6rem!important;
    padding-bottom: 6rem!important;
}
	
	
.pt-lg-6, .py-lg-6 {padding-top: 4rem!important;}
.pt-lg-7, .py-lg-7 {padding-top: 5rem!important;}
.pt-lg-8, .py-lg-8 {padding-top: 6rem!important;}
.pt-lg-9, .py-lg-9 {padding-top: 7rem!important;}

	
.pt-lg-9 {padding-top: 7rem!important;}
.pt-lg-10 {padding-top: 7.5rem!important;}
.pt-lg-11 {padding-top: 8rem!important;}
.pt-lg-12 {padding-top: 8.5rem!important;}
.pt-lg-13 {padding-top: 9rem!important;}
.pt-lg-14 {padding-top: 9.5rem!important;}
.pt-lg-15 {padding-top: 10rem!important;}
.pt-lg-16 {padding-top: 10.5rem!important;}
.pt-lg-17 {padding-top: 11rem!important;}	
	
	
	
	
}

.f-6s{font-size:0.4rem;}
.f-5s{font-size:0.5rem;}
.f-4s{font-size:0.6rem;}
.f-3s{font-size:0.7rem;}
.f-2s{font-size:0.8rem;}
.f-1s{font-size:0.9rem;}
.f-1{font-size:1.2rem;
line-height: 1.5rem;}
.f-2{font-size:1.3rem;}
.f-3{font-size:1.4rem;}
.f-4{font-size:1.5rem;}
.f-5{font-size:1.6rem;}
.f-6{font-size:1.7rem;}


h2.content-title {
    margin-top: -140px;
    padding-top: 140px;
}

@media(max-width: 992px){
h2.content-title {
    margin-top: -91px;
    padding-top: 91px;
}
}

h2.content-title,.menu-title{font-family: 'Playfair Display SC', serif;
letter-spacing: 0.1em;

}
#menu-banner h3{color:#FFF;
font-family: 'Playfair Display SC', serif;
font-weight: 100;
}



h2.content-title:before, h2.content-title:after{
content: '';
position: absolute;
top: 90%;
display: inline-block;
width:380px;
height: 1px;
background-color:#333;
font-family: 'Playfair Display SC', serif;
letter-spacing: 0.01em;
}

h2.content-title:before {left:30px;}
h2.content-title:after {right:30px;}



@media(max-width: 992px){

h2.content-title:before, h2.content-title:after{width:200px;}
.display-4 {
    font-size: 2.8rem;
    font-weight: 300;
    line-height: 1.2;

}

h2.content-title:before {left:70px;}
h2.content-title:after {right:70px;}
	
	
.pt-lg-9 {padding-top: 0!important;}
.pt-lg-10 {padding-top: 0!important;}
.pt-lg-11 {padding-top: 0!important;}
.pt-lg-12 {padding-top: 0!important;}
.pt-lg-13 {padding-top: 0!important;}
.pt-lg-14 {padding-top: 0!important;}
.pt-lg-15 {padding-top: 0!important;}
.pt-lg-16 {padding-top: 0!important;}
.pt-lg-17 {padding-top: 0!important;}	


	.display-5{font-size:2.2rem;
		line-height: 2.8rem;}
	.display-6{font-size: 2rem;
			line-height: 2.6rem;}
	
	
.top-catch{
 			margin-left:0;
			width: 100%;
			background-color:rgba(0,0,0,0.5);}	
	
	
}



@media(max-width: 767px){
h2.content-title:before, h2.content-title:after{
width:180px;}	
h2.content-title:before {left:10px;}
h2.content-title:after {right:10px;}
.display-4 {
    font-size: 2.5rem;
    font-weight: 300;
	line-height: 1.2;}

.display-5{font-size:2.2rem;
	line-height: 2.8rem;
	
	
	}
	
}



@media(max-width: 576px){
h2.content-title:before, h2.content-title:after{
width:70px;}	
h2.content-title:before {left:10px;}
h2.content-title:after {right:10px;}	
h2.title{
	letter-spacing: 0.1em;
	font-size:1.5rem;
}
	
h3.title{
	letter-spacing: 0.1em;
	font-size:1.4rem;
}
	
h4.title{
	letter-spacing: 0.1em;
	font-size:1rem;
}	
.display-4 {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.2;
}

.display-5{font-size: 1.6rem;}
.display-6{font-size: 1.4rem;
			line-height: 2rem;}
	
	
.mt-5, .my-5{
		
	 margin-top: 1.25rem!important;
	}	

	
.lead {
    font-weight: 300;
    line-height: 1.4rem;
}	
	
	
}


@media(min-width: 1200px){
h2.content-title:before, h2.content-title:after{
width:380px;}	
}

@media(min-width: 1400px){
h2.content-title:before, h2.content-title:after{
width:600px;}
	
	h2.content-title:before {left:10px;}
h2.content-title:after {right:10px;}
}


@media (max-width: 576px){
.row {
    margin: 0;
	padding:0;
}

}


/*　背景のぼかし　*/
		
.fade-in-out {
    position: relative;
    color: white;
    background-size: cover;
    background-position: center;
}
		

.fade-in-out:before {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    content: ' ';
    background: linear-gradient(#111, rgba(17, 17, 17, 0.3), rgba(17, 17, 17, 0.6), rgba(17, 17, 17, 1), #111);
}	
		
		/*.carousel-inner{height: 300px;}	*/
.photo-overlay {
    overflow: hidden;
    position: relative;
    background-size: auto;
}
		
	
.number { font-family: 'Libre Baskerville', serif; }

/* ------------------------------------------------------------------------------
	Header
-------------------------------------------------------------------------------*/
#header,#sec-header  {
	position: fixed;
	width: 100%;
	z-index: 999;
}




#header .header-content {
	margin: 0 auto;
	max-width: 1170px;
	padding: 20px 0;
	width: 100%;
	-moz-transition: padding 0.3s;
	-o-transition: padding 0.3s;
	-webkit-transition: padding 0.3s;
	transition: padding 0.3s;
}
#header .logo {
	float: left;
}


#header .logo img {
    width: 35px;
}



#header.fixed {
	background-color: #201f22;
	opacity: 0.9;
}
#sec-header.sec-fixed {
	background-color: #201f22;
	opacity: 0.8;
}
#header.fixed .header-content,
#sec-header.sec-fixed .header-content {
	border-bottom: 0;
	padding: 10px 0;
}
#header.fixed .nav-toggle,
#sec-header.sec-fixed .nav-toggle {
	top: 25px;
}
.navigation.open {
	opacity: 0.9;
	visibility: visible;
	-moz-transition: opacity 0.5s;
	-o-transition: opacity 0.5s;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;

}
.navigation {
	/*float: right;
	padding: 20px 20px 0 0;*/
	font-family: 'Ubuntu', sans-serif;
}
.navigation li {
	display: inline-block;
}
.navigation a {
	color: rgba(255, 255, 255, 0.8);
	font-size:.9rem;
	font-weight: 300;
	margin-left: 30px;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.navigation a:hover, .navigation a.active {
	color: #fff;
		text-decoration: underline;
}
.nav-toggle {
	display: none;
	height: 44px;
	overflow: hidden;
	position: fixed;
	right: 5%;
	text-indent: 100%;
	top: 32px;
	white-space: nowrap;
	width: 44px;
	z-index: 99999;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
.nav-toggle:before, .nav-toggle:after {
	border-radius: 50%;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	-webkit-transition-property: -webkit-transform;
	transition-property: transform;
}
.nav-toggle:before {
	background-color: #e84545;
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-webkit-transform: scale(1);
	transform: scale(1);
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}
.nav-toggle:after {
	background-color: #e84545;
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-webkit-transform: scale(0);
	transform: scale(0);
	-moz-transition-duration: 0s;
	-o-transition-duration: 0s;
	-webkit-transition-duration: 0s;
	transition-duration: 0s;
}
.nav-toggle span {
	background-color: #fff;
	bottom: auto;
	display: inline-block;
	height: 3px;
	left: 50%;
	position: absolute;
	right: auto;
	top: 50%;
	width: 18px;
	z-index: 10;
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
.nav-toggle span:before, .nav-toggle span:after {
	background-color: #fff;
	content: "";
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transition: -moz-transform 0.3s;
	-o-transition: -o-transform 0.3s;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}
.nav-toggle span:before {
	-moz-transform: translateY(-6px) rotate(0deg);
	-ms-transform: translateY(-6px) rotate(0deg);
	-webkit-transform: translateY(-6px) rotate(0deg);
	transform: translateY(-6px) rotate(0deg);
}
.nav-toggle span:after {
	-moz-transform: translateY(6px) rotate(0deg);
	-ms-transform: translateY(6px) rotate(0deg);
	-webkit-transform: translateY(6px) rotate(0deg);
	transform: translateY(6px) rotate(0deg);
}
.nav-toggle.close-nav:before {
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-webkit-transform: scale(0);
	transform: scale(0);
}
.nav-toggle.close-nav:after {
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-webkit-transform: scale(1);
	transform: scale(1);
}
.nav-toggle.close-nav span {
	background-color: rgba(255, 255, 255, 0);
}
.nav-toggle.close-nav span:before, .nav-toggle.close-nav span:after {
	background-color: #fff;
}
.nav-toggle.close-nav span:before {
	-moz-transform: translateY(0) rotate(45deg);
	-ms-transform: translateY(0) rotate(45deg);
	-webkit-transform: translateY(0) rotate(45deg);
	transform: translateY(0) rotate(45deg);
}
.nav-toggle.close-nav span:after {
	-moz-transform: translateY(0) rotate(-45deg);
	-ms-transform: translateY(0) rotate(-45deg);
	-webkit-transform: translateY(0) rotate(-45deg);
	transform: translateY(0) rotate(-45deg);
}

.topIcon {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    padding: 0;
    background-color: #222;
    border-top: 1px solid #444;
}

ul.navIcon {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    padding: 0;
    background-color: #222;
    border-top: 1px solid #444;
 
}
	
.navIcon li {
    display: inline-block;
    padding: 1% 5%;
    text-align: center;
    color: #fff;
    font-size: 12px;
}	

.navIcon li i {
    font-size: 25px;
    margin: 5px 0;
	font-weight:600;
}

.nav-toggle::before,
.nav-toggle::after{
	background-color: #999;
}

.navigation .dropdown li a {
    color: #fff;
}

.dropdown:hover .dropdown-menu {
    display: block;
	margin-left:50px;
}

.dropdown-menu {
    background-color: rgba(0,0,0,0.9);
}
.dropdown-menu {
    color: #FFF;

}		

.navigation .dropdown li a{
	color: #fff;
	margin: 0;
	font-size: 0.9rem;
	background: none;
}
	
.navigation .dropdown li a:hover{
	color:#C1A700

}

.dropdown-menu {
    position: absolute;
    top: 20px;
    left: -10px;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #000;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
}



@media screen and (max-width: 992px) {
ul#g-nav a{
	font-size: 1.5rem;
	font-family: 'Playfair Display SC', serif;
	line-height: 1.5rem;
	}
ul.drop-menu li a{
	line-height: 1.2rem;}
}




/* ------------------------------------------------------------------------------
	Top
-------------------------------------------------------------------------------*/

.topPhoto-overlay {
    overflow: hidden;
    position: relative;
    background-size: cover;
    height: 820px;
}

.top-headImage{	
background-image:url(../images/top/head-bg.jpg);
background-size:cover;
background-attachment: fixed;
background-position: 0 -70px;
}

.slide-inner{width: 80%;}

@media screen and (max-width:992px) {
.top-headImage{	
background-size:100%;
background-attachment: fixed;
}
	
.topPhoto-overlay {
    height: 520px;	
	}

}


@media(max-width:992px) {

h1.display-3 {
    font-size: 3.5rem;
	}
}

@media(max-width:767px) {
.top-headImage{	
background-size:100%;
background-attachment: fixed;
}
	
.topPhoto-overlay {
    height: 420px;	
	}
	
h1.display-3 {
    font-size: 3rem;
	}
	
.slide-inner{width: 90%;}
	
	
}



@media(max-width: 576px){
h1.display-3{font-size: 2.2rem;}
	
.topPhoto-overlay {
   overflow: hidden;
    position: relative;
    background-size: cover;
    height:380px;
}	
	
.top-headImage{	
background-image:url(../images/top/headsp-bg.jpg);
background-size:auto;
background-attachment: fixed;
background-repeat:no-repeat;
background-position:center top;

}
	}


.top-headImage h2{		
	text-shadow: 5px 5px 10px #fff;
	letter-spacing: .1rem;
}

.top-headImage h1{	
/*	text-shadow:
-1px 0px 7px #fff,
3px 0px 3px #fff,
-1px 1px 1px #fff,
-1px -2px 3px #fff,
0 0 30px #fff;*/
	letter-spacing: .2rem;
}

.about-bg {
	background-image:url(../images/top/about-bg.jpg);
background-size: cover;
display: block;
background-position: center;
padding: 5rem 0;
margin: 0.5rem 0;
}

.salon-bg {
background-image:url(../images/top/salon-bg.jpg);
background-size: cover;
display: block;
background-position: center;
padding: 5rem 0;
margin: 0.5rem 0;
}


.menu-bg {
background-image:url(../images/top/menu-bg.jpg);
background-size: cover;
display: block;
background-position: center;
padding: 5rem 0;
margin: 0.5rem 0;
}



.course-bg {
background-image:url(../images/top/course-bg.jpg);
background-size: cover;
display: block;
background-position: center;
padding: 5rem 0;
margin: 0.5rem 0;
}

.product-bg{
background-image:url(../images/top/product-bg.jpg);
background-size:cover;
display: block;
background-position: center;
padding: 5rem 0;
margin: 0.5rem 0;  
}


@media(max-width: 576px){
	
.display-5 {line-height: 2.2rem;}	
	
.about-bg,.menu-bg,.course-bg,.salon-bg,.product-bg{
padding: 2rem 0;
}
}

@media(min-width:1200px){
.menu-bg,.course-bg,.salon-bg,.product-bg{
padding: 8rem 0;
background-position:center center;
}
	
.about-bg{
padding: 8rem 0;
background-position:center 500px;
}	
	
	
}




.menu-bg .btn{
	font-family: "Roboto", sans-serif;
	font-weight: 100;
}


.menu-bg:hover{background-image:url(../images/top/menu-bg_ov.jpg);}
.course-bg:hover {background-image:url(../images/top/course-bg_ov.jpg);}
.salon-bg:hover {background-image:url(../images/top/salon-bg_ov.jpg);}
.about-bg:hover {background-image:url(../images/top/about-bg_ov.jpg);}
.product-bg:hover {background-image:url(../images/top/product-bg_ov.jpg);}
/* -------------------------------------------------------------
Google map
------------------------------------------------------------- */
#map-section {
  position: relative;
  height: 450px;
  width: 100%;
}

#map {
  height: 100%;
  width: 100%;
}

#map img {
  max-width: none;
}


		
#map_canvas1,#map_canvas2 {
	width:100%;
	height: 100%;
	border:solid 1px #999;
	display:block;
	padding:0px;
}	
		
#map_canvas1 {
		height: 100%;
}

@media screen and (max-width:767px) {
	#map_canvas1 {
		height: 300px;
}

}



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


#header.fixed {
    opacity: 0.8;
}	
		
	
body {
  margin: 0;
  background: #000; 
}
video { 
    position: relative;
    min-height: 820px;
	min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
	background:url(images/top/top.jpg);
  	background-size: cover;
	transition: 1s opacity;
    margin-bottom: -5px;
	object-fit: contain;
	overflow: hidden;
	
}
.stopfade { 
   opacity: .5;
}
		
		
#overly{
position: relative;
width: 100%;
height: auto;
background:url(images/top/dot.png);
		overflow: hidden;
}		

#movhead { 
	position: absolute;
	top:46%;

  color: white;
  width: 100%;
	/*background-color: rgba(0,0,0,0.5);*/
	text-align: center;
	overflow: hidden;

}

#movhead h1 {
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: .3rem;
	line-height: 2.5rem;
}

@media (min-width: 576px){	
#movhead { 
	position: absolute;
  color: white;
  width: 100%;
	/*background-color: rgba(0,0,0,0.5);*/
	text-align: center;
	top:44%;

}

#movhead h1 {
  font-size: 2.5rem;
  text-transform: uppercase;
	line-height: 3.5rem;
}	
		}

		
@media (min-width: 768px){	
	
#movhead h1 {
    font-size:2.6rem;
    text-transform: uppercase;
    line-height:3.6rem;
}

#movhead { 
top:45%;

}
	
		}		
		
	
		
@media (min-width: 992px){	
	
#movhead h1 {
    font-size:3rem;
    text-transform: uppercase;
    margin-top: 0;
    letter-spacing: .5rem;
    line-height: 4rem;
}

#movhead { 
	position: absolute;
	top:34%;
	left:18%;
  color: white;
  padding: 2rem;
  width: 60%;
  margin:2rem;
	text-align: center;

}
	
		}

@media (min-width: 1280px){		
		
#movhead h1 {
    font-size:3.5rem;
    text-transform: uppercase;
    margin-top: 0;
    letter-spacing: .5rem;
    line-height: 4.5rem;
}

#movhead { 
	position: absolute;
	top:36%;
	left:18%;
  color: white;
  padding: 2rem;
  width: 60%;
  margin:2rem;
	text-align: center;

}
}

@media (min-width: 1600px){		
		
#movhead h1 {
    font-size: 5rem;
    text-transform: uppercase;
    margin-top: 0;
    letter-spacing: .5rem;
    line-height: 6.5rem;
}

#movhead { 
	position: absolute;
	top:33%;
	left:19%;
	color: white;
	padding: 2rem;
	width: 60%;
	margin:2rem;
	text-align: center;
}
}	




.video{
width:100%;
padding-bottom: 56.25%;
height:0px;
position: relative;
}
.video iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}




	
/* ------------------------------------------------------------------------------
	salon
-------------------------------------------------------------------------------*/
.tokyo-headImage{background-image:url(../images/tokyo/head-bg.jpg);}	
.shibuya-headImage{background-image:url(../images/shibuya/head-bg.jpg);}	
.daikanyama-headImage{background-image:url(../images/daikanyama/head-bg.jpg);}
.hiroo-headImage{background-image:url(../images/hiroo/head-bg.jpg);}
.ginza-headImage{background-image:url(../images/ginza/head-bg.jpg);}
.address-headImage{background-image:url(../images/adress/head-bg.jpg);}
.aoyama-headImage{background-image:url(../images/aoyama/head-bg.jpg);}
.nihombashi-headImage{background-image:url(../images/sc/head-bg.jpg); }
.toranomon_hills-headImage{background-image:url("../images/sc/toranomon3.jpg"); 
background-position: center bottom;
background-size: 100%;}


.toranomon_hills-headImage{background-image:url("../images/sc/toranomon3.jpg");
background-position: center bottom;
background-size: 100%;
background-size: cover;}




#parking a{
	text-decoration: underline;
}

.salon-lead{font-size:1.2rem;
line-height: 1.5rem;}


@media (min-width: 1400px){
.tokyo-headImage,
.shibuya-headImage,
.daikanyama-headImage,
.hiroo-headImage,
.aoyama-headImage,
.address-headImage,
.ginza-headImage,
.nihombashi-headImage{	
    background-size: 100%;
    background-position:center;
    height: 500px;
    background-repeat: no-repeat;
	}	}

@media (min-width: 1200px)
{
.tokyo-headImage,
.shibuya-headImage,
.daikanyama-headImage,
.hiroo-headImage,
.aoyama-headImage,
.address-headImage,
.ginza-headImage,
.nihombashi-headImage{	
    background-size: 100%;
    background-position: 0 -200px;
    height: 500px;
    background-repeat: no-repeat;
	}	
}

@media (max-width: 1200px){
.tokyo-headImage,
.shibuya-headImage,
.daikanyama-headImage,
.hiroo-headImage,
.aoyama-headImage,
.address-headImage,
.ginza-headImage,
.nihombashi-headImage{	
background-size:100%;
background-position:top;
height: 480px;
background-repeat: no-repeat;}	

.nihombashi-headImage{
background-position:center;}

}




@media (max-width: 992px){
.tokyo-headImage,
.shibuya-headImage,
.daikanyama-headImage,
.hiroo-headImage,
.aoyama-headImage,
.address-headImage,
.ginza-headImage,
.toranomon_hills-headImage,	
.nihombashi-headImage{	
background-size:cover;
background-position:top;
height: 450px;
background-repeat: no-repeat;
}	
}


@media (max-width: 776px){
.tokyo-headImage,
.shibuya-headImage,
.daikanyama-headImage,
.hiroo-headImage,
.aoyama-headImage,
.address-headImage,
.ginza-headImage,
.nihombashi-headImage{	
background-size:cover;
background-position:top;
height: 400px;
background-repeat: no-repeat;
}	
}

@media(max-width: 576px){

.tokyo-headImage,
.shibuya-headImage,
.daikanyama-headImage,
.hiroo-headImage,
.aoyama-headImage,
.address-headImage,
.ginza-headImage,
.toranomon_hills-headImage,
.nihombashi-headImage{	
height: 300px;}
.cover { min-height: 100%;
}
.salon-lead{font-size:0.8rem;}	

	
	
	
}


.align-items-center {
    align-items: center !important;
}
.d-flex {
    display: flex !important;
}
.photo-overlay {
    overflow: hidden;
    position: relative;
    background-size: auto;
}		
		
.photo-overlay:before {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    pointer-events: none;
    background: rgba(32, 32, 32,);
}

.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle {
    color: #fff;
    background-color: none;
    border-color: #4e555b;
}
	

.content-bgImage {
    background-image: url(../images/common/content-bg.jpg);
    background-size: auto;
    background-attachment: fixed;
  
}





/* ------------------------------------------------------------------------------
	Product
-------------------------------------------------------------------------------*/
.product-headImage{	
background-image:url(../images/product/head-bg.jpg);
background-size:contain;
background-attachment: fixed;
background-position: center 470px;
   
}	

@media (max-width: 1200px){
.product-headImage{	
background-size:auto;
background-position: center 470px;
}
}


@media(max-width: 576px){


.product-headImage{	
background-size:auto;
height: 300px;}
}



.btn-outline-light {
    color: #f8f9fa;
    background-color: transparent;
    background-image: none;
    border-color: #f8f9fa;
    border: 1px solid #fff;
	font-weight: 300;}



/* ------------------------------------------------------------------------------
	NEWS
-------------------------------------------------------------------------------*/


#news a{
    text-decoration: underline;
}

.news-colum{
	height: 500px;
	overflow-y: scroll;
	padding:0 .5rem;
	margin-bottom: 5rem;
}
@media(max-width: 576px){
.news-colum{
	height: auto;
	overflow-y: scroll;
	overflow: hidden;

}
}

.news-colum h3:first-child{

	margin:0 0 1rem 0;
}

.news-colum h3{
	color:#fff;
	font-weight: 400;
	font-size: 1rem;
	margin:3rem 0 1rem 0;
	border-bottom: 1px dotted #ccc;
}

/* ------------------------------------------------------------------------------
	googlemap
-------------------------------------------------------------------------------*/

.gm-style .gm-style-iw {
    font-weight: 300;
    font-size: 13px;
    overflow: hidden;
    color: #333;
}


.googlemaps iframe,
.googlemaps object,
.googlemaps embed {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

.googlemaps{    height: 450px;
    width: 100%;
  }  

#map-section {
    position: relative;
    height: 450px;
    width: 100%;
    margin: 20px 0 70px 0;
}



@media(max-width: 576px){
#map-section{
    margin: 20px 0 -20px 0;
}

}


/* ------------------------------------------------------------------------------
	form
-------------------------------------------------------------------------------*/



	.mfp_achroma {
    background-color: #000;
}

form#mailformpro label.mfp_not_checked {
    padding: 3px;
    border: none;
}

form#mailformpro label.mfp_checked {
    padding: 3px;
    border: none;
    background-color: #000;
    box-shadow: none;
}


.mfp_colored {
    background-color: #000;
}
	
form#mailformpro {
  
    width: 90%;
    margin: 0 auto;
}	

form#mailformpro dl dd {
    border-top: solid 1px #6d6c6c;
    margin: 0px;
    padding: 10px 5px 20px 220px;
    font-size: 12px;
    line-height: 1.5em;
    text-align: left;
}
	
form#mailformpro dl dt {
    float: left;
    width: 200px;
    clear: both;
    font-size: 12px;
    padding: 10px 0px 0 30px;
    text-align: right;
    border-top: solid 1px #6d6c6c;
    margin: 0px;
}
	
	@media screen and (max-width: 800px) {
		
		form#mailformpro {
  
    width: 100%;
    margin: 0 auto;
}	

		
		
		
	form#mailformpro dl dt {
		float: none;
		width: auto;
		font-size: 12px;
    	padding: 15px 5px;
		text-align: left;
	}	
		
		
	form#mailformpro dl dd {
		clear: both;
		border-top: none;
		padding: 5px 15px;
		font-size: 12px;
		line-height: 1.5em;
	}
	div.mfp_buttons button {
		font-size: 14px;
	}
	div#mfp_phase_confirm h4 {
		font-size: 18px;
	}
	ul#mfp_phase_stat {
		padding: 0px;
		text-align: left;
	}
	ul#mfp_phase_stat li {
		text-align: center;
		padding: 5px 0px;
		border-radius: 3px;
		margin: 5px;
		list-style: none;
		font-size: 14px;
		width: 28%;
	}
	ul#mfp_phase_stat li.mfp_phase_arrow {
		bos-shadow: none;
		display: none;
	}
	ul#mfp_phase_stat li.mfp_active_phase {
	}
	ul#mfp_phase_stat li.mfp_inactive_phase {
	}
	table#mfp_confirm_table tr th {
		white-space: nowrap;
		width: 100px;
	}
	div#mfp_thanks {
		text-align: center;
		font-size: 18px;
		padding: 20px 0px;
	}
	div#mfp_thanks strong {
		color: #C00;
		font-size: 24px;
		display: block;
	}
}

	#mfp_overlay_inner{
		color:#333;
	}




/* ------------------------------------------------------------------------------
	Footer
-------------------------------------------------------------------------------*/
footer {

    position: relative;
    background: #111;
    padding: 1.5em 0;
    letter-spacing: 0.1em;
}

.fIcon {
    font-size: 30px;
    margin: 5px 0;
}

.fIcon i {
    padding: 0 0.2em;
}
.fIcon i {
    color: #fff;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
        font-size: 14px;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}




/* ------------------------------------------------------------------------------
	スライド
-------------------------------------------------------------------------------*/


    .swiper-container {
    width: 80%;
    margin-left: auto;
    margin-right: auto;

    }
	



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



 .swiper-container {
width: 90%;
    margin-left: auto;
    margin-right: auto;
	margin-bottom:0;
  border:none;
    }

}



@media screen and (min-width: 768px) {	
#topImages{height:600px;}
#topImages{display: block;}
#topImages2{display: none;}
.swiper-container{ height:300px;}
h2.catch{font-size:35px;
	top:18%;}
}


@media screen and (min-width: 992px) {	
#topImages{height:700px;}
.swiper-container{ height:400px;}
h2.catch{font-size:40px;}
}

@media screen and (min-width: 1400px) {	
#topImages{height:700px;}
.swiper-container{ height:500px;}
h2.catch{font-size:45px;
	top:16%;}

}



@media(max-width: 576px){

.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 27px;
    height: 44px;
    margin-top: -22px;
    z-index: 10;
    cursor: pointer;
    -moz-background-size: 27px 44px;
    -webkit-background-size: 27px 44px;
    background-size: 17px 24px;
    background-position: center;
    background-repeat: no-repeat;
}

}



.button-row {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
	
.button-row > div {
  position: relative;
  width: 160px;
  height: 50px;
  margin: 0 15px;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}
.button-row > div > a {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(-25px);
  -moz-transform: translateZ(-25px);
  -ms-transform: translateZ(-25px);
  -o-transform: translateZ(-25px);
  transform: translateZ(-25px);
  -webkit-transition: -webkit-transform 0.25s;
  -moz-transition: -moz-transform 0.25s;
  transition: transform 0.25s;
}
.button-row > div > a::before, .button-row > div > a::after {
  justify-content: center;
  align-items: center;
  margin: 0;
  width: 160px;
  height: 50px;
  position: absolute;
  border: 5px solid black;
  box-sizing: border-box;
  content: attr(title);
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}
.button-row > div > a::before {
  background-color: #fff; /* 反転させた背景色 */
  color: #000; /* 反転させた文字色 */
  -webkit-transform: rotateY(0deg) translateZ(25px);
  -moz-transform: rotateY(0deg) translateZ(25px);
  -ms-transform: rotateY(0deg) translateZ(25px);
  -o-transform: rotateY(0deg) translateZ(25px);
  transform: rotateY(0deg) translateZ(25px);
}
.button-row > div > a::after {
  background-color: #000; /* 反転させた背景色 */
  border-color: #fff; /* 反転させたボーダーカラー */
  color: #fff; /* 反転させた文字色 */
  -webkit-transform: rotateX(90deg) translateZ(25px);
  -moz-transform: rotateX(90deg) translateZ(25px);
  -ms-transform: rotateX(90deg) translateZ(25px);
  -o-transform: rotateX(90deg) translateZ(25px);
  transform: rotateX(90deg) translateZ(25px);
}
.button-row > div > a:hover {
  -webkit-transform: translateZ(-25px) rotateX(-90deg);
  -moz-transform: translateZ(-25px) rotateX(-90deg);
  -ms-transform: translateZ(-25px) rotateX(-90deg);
  -o-transform: translateZ(-25px) rotateX(-90deg);
  transform: translateZ(-25px) rotateX(-90deg);
}





.button-row {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
	
.button-row > div {
  position: relative;
  width: 160px;
  height: 50px;
  margin: 0 15px;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}
.button-row > div > a {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(-25px);
  -moz-transform: translateZ(-25px);
  -ms-transform: translateZ(-25px);
  -o-transform: translateZ(-25px);
  transform: translateZ(-25px);
  -webkit-transition: -webkit-transform 0.25s;
  -moz-transition: -moz-transform 0.25s;
  transition: transform 0.25s;
}
.button-row > div > a::before, .button-row > div > a::after {
  justify-content: center;
  align-items: center;
  margin: 0;
  width: 160px;
  height: 50px;
  position: absolute;
  border: 5px solid black;
  box-sizing: border-box;
  content: attr(title);
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}
.button-row > div > a::before {
  background-color: #fff; /* 反転させた背景色 */
  color: #000; /* 反転させた文字色 */
  -webkit-transform: rotateY(0deg) translateZ(25px);
  -moz-transform: rotateY(0deg) translateZ(25px);
  -ms-transform: rotateY(0deg) translateZ(25px);
  -o-transform: rotateY(0deg) translateZ(25px);
  transform: rotateY(0deg) translateZ(25px);
}
.button-row > div > a::after {
  background-color: #000; /* 反転させた背景色 */
  border-color: #fff; /* 反転させたボーダーカラー */
  color: #fff; /* 反転させた文字色 */
  -webkit-transform: rotateX(90deg) translateZ(25px);
  -moz-transform: rotateX(90deg) translateZ(25px);
  -ms-transform: rotateX(90deg) translateZ(25px);
  -o-transform: rotateX(90deg) translateZ(25px);
  transform: rotateX(90deg) translateZ(25px);
}
.button-row > div > a:hover {
  -webkit-transform: translateZ(-25px) rotateX(-90deg);
  -moz-transform: translateZ(-25px) rotateX(-90deg);
  -ms-transform: translateZ(-25px) rotateX(-90deg);
  -o-transform: translateZ(-25px) rotateX(-90deg);
  transform: translateZ(-25px) rotateX(-90deg);
}




/* this is just icing */
/*.mains {
  font-family: "Oswald", Helvetica, Arial, sans-serif!important;
  font-weight: 300!important;
  text-transform: uppercase!important;
  padding: 0!important;
  margin: 0!important;
}

.mains{
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}

.mains {
  height: 100%;
}
*/



.button-container {
	padding-top: 15px;
  display: flex;
  flex-wrap: wrap; /* スマホなどで折り返せるように */
  gap: 25px;
  justify-content: center; /* 中央寄せ（必要なら） */
}
.button-container a img {
  display: block;
  width: 150px; /* 必要に応じてサイズ指定 */
  height: auto;
  cursor: pointer;
}


.button-containers {
width: 180px!important;
}

@media(min-width: 577px){
 .button-container {
	margin-bottom:-4rem;
}}