@charset "UTF-8";

/*
========================================================================================================================
== Common Styles
========================================================================================================================
*/
body {
	font-family: 'Noto Sans JP', sans-serif;
	background-color: #fff;
}

/* --- @media
================================================ PC
*/
@media print, screen and (min-width: 768px) {
	body {
		font-size: 1.8rem;
		line-height: 1.67;
		color: #2c474a;
		letter-spacing: 0.2rem;
	}
	.View--SP {
		display: none!important;
	}
}
/*
================================================ Tablet
*/
@media screen and (min-width: 768px) and (max-width: 930px) {}
/*
================================================ Smart Phone
*/
@media screen and (max-width: 767px) {
	body {
		font-size: 1.3rem;
		line-height: 1.4;
		letter-spacing: 0.2rem;
		color: #2c474a;
	}
	.View--PC {
		display: none!important;
	}
}

a:link,
a:visited {
	color: #2c474a;
	text-decoration: underline;
}
a:active,
a:hover {
	color: #2c474a;
	text-decoration: none;
}

/*
========================================================================================================================
== Public Styles
========================================================================================================================
*/

/* Bug Fix ? */
img[src$=".svg"] {
	width: 100%;
}
.Figure img {
	vertical-align: bottom;
}

a > img {
	transition: opacity .3s;
}
a > img:hover,
a > img:active {
	opacity: 0.6;
}

/* === Use State Change === */
.State--On {}
.State--Active {}
.State--Off {}
.State--Open {}
.State--Close {}
.State--New {}
.State--On > a:active,
.State--On > a:hover { text-decoration: none; }
.Has--Child {}

/* === Position States === */
.Align--Right { text-align: right; }
.Align--Center { text-align: center; }
.Align--Left { text-align: left; }

/* === Text Variation === */
.Text__JP {
}
.Text__EN {
	font-family: Helvetica, sans-serif;
	font-weight: 900;
}

/* === Layout === */

.Container {
	position: relative;
}

.Title {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 900;
}
.Title__h1 {
	text-align: center;
}
.Title__h2 {
}

.Section {
	text-align: center;
}

/* --- @media
================================================ PC
*/
@media print, screen and (min-width: 768px) {
	.Title__h1 {
		margin-right: -2rem;
		font-size: 3rem;
		letter-spacing: 2rem;
	}
	.Title__h2 {
		margin-right: -2rem;
		font-size: 3rem;
		letter-spacing: 2rem;
	}
	.Menu .Contents {
		max-width: 1000px;
		margin: 0 auto;
	}
}
/*
================================================ Tablet
*/
@media screen and (min-width: 768px) and (max-width: 930px) {}
/*
================================================ Smart Phone
*/
@media screen and (max-width: 767px) {
	.Contents {
		padding: 0 20px;
	}
	.Title__h1 {
		margin-right: -1rem;
		font-size: 1.8rem;
		letter-spacing: 1rem;
	}
	.Title__h2 {
		margin-right: -1rem;
		font-size: 1.8rem;
		letter-spacing: 1rem;
	}
}



/*
========================================================================================================================
== Header Styles
========================================================================================================================
*/
.Container > .Header {
	width: 100%;
	margin: 0 auto;
	z-index: 100;
	transition: all 0.3s ease;
}

.Home .Container > .Header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	text-align: center;
}
.Header > .Logo {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: auto;
	margin: auto;
	line-height: 1;
}
.GlobalNavigation {
	position: absolute;
	font-weight: bold;
	line-height: 1;
	text-align: center;
}
.GlobalNavigation a {
	display: block;
	color: #2c474a;
	text-decoration: none;
	border: 2px solid #2c474a;
	background-color: rgba(255,255,255,0.2);
	transition: all 1s ease;
}
.GlobalNavigation a:hover {
	text-decoration: none;
	color: #fff;
	border-color: #fff;
	background-color: rgba(44,71,74,1);
}
.GlobalNavigation a > span {
	display: block;
}
.GlobalNavigation a > .Upper {
	border-bottom: 2px solid #2c474a;
	transition: border-color 1s ease;
}
.GlobalNavigation a:hover > .Upper {
	border-color: #fff;
}

.Container > .Header.State--Fixed {
	position: fixed;
	top: 0;
}
.Container > .Header.State--Hide {
	top: -70px;
}

/* --- @media
================================================ PC
*/
@media print, screen and (min-width: 768px) {
	.Container > .Header {
		height: 70px;
	}
	.Header > .Logo {
		top: 18px;
		width: 196px;
	}
	.GlobalNavigation {
		top: 13px;
		right: 12px;
		font-size: 1.5rem;
		letter-spacing: 0;
	}
	.GlobalNavigation a {
		width: 56px;
		height: 56px;
		padding: 5px 3px 0;
	}
	.Menu .GlobalNavigation a {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.GlobalNavigation a > .Upper {
		margin: 0 0 6px;
		padding: 0 0 5px;
	}
	.GlobalNavigation a > .Bottom {
	}
	.GlobalNavigation a > .Home {
		position: relative;
		top: -2px;
		line-height: 1;
	}
}
/*
================================================ Tablet
*/
@media screen and (min-width: 768px) and (max-width: 930px) {}
/*
================================================ Smart Phone
*/
@media screen and (max-width: 767px) {
	.Container > .Header {
		width: 100%;
		height: 60px;
	}
	.Header > .Logo {
		top: 22px;
		bottom: auto;
	}
	.Home .Container > .Header {
		height: 50px;
	}
	.Header > .Logo {
		width: 150px;
	}
	.GlobalNavigation {
		top: 14px;
		right: 13px;
	}
	.GlobalNavigation {
		font-size: 0.9rem;
		letter-spacing: -0.02rem;
	}
	.GlobalNavigation a {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		width: 34px;
		height: 34px;
		padding: 2px 1px 0;
		border-width: 1px;
	}
	.GlobalNavigation a > .Upper {
		margin: 0 0 1px;
		padding: 0 0 4px;
		border-width: 1px;
	}
	.GlobalNavigation a > .Bottom {
	}
	.GlobalNavigation .Home {
		display: inline-block;
		margin: -2px 0 0;
	}
}


/*
========================================================================================================================
== Slider Styles
========================================================================================================================
*/

.Section__Slider {
	position: relative;
}
.Section__Slider > .Copy {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin: auto;
	color: #fff;
	text-align: center;
	z-index: 98;
}
.Section__Slider > .Copy > span {
	display: block;
}
.Section__Slider > .Copy .Text__JP {
	font-weight: 900;
}


/* --- @media
================================================ PC
*/
@media print, screen and (min-width: 768px) {
	.Section__Slider {
		margin-bottom: 80px;
	}
	.Section__Slider > .Copy .Text__EN {
		margin: 0 -2.5rem 25px 0;
		font-size: 3.6rem;
		line-height: 2;
		letter-spacing: 2.5rem;
	}
	.Section__Slider > .Copy .Text__JP {
		margin-right: -2.2rem;
		font-size: 2.4rem;
		line-height: 2;
		letter-spacing: 2.2rem;
	}
}
/*
================================================ Tablet
*/
@media screen and (min-width: 768px) and (max-width: 930px) {}
/*
================================================ Smart Phone
*/
@media screen and (max-width: 767px) {
	.Section__Slider {
		margin-bottom: 40px;
	}
	.Section__Slider > .Copy .Text__EN {
		margin: 0 -1.25rem 10px 0;
		font-size: 1.8rem;
		line-height: 2;

		letter-spacing: 1.25rem;
	}
	.Section__Slider > .Copy .Text__JP {
		margin-right: -1.1rem;
		font-size: 1.2rem;
		line-height: 2;
		letter-spacing: 1.1rem;
	}
}







/*
========================================================================================================================
== Sections
========================================================================================================================
*/


/* Catch */
.Section__Catch {
}


/* --- @media
================================================ PC
*/
@media print, screen and (min-width: 768px) {
	.Section__Catch {
		max-width: 1000px;
		margin: 0 auto 70px;
		padding: 0 15px;
		line-height: 2.67;
	}
	.Section__Catch > p:first-child {
		margin-right: -0.2rem;
		margin-bottom: 75px;
	}
	.Section__Catch .Logo img {
		width: 310px;
		height: auto;
	}
}
/*
================================================ Tablet
*/
@media screen and (min-width: 768px) and (max-width: 930px) {}
/*
================================================ Smart Phone
*/
@media screen and (max-width: 767px) {
	.Section__Catch {
		margin-bottom: 70px;
		font-size: 1.3rem;
		line-height: 2.5;
		letter-spacing: 0.1rem;
	}
	.Section__Catch p {
		margin-bottom: 50px;
	}
	.Section__Catch p:last-child {
		margin-bottom: 0;
	}
	.Section__Catch .Logo img {
		width: 155px;
	}
}




/* Images */
.Section__Images {
}

/* --- @media
================================================ PC
*/
@media print, screen and (min-width: 768px) {
	.Section__Images {
		display: flex;
		margin-bottom: 80px;
		flex-wrap: wrap;
	}
	.Section__Images > .Figure {
		width: 50%;
	}
}
/*
================================================ Tablet
*/
@media screen and (min-width: 768px) and (max-width: 930px) {}
/*
================================================ Smart Phone
*/
@media screen and (max-width: 767px) {
	.Section__Images {
		margin-bottom: 70px;
	}
	.Section__Images > .Figure {
		margin-bottom: 10px;
	}
	.Section__Images > .Figure:last-child {
		margin-bottom: 0;
	}
}




/* Information */
.Section__Information {
}
.Table__Address {
	width: auto;
	margin: 0 auto;
}
.Table__Address th {
	text-align: right;
	font-weight: normal;
}
.Table__Address td {
	text-align: left;
}

/* --- @media
================================================ PC
*/
@media print, screen and (min-width: 768px) {
	.Section__Information {
		max-width: 1000px;
		margin: 0 auto 80px;
		padding: 0 15px;
	}
	.Section__Information > .Title__h2 {
		margin-bottom: 80px;
	}
	.Table__Address th,
	.Table__Address td {
		padding: 0 16px 15px;
	}
	.Table__Address th {
		width: 149px;
	}
	.Table__Address td {
	}
}
/*
================================================ Tablet
*/
@media screen and (min-width: 768px) and (max-width: 930px) {}
/*
================================================ Smart Phone
*/
@media screen and (max-width: 767px) {
	.Section__Information {
		margin-bottom: 40px;
		line-height: 1.4;
	}
	.Section__Information > .Title__h2 {
		margin-bottom: 40px;
		letter-spacing: 1rem;
	}
	.Table__Address th,
	.Table__Address td {
		padding: 0 8px 7px;
	}
	.Table__Address th {
		width: 20%;
	}
}




/* Map */
.Section__Map {
}
.Section__Map iframe {
	width: 100%;
}

/* --- @media
================================================ PC
*/
@media print, screen and (min-width: 768px) {
	.Section__Map {
		margin-bottom: 140px;
	}
	.Section__Map iframe {
		height: 600px;
	}
}
/*
================================================ Tablet
*/
@media screen and (min-width: 768px) and (max-width: 930px) {}
/*
================================================ Smart Phone
*/
@media screen and (max-width: 767px) {
	.Section__Map {
		position: relative;
		margin-bottom: 70px;
		padding-bottom: 92.8%;
		height: 0;
		overflow: hidden;
	}
	.Section__Map iframe,
	.Section__Map object,
	.Section__Map embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}



/* MENU / PRICE */
.Section__Menu {
}

/* --- @media
================================================ PC
*/
@media print, screen and (min-width: 768px) {
	.Section__Menu {
		max-width: 1000px;
		margin: 0 auto 130px;
		padding: 0 15px;
	}
	.Section__Menu > .Title__h2 {
		margin-bottom: 90px;
	}
}
/*
================================================ Tablet
*/
@media screen and (min-width: 768px) and (max-width: 930px) {}
/*
================================================ Smart Phone
*/
@media screen and (max-width: 767px) {
	.Section__Menu {
		margin-bottom: 60px;
	}
	.Section__Menu > .Title__h2 {
		margin-bottom: 40px;
	}
}



/* Stylist */
.Section__Stylist {
}

/* --- @media
================================================ PC
*/
@media print, screen and (min-width: 768px) {
	.Section__Stylist {
		max-width: 1000px;
		margin: 0 auto 145px;
		padding: 0 15px;
	}
	.Section__Stylist > .Title__h2 {
		margin-bottom: 90px;
	}
	.Column__Stylist {
		display: flex;
		justify-content: center;
	}
	.Column__Stylist > .Figure {
		margin: 0 15px 0 0;
	}
	.Column__Stylist > .Figure:last-child {
		margin-right: 0;
	}
	.Column__Stylist > .Figure img {
		margin-bottom: 15px;
	}
	.Column__Stylist .Caption {
	}
}
/*
================================================ Tablet
*/
@media screen and (min-width: 768px) and (max-width: 930px) {}
/*
================================================ Smart Phone
*/
@media screen and (max-width: 767px) {
	.Section__Stylist {
		margin-bottom: 50px;
	}
	.Section__Stylist > .Title__h2 {
		margin-bottom: 45px;
	}
	.Column__Stylist {
		display: flex;
		justify-content: start;
		flex-wrap: wrap;
	}
	.Column__Stylist > .Figure {
		width: calc(50% - 5px);
		margin-bottom: 15px;
	}
	.Column__Stylist > .Figure:nth-child(odd) {
		margin-right: 5px;
	}
	.Column__Stylist > .Figure:nth-child(even) {
		margin-left: 5px;
	}
	.Column__Stylist > .Figure img {
		margin-bottom: 7px;
	}
	.Column__Stylist .Caption {
		font-size: 1.2rem;
	}
}


/* Recruit */
.Section__Recruit {
}

/* --- @media
================================================ PC
*/
@media print, screen and (min-width: 768px) {
	.Section__Recruit {
		max-width: 1000px;
		margin: 0 auto 80px;
		padding: 0 15px;
	}
	.Section__Recruit > .Title__h2 {
		margin-bottom: 90px;
	}
	.Section__Recruit > p {
		margin-bottom: 2rem;
		text-align: left;
	}
	.Section__Recruit > p:last-child {
		margin-bottom: 0;
	}
}
/*
================================================ Tablet
*/
@media screen and (min-width: 768px) and (max-width: 930px) {}
/*
================================================ Smart Phone
*/
@media screen and (max-width: 767px) {
	.Section__Recruit {
		margin-bottom: 60px;
	}
	.Section__Recruit > .Title__h2 {
		margin-bottom: 45px;
	}
	.Section__Recruit > p {
		margin-bottom: 2rem;
		font-size: 1.2rem;
		line-height: 2;
		text-align: left;
	}
	.Section__Recruit > p:last-child {
		margin-bottom: 0;
	}
}



/* Footer */
.Footer {
	color: #fff;
	background-color: #2c474a;
}
.Footer a {
	color: #fff;
	text-decoration: none;
}
.Footer > .Inner {
	margin: 0 auto;
	text-align: left;
}

.List__SNS {
	display: flex;
}
.List__SNS > li {
	margin: 0 15px;
}
.List__SNS > li:last-child {
	margin-right: 0;
}

.Footer dl > dt {
	font-weight: bold;
}

.Phone {
	font-weight: bold;
}
.Footer .Copyright {
	text-align: center;
}

/* --- @media
================================================ PC
*/
@media print, screen and (min-width: 768px) {
	.Figure__Footer {
		max-width: 1000px;
		margin: 0 auto 100px;
	}
	.Footer {
		padding: 50px 15px 15px;
	}
	.Footer > .Inner {
		max-width: 1000px;
	}
	.Footer__Header {
		display: flex;
		margin-bottom: 45px;
		align-items: center;
		justify-content: space-between;
	}
	.Footer .Logo {
		width: 303px;
	}
	.Footer .Icon__Twitter {
		position: relative;
		width: 29px;
		top: -1px;
	}
	.Footer .Icon__Facebook {
		width: 27px;
	}
	.Footer .Icon__Insta {
		width: 27px;
	}
	.Footer .Icon__Blog {
		position: relative;
		width: 28px;
		top: -1px;
	}
	.Footer .Copyright {
		margin-top: 65px;
		font-size: 1.4rem;
	}

	.Footer dl {
		margin-bottom: 15px;
	}

	.Footer dl > dd {
		font-size: 1.6rem;
	}

}
/*
================================================ Tablet
*/
@media screen and (min-width: 768px) and (max-width: 930px) {}
/*
================================================ Smart Phone
*/
@media screen and (max-width: 767px) {
	.Figure__Footer {}
	.Footer {
		padding: 33px 20px 16px;
		line-height: 1.4;
	}
	.Footer > .Inner {
		text-align: center;
	}
	.Footer__Header {
		margin-bottom: 25px;
	}
	.Footer .Logo {
		width: 188px;
	}
	.Footer .Icon__Twitter {
		position: relative;
		width: 29px;
		top: 2px;
	}
	.Footer .Icon__Facebook {
		width: 27px;
	}
	.Footer .Icon__Insta {
		width: 27px;
	}
	.Footer .Icon__Blog {
		position: relative;
		width: 28px;
		top: -4px;
	}
	.Footer .Copyright {
		font-size: 1.2rem;
		letter-spacing: 0;
	}

	.Footer dl {
		margin-bottom: 14px;
		padding-bottom: 25px;
		border-bottom: 1px solid rgba(255,255,255,0.3);
	}

	.Footer dl > dt {
		margin-bottom: 12px;
		font-size: 1.2rem;
	}
	.Footer dl > dd {
		margin-bottom: 12px;
		font-size: 1rem;
	}
	.Footer dl > dd:last-child {
		margin-bottom: 0;
	}

	.List__SNS {
		margin-bottom: 20px;
		justify-content: center;
	}
	.List__SNS > li:first-child {
		margin-left: 0;
	}
	.Footer .Phone {
		margin-bottom: 25px;
		padding-bottom: 15px;
		border-bottom: 1px solid rgba(255,255,255,0.3);
		font-size: 1.3rem;
		letter-spacing: 0.1rem;
	}
}



/*
========================================================================================================================
== MENU / PRICE Styles
========================================================================================================================
*/

/* MV */
.Section__MV {
}

.Header__Contents {
	text-align: center;
}
.Table__Price {
	width: 100%;
	border-collapse: collapse;
}
.Table__Price th {
	font-weight: 500;
	text-align: left;
}
.Table__Price td {
	text-align: right;
}
.Column__PriceList > * {
	text-align: left;
}
.Separator {
	border-bottom: 1px solid #d5dadb;
}
.List.List__Note > li {
	position: relative;
	padding: 0 0 0 14px;
}
.List.List__Note > li::before {
	content: "※";
	position: absolute;
	top: 0;
	left: 0;
}

.List.List__Circle > dt {
	font-weight: bold;
}
.List.List__Circle > dt,
.List.List__Circle > dd {
	position: relative;
	padding: 0 0 0 15px;
}
.List.List__Circle > dt::before {
	content: "●";
	position: absolute;
	top: 0;
	left: 0;
}


.Menu .Section .Title__h2 {
	margin-bottom: 15px;
	margin-right: 0;
	padding-bottom: 15px;
	text-align: center;
	letter-spacing: 0.01em;
	border-bottom :1px solid #2c474a;
}

.Cell__Discount {
	padding: 30px 20px;
	background-color: #eff7eb;
}
.Cell__Discount strong {
	font-weight: 900;
}
.Section__Note .Cell__Discount .Title__h2 {
	margin-bottom: 20px;
	padding-bottom: 0;
	border: none;
}

/* --- @media
================================================ PC
*/
@media print, screen and (min-width: 768px) {
	.Section__MV {
		max-width: 1000px;
		margin: 0 auto 95px;
	}
	.Menu .Header__Contents {
		margin-bottom: 90px;
	}
	.Menu .Header__Contents .Title__h1 {
		margin-bottom: 5px;
	}
	.Menu .Header__Contents .Text__Note {
		font-size: 1.4rem;
	}
	.Menu .Section {
		font-size: 1.4rem;
		line-height: 1.714;
	}
	.Table__Price {
		margin: 0 0 10px;
	}
	.Table__Price th,
	.Table__Price td {
		padding: 0 0 10px;
	}
	.Table__Price th span,
	.Table__Price td span {
		font-size: 1.2rem;
	}
	.Separator {
		margin-bottom: 20px;
	}
	.Column__PriceList {
		display: flex;
		margin-bottom: 150px;
		justify-content: space-between;
	}
	.Column__PriceList > * {
		max-width: 450px;
	}
	.Column__PriceList > *:first-child {
		margin-right: 15px;
	}
	.Column__PriceList > *:last-child {
		margin-left: 15px;
	}
	.Table__Price + .List.List__Note {
		margin-top: 30px;
	}
	.List.List__Note > li {
		margin: 10px 0;
		font-size: 1.2rem;
	}

	.Menu .Section .Title__h2 {
		font-size: 1.8rem;
	}

	.Section__Note .Cell {
	}
	.Cell__Reservation {
		margin-bottom: 90px;
	}
	.Cell__Time {
		margin-bottom: 45px;
	}
	.List.List__Circle {
		margin-bottom: 25px;
	}
	.List.List__Circle:last-child {
		margin-bottom: 0;
	}
	.Cell__Discount p {
		margin-bottom: 30px;
	}
	.Cell__Discount strong {
		font-size: 1.8rem;
	}

}
/*
================================================ Tablet
*/
@media screen and (min-width: 768px) and (max-width: 930px) {}
/*
================================================ Smart Phone
*/
@media screen and (max-width: 767px) {
	.Section__MV {
		margin-bottom: 70px;
	}
	.Menu .Header__Contents {
		margin-bottom: 45px;
	}
	.Menu .Header__Contents .Title__h1 {
		margin-bottom: 5px;
	}
	.Menu .Header__Contents .Text__Note {
		font-size: 1.05rem;
	}
	.Menu .Section {
		font-size: 1.2rem;
		line-height: 2;
	}
	.Table__Price {
		margin: 0 0 10px;
	}
	.Table__Price th,
	.Table__Price td {
		padding: 0 0 5px;
		line-height: 1.6;
	}
	.Table__Price td {
		white-space: nowrap;
	}
	.Table__Price th span,
	.Table__Price td span {
		font-size: 0.9rem;
	}
	.Separator {
		margin-bottom: 15px;
	}
	.Column__PriceList > * {
		margin-bottom: 75px;
	}
	.Table__Price + .List.List__Note {
		margin-top: 25px;
	}
	.List.List__Note > li {
		margin: 5px 0;
		font-size: 1.05rem;
	}


	.Menu .Section .Title__h2 {
		font-size: 1.6rem;
		letter-spacing: 0.3rem;
	}
	.Cell__Reservation {
		margin-bottom: 60px;
	}
	.Cell__Time {
		margin-bottom: 60px;
	}
	.List.List__Circle {
		margin-bottom: 25px;
	}
	.List.List__Circle:last-child {
		margin-bottom: 0;
	}
	.List.List__Circle > dt {
		margin-bottom: 3px;
	}
	.List.List__Circle > dd {
		line-height: 1.5;
	}
	.Cell__Discount p {
		margin-bottom: 30px;
	}
	.Cell__Discount strong {
		font-size: 1.5rem;
	}
	.Cell__Discount .List.List__Note > li {
		font-size: 0.9rem;
	}
}



/*
========================================================================================================================
== Javascript Effects Styles
========================================================================================================================
*/
/* Fade In Effect */
.JS__FadeIn {
	-webkit-transition: all .8s ease;
	transition: all .8s ease;
	-webkit-transform: translateY(100px);
	-ms-transform: translateY(100px);
	transform: translateY(100px);

	opacity: 0;
}