@charset "UTF-8";
/* CSS Document */



@media (max-width: 780px){
	html{
		font-size: 2vw;	
	}
	section .box-text{
		font-size: 1.6em;
	}
	
}
/* ==================================
	header
	================================== */
.header-logo-svg path{
	fill: #302322;
}
.header-wrap .header-r nav ul li a{
	color: #302322;
}
.header-wrap .header-r nav ul.nav-btn-list li.nav-item-ig::before {
    width: 16px;
    height: 16px;
    background-image: url(../images/common/instagram-b.svg);
    background-size: 16px 16px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.header-wrap .header-r nav ul.nav-btn-list li.nav-item-contact::before {
    width: 20px;
    height: 14px;
    background-image: url(../images/common/contact-b.svg);
    background-size: 20px 14px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    padding: 0 0 0 32px;
}

@media (max-width: 780px){
	.header-wrap .header-r nav ul.nav-btn-list li.nav-item-ig::before{
		background-image: url(../images/common/instagram.svg);
	}
	.active	.header-logo-svg path{
		fill: #fff;
	}
	.openbtn span{
		background-color: #302322;
}
	.active .header-wrap .openbtn span{
		background-color: #fff;
}
	.sp-header-r .nav-item-contact{
		background-image: url("../images/common/contact-b.svg");
	}
	.active .sp-header-r .nav-item-contact{
		background-image: url("../images/common/contact.svg");
	}
	.active .header-wrap .header-r nav ul li a{
	color: #fff;
}
}
/* ==================================
	wrapper-common
	================================== */
.news .main-mv .title-container,
.style .main-mv .title-container{
    border-bottom: none;
}
section .flex-container2 {
    display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
}
.wrapper .box-l,
.wrapper .box-r{
	width: 50%;
}
.wrapper .box-r49,
.wrapper .box-l49{
	width: 49%;
	position: relative;
}
.wrapper .box-r47,
.wrapper .box-l47{
	width: 47%;
}
@media (max-width: 780px){
	.wrapper .box-l47, 
	.wrapper .box-r47{
		width: 100%;
	}
	.wrapper .box-l47{
		margin-bottom: 8em;
	}
	.wrapper .box-r49,
	.wrapper .box-l49{
		width: 100%;
	}
	.wrapper .box-l49{
		padding-bottom: 10.6%;
	}
}
/* ==================================
	title
	================================== */
.main-mv .title-container{
	height: 540px;
    position: relative;
    border-bottom: #eee solid 1px;
}
.main-mv .inner.flex-container{
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
    position: absolute;
    bottom: 0;
    height: 430px;
    left: 50%;
    transform: translate(-50%, 0);
}
.wrapper .main-mv .box-title h2{
	font-size: 36px;
	margin: 0 0 28px;
	letter-spacing: 0.12em;
}
.wrapper .main-mv .box-title h2.title::before{
	display: none;
}
.wrapper .main-mv .box-title h3.title-jp{
	margin-left: 0;
	font-size: 12px;
	letter-spacing: 0.16em;
}
.wrapper .main-mv .flex-container .box-title{
	width: 40%;
}
.wrapper .main-mv .flex-container .box-r{
	width: 60%;
}

@media (max-width: 780px){
	.wrapper .main-mv .title-container {
    	padding: 40vw 0 30vw;
        height: auto;
}
	.wrapper .main-mv .flex-container .box-title,
    .wrapper  .main-mv .flex-container .box-l,
    .wrapper .main-mv .flex-container .box-r,
    .wrapper .box-l, .wrapper .box-l,
    .wrapper .box-l, .wrapper .box-r{
		width: 100%;
	}
	.wrapper .main-mv .inner.flex-container {
    	position: relative;
        height: auto;
        left: 0; 
        transform: translate(0, 0);
	}
    .wrapper .main-mv .box-title {
        margin: 0 auto 4.4em;
    }
	.wrapper .main-mv .box-title h2{
		font-size: 4.4em;
        margin: 0 0 0.4em;
	}
    .wrapper .main-mv .box-title h3.title-jp {
        font-size: 1.8em;
    }
}
/* ==================================
	school&service
	================================== */
.wrapper h3.font-serif{
	font-size: 32px;
    color: #8e704a;
    line-height: 1;
    margin-bottom: 72px;
	letter-spacing: 0.18em;
}
.main-wrap .box-text{
	padding: 0 8%;
	margin: 180px 0;
}
.wrapper{
    overflow: visible;
}
.wrapper .main-wrap .sticky{
	position: sticky;
    top: 0;
    display: block;
}
.wrapper .title-wrap p{
	letter-spacing: 0.24em;
}

@media (max-width: 780px){
	.main-wrap .box-text {
    	margin: 30vw 0 30vw;
	}
	.wrapper h3.font-serif{
		font-size: 3.2rem;
		margin-bottom: 3.2rem;
	}

}
/* ==================================
	service
	================================== */
.service .box-text p{
	margin-bottom: 40px;
}
.service .box-text p:last-of-type{
	margin-bottom: 72px;
}
.service .red-btn:first-of-type{
	margin-right: 20px;
}
.service .box-r .img {
    background: url(../images/top/service-extensions.jpg) center center/cover no-repeat;
}
.service .box-l .img {
    background: url("../images/top/service-eyebrow.jpg")center center/cover no-repeat;
}
.service .img {
    position: relative;
    overflow: hidden;
    padding-top: 100vh;
    -webkit-transition: .6s;
    -o-transition: .6s;
	transition: .6s;
}
@media (max-width: 780px){
	.wrapper .service  h3.font-serif{
		margin-bottom: 4.3rem;
	}
	.service .main-wrap .flex-container{
		flex-direction: column;
	}
	.service .box-text p:last-of-type{
		margin-bottom: 6rem;
	}
	.service .red-btn:first-of-type{
		margin-bottom: 2em;
	}
	#eye{
		-webkit-box-orient: vertical;
  		-webkit-box-direction: reverse;
  		-ms-flex-direction: column-reverse;
  		flex-direction: column-reverse;
	}
	.service .box-text p{
		margin-bottom: 3rem;
	}
	.red-btn a{
		font-size: 1.4rem;
	}
}
/* ==================================
	school
	================================== */
.school .anc-wrap.flex-container{
    margin-top: 48px;
}
.school .anc {
    margin-right: 56px;
	position: relative;
	padding-right: 20px;
	letter-spacing: 0.18em;
	font-size: 14px;
}
.school .anc::after {
    content: "";
	position: absolute;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	transform: rotate(45deg);
	width: 8px;
	height: 8px;
	right: 0px;
	top: 24%;
}
.school .box-text li{
	margin-top: 80px;
}
.school .box-text p{
	line-height: 2;
	letter-spacing: 0.22em;
}
.school h5{
	margin-bottom: 16px;
	font-size: 16px;
	letter-spacing: 0.06em;
	line-height: 1;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
.school li:last-of-type{
	margin-bottom: 0;
}
.school h4{
	font-size: 18px;
	letter-spacing: 0.08em;
	color: #8e704a;
	position: relative;
	line-height: 56px;
}
.school .text-wrap li:nth-child(4){
	margin-bottom: 8px;
}
.school h4 .font-sans{
	font-style: italic;
}
.school .text-wrap h4::before{
	content: "";
	border: 1px #f0e4d6 solid;
	border-radius: 50%;
	width: 56px;
	height: 56px;
	position: absolute;
	left: -24px;
	z-index: -1;
}
.school .img {
    background: url("../images/top/extensions-bg.jpg") center center/cover no-repeat;
}
.school .img {
    background: url("../images/top/eyebrow-bg.jpg")center center/cover no-repeat;
}
.school .img {
    position: relative;
    height: 100vh;
    -webkit-transition: .6s;
    -o-transition: .6s;
	transition: .6s;
}
.btn-wrap{
	margin-top: 70px;
}
.mdl-btn{
	padding: 26px 0;
	border-top: #eee solid 1px;
	position: relative;
	display: block;
}
.mdl-btn:last-of-type{
	border-bottom: #eee solid 1px;
}
.mdl-btn::before,
.mdl-btn::after{
	content: "";
	position: absolute;
	background-color: #a81f1f;
}
.mdl-btn::before{
	width: 17px;
	height: 1px;
	right: 20px;
    top: 50%;
}
.mdl-btn::after{
	height: 17px;
	width: 1px;
	right: 28px;
    top: 42%;
}
.school .text-wrap li .gray{
	margin-top: 8px;
	color: #817271;
	display: block;
}
@media (max-width: 780px){
	.school .anc-wrap{
		flex-direction: column;
	}
	.school .anc:last-of-type{
		margin-top: 16px;
	}
	.school .anc{
		font-size: 1.9em;
	}
	.school .box-text li{
		margin-top: 4rem;
	}
	.school .box-text li:first-child{
		margin-top: 5rem;
	}
	.school .text-wrap li .gray{
		margin-top: 1rem;
}
	.btn-wrap {
    	margin-top: 6rem;
}
	.school h5{
		margin-bottom: 1.5em;
    	font-size: 1.5em;
    	line-height: 1.3;
	}
	.school .box-text p{
		font-size: 1.6rem;
	}
	.school h4{
    	font-size: 2.7rem;
    	line-height: 13vw;
	}
	.school .text-wrap h4::before{
		width: 13vw;
   		height: 13vw;
		left: -4%;
	}
	.mdl-btn{
		padding: 2.2em 0;
	}
}
/* ==================================
	footer
	================================== */
.wrapper footer{
	margin-top: 0;
}
/* ==================================
	modaal
	================================== */
/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
	display: none;
}
/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}
/*確認を促すモーダル：タイトルの色を変更したい場合*/
#modaal-title{
	font-size:1.2rem;
	text-align: center;
	margin: 0 0 20px 0;
}
.modaal-container{
	height: 500px;
    overflow-y: scroll;
}
.modaal-close{
	height: 0;
}
/* ==================================
	style
	================================== */
.style .main-wrap ul{
    flex-wrap: wrap;
}
.style .style-item {
    width: calc(100% / 3 - 32px);
    margin-top: 148px;
    margin-right: 48px;
}
.style .style-item:nth-child(1),
.style .style-item:nth-child(2),
.style .style-item:nth-child(3){
    margin-top: 0;
}
.style li.style-item:nth-of-type(3n) {
	margin-right: 0px;
}
.style a.style-inner {
    display: block;
	position: relative;
}
.style .wrap-text {
    height: 160px;
    position: absolute;
    background-color: #fff;
    bottom: -70px;
    width: 80%;
}
.style .wrap-text-inner{
    margin: 40px 30px;
}
.style .wrap-text-inner p{
	font-size: 16px;
    width: 65%;
   	line-height: 1.75;
    margin-bottom: 8px;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	letter-spacing: 0.06em;
}
.style .wrap-text-inner span{
	color: #8e704a;
	margin-right: 8px;
	font-size: 12px;
	letter-spacing: 0.1em;
}
.style .main-wrap .inner{
	border-bottom: solid #eee 1px;
	padding-bottom: 210px;
}
.style .price-list .title-container{
	margin: 160px 0 80px;
	
}
.price-list .flex-container{
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.price-list .price-wrap{
	margin-bottom: 160px;
}
.price-list caption{
	font-size: 16px;
    font-weight: 100;
    color: #8e704a;
    margin-bottom: 24px;
}
.price-list th,
.price-list td{
    border: solid 1px #eee;
    padding: 6%;
}
.price-list th{
	max-width: 125px;
}
.price-list td{
    text-align: right;
	vertical-align: middle;
}
.price-list td p::after{
    content: "円";
}
@media (max-width: 1000px){
	.style .style-item{
	    width: calc(100% / 2 - 24px);
    	margin-bottom: 148px;
    	margin-right: 48px;
	}
	.style .style-item:nth-of-type(3n) {
    	margin-right: 48px;		
	}
	.style .style-item:nth-of-type(2n) {
    	margin-right: 0;
	}
}
@media (max-width: 780px){
	.style .main-wrap .inner{
		padding-bottom: 53vw;
	}
	.style .style-item {
    	width: 100%;
    	margin-bottom: 45%;
    	margin-right: 0;
		margin-top: 0;
	}
	.style .style-item:last-child{
		margin-bottom: 0;
	}
	.style .wrap-text{
		height: auto;
		bottom: -22%;
	    width: 85%;
	}
	.style .wrap-text-inner {
    	margin: 3em 5.6em 3em 3.5em;
	}
	.style .wrap-text-inner p {
    	width: 100%;
		font-size: 2.4rem;
		margin-bottom: 0.5em;
		line-height: 1.5;
	}
	.style .wrap-text-inner span{
		margin-right: 1.5rem;
		font-size: 1.6rem;
	}
	.style .price-list .title-container{
		margin:  21.4em 0px 10.7em;
	}
	.price-list caption{
	    font-size: 2.2rem;
		margin-bottom: 1em;
	}
	.price-list .price-wrap{
		margin-bottom: 21.4em;
	}
	.price-list tbody{
		font-size: 1.6rem;
	}
}
/* ==================================
	style detail
	================================== */
.style section#style-mv{
	width: 100%;
    height: 100vh;
    position: relative;
}
.style-img {
    width: 100%;
    height: 100%;
    position: relative;
}
.style-img  img{
    height: 100%;
	object-fit: cover;
	object-position: left;
}
.style-copy {
    width: 40%;
    padding: 7.3% 0 5.2%;
    position: absolute;
    right: 8%;
    background: #fff;
    bottom: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.style-copy-wrap {
    width: 70%;
}
.style-copy-jp {
    font-size: 2.4em;
    letter-spacing: 0.13em;
    line-height: 1.8;
    margin-bottom: 14%;
    position: relative;
    z-index: 1;
}
.style-copy-jp::before{
    content: "";
	background:url("../images/style/Styletheme.png");
	background-repeat: no-repeat;
	background-size: cover;
	width: 175px;
	height: 49px;
	position: absolute;
    top: -30px;
    left: -25px;
    z-index: -1;
}
.style-mv-text{
	display: flex;
    border: #f7af99 solid 1px;
    letter-spacing: 0.12em;
    font-size: 14px;
}
.style-mv-text span {
    padding: 6%;
}
.style-mv-text span:first-child {
    background-color: #f7af99;
    text-align: center;
	color: #fff;
}
.style-box{
	margin: 174px 0 120px;
}
.style-box .flex-container2 div::after{
	content: "";
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	margin: 9%;
	z-index: 1;
	left: 0;
}
.style-box .box-r49, 
.style-box .box-l49{
	min-width: 332px;
}
.style-box .box-l49::after{
	background-image: url("../images/style/Before.png");
	width: 24%;
    height: 13.2%;
}
.style-box .box-r49::after{
	background-image: url("../images/style/After.png");
	width: 24%;
    height: 14.3%;
}

.style-text {
    line-height: 2.5;
    letter-spacing: 0.24em;
    text-align: center;
    max-width: 800px;
    height: 230px;
    margin: 120px auto 200px;
    position: relative;
}
.style-text::after,
.style-text::before{
    width: 100%;
    height: 100%;
    content: "";
    border: solid 1px #f7af99;
    position: absolute;
}
.style-text::after{
	top: -5px;
    right: 5px;
}
.style-text::before{
	top: 5px;
    right: -5px;
}
.style-text p {
    top: 50%;
    right: 50%;
    position: absolute;
    transform: translate(50%, -50%);
    width: 100%;
}
.style-next {
    position: relative;
}
.style-next .style-next-inner{
	position: relative;
    height: 65.8vw;
}
.style-back{
    background-color: #f7edea;
    width: 92%;
    height: 65.8vw;
	position: absolute;
}
.style-next .flex-container {
    right: 0;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
	width: 92%;
	overflow: hidden;
}
section.style-next .title-container {
    width: auto;
    position: relative;
}
.style-next .box-title h2.title{
	margin: 0 0 55px;
}
.style-next .box-title h3.title-jp{
	font-size: 36px;
    width: 305px;
	margin-left: 0;
	letter-spacing: 0.06em;
    line-height: 1.8;
    color: #000;
	margin-bottom: 0;
}
.style-next .style-img-wrap{
    min-width: 650px;
	width: 75.7%;
    height: auto;
}
@media (max-width: 780px){
	.style section#style-mv {
		height: 74vh;
	}
	.style-img img {
    	object-position: 25%;
	}
	.mv-wrap {
   		position: absolute;
    	width: 100%;
    	margin-top: -16%;
}
	.style-copy{
		width: 88%;
    	bottom: auto;
		right: 6%;
		padding: 17% 0;
	}
	.style-copy-wrap {
    	width: 86%;
	}
	.style-copy .style-copy-jp{
		font-size: 2.8em;
    	width: 70%;
    	text-align: left;
    	margin: 0 auto 11%;
	}
	.style-copy-jp::before{
        width: 74%;
        height: 55%;
        top: -33%;
        left: -21%;
	}
	.style-copy .style-mv-text{
		font-size: 1.4em;
	}
	.style-mv-text span {
    	padding: 5% 0;
		text-align: center;
}
	.style-mv-text span:first-child{
		 width: 29%;
}
	.style-mv-text span:last-child {
    	width: 78%;
    	text-align: center;
}
	.style-box {
    	margin: 76.4% 0 16%;
	}
	.style-box .box-r49, 
	.style-box .box-l49{
		min-width: auto;
}
	.style-box .inner{
		width: 76%;
	}
	.style-text{
		line-height: 2;
    	letter-spacing: 0.18em;
		font-size: 1.6em;
		margin: 21% auto;
		text-align: left;
		height: 52.7vw;
	}
	.style-text p{
		width: 74%;
	}
	.style-back{
		height: 100%;
	}
	.style-next .style-next-inner {
    	height: 158.4vw;
		margin-bottom: 26.67%;
}
	.style-next .box-title h2.title {
    	margin: 0 0 8.7%;
	}
	.style-next .box-title h3.title-jp {
    	font-size: 2.8em;
   		width: 51.6%;
		margin: 0 0 8.7%;
	}
	.style-next .box-title h2.title{
		font-size: 2.8rem;
	}
	.style-next .style-img-wrap {
    	min-width: auto;
    	width: 164.9%;
	}
	.style-next .style-btn {
    	position: relative;
		margin-bottom: 13%;
	}
	.style-next .style-btn div{
		position: relative;
		display: inline-block;
		line-height: 1.3rem;
    	padding-right: 4.7rem;
		font-size: 1.6rem;
	}
	.style-next .style-btn div::before {
    	content: '';
    	position: absolute;
    	right: 0;
    	width: 20px;
    	height: 8px;
    	background: url(../images/common/arrow-red.svg) center center/cover no-repeat;
	}
	.style-next .flex-container {
    	top: auto;
    	transform: translate(0, 0);
    	bottom: 0;
	}
	.style-next-inner::after {
    	height: 16.837%;
    	content: "";
    	background-color: #f7edea;
    	position: absolute;
    	width: 100%;
    	bottom: -16.837%;
	}
	section.style-next .box-title h2.title::before {
    margin: 1.6rem 1.3rem 0 0;
}
}
/* ==================================
	contact
	================================== */
.contact .contact-box{
	padding: 160px 0;
	border-bottom: solid 1px #eee;
}
.contact input,
.contact textarea{
	padding: 10px;
	border: 1px solid #302322;
}
.contact span{
    color: #8e704a;
}
.contact h5 {
	font-weight: 600;
	padding-bottom: 10px;
}
.contact .check-box {
    padding-top: 54px;
}
.contact .check-box p{
    padding-bottom: 8px;
}
.contact .check-box p:last-child{
    padding-bottom: 0;
}
.contact-inner {
    padding-top: 32px;
}
.contact .contact-inner:last-of-type{
	padding-top: 54px;
}
.contact .contact-inner:last-of-type input{
	color: #fff;
    background-color: #8e704a;
    padding: 15px 50px;
    letter-spacing: 0.1em;
    border: none;
}
.salon-wrap{
	margin: 144px 0;
}
.salon .title-container {
    margin-bottom: 80px;
}
section.salon .salon-text .box-title h2.title {
    margin: 32px 0 32px 24px;
}
section.salon .salon-text .box-title h2.title::before {
    width: 16px;
    margin: 12px 16px 0 0;
}
.salon-text p{
	padding: 14px 24px;
	border-top: solid #eee 1px;
    border-bottom: solid #eee 1px;
}
.salon-text p:last-of-type {
    border-top:  none;
}
.salon-text a {
    padding-top: 24px;
    display: inline-block;
    border-bottom: solid 1px;
	margin-left: 24px;
	color: #8e704a;
}
@media (max-width: 780px){


	.contact-text input{
		width:100%
	}
	.contact-text textarea{
		width:100%
	}
	.check-box input{
		margin-right: 1em;
	}
	.check-box p{
		font-size: 1.4em;
    	letter-spacing: 0.1em;
	}
	.contact .contact-box{
		 padding: 30vw 0;
	}
	.contact .check-box {
    	padding-top: 5em;
	}
	.contact h5 {
    	padding-bottom: 1em;
		font-size: 1.6em;
	}
	.contact .contact-inner:last-of-type input{
		padding: 1.25em 1.875em;
	}
	.inner.contact-box h6{
		font-size: 1.6em;
	}
	.contact .contact-inner:last-of-type{
		padding-top: 5.6rem;
		font-size: 1.4em;
	}
	.contact .salon .title-container{
		 margin: 16% 0 16%;
	}
	.salon-box-text{
		font-size: 1.6em;
	}
	.salon-text p{
		padding: 1.4rem 2.4rem;
	}
	.salon-text a{
		padding-top: 2.4rem;
		margin-left: 2.4rem;
	}
}
/* ==================================
	news
	================================== */
.news-wrap .inner{
	width: 65%;
}
.news-inner{
	border-top: solid #eee 1px;
	width: 100%;
}
.news-inner:last-child{
	border-bottom: solid #eee 1px;
}
.datecate {
    margin-bottom: 10px;
}
.news .date{
	margin-right: 24px;
	font-family: 'Lato', sans-serif;
}
.news .news-inner a{
	padding: 32px 0;
	display: block;
	-webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
	font-size: 12px;
}
.news .cate{
	color: #8e704a;
}
.news .page{
	width: 30%;
	margin: 200px auto;
	text-align: center;
}
@media (min-width: 961px){
    .news-inner a:hover {
        background-color: #f0e4d6;
    }
}
@media (max-width: 780px){
	.news-wrap .inner{
		width: 88%;
	}
	.news .news-inner a{
		padding: 2.6em 0;
		font-size: 1.6rem;
	}
	.datecate {
    margin-bottom: 1em;
	}
	.news .page {
		margin: 10.7em auto;
	}
	.news .date{
		margin-right: 2em;
	}
}