@charset "UTF-8";

@import url('https://fonts.googleapis.com/icon?family=Material+Icons:display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pathway+Gothic+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@300&family=Sacramento&display=swap');


html, body { margin:0; padding:0; border:0; color:inherit; position:relative; color:#000; line-height:1.5; font-family:'Antonio', 'monospace', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; font-size:16px; font-weight:400; text-align:justify; vertical-align:baseline; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; -webkit-text-size-adjust:100%; letter-spacing:0.0em; overflow-wrap: break-word; word-wrap:break-word; word-break:keep-all; line-break:strict; list-style:none; }


/* commmon */
body::before { content:none; }

::selection { color:#fff; background:#000; }
::-moz-selection { color:#fff; background:#000; }

* { position:relative; box-sizing:border-box; }
input[type='text'],input[type='submit'],select,button,textarea { margin:0; padding:0; border:0; box-shadow:none; background:transparent; outline:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; }

a { color:inherit; text-decoration:none; }
img { width:80%; max-width:100%; height:100%; object-fit:cover; vertical-align:top;}
hr { clear:both; width:100%; margin:0; padding:0; border:0; }
.material-icons { position:relative; top:0.1em; font-size:1.0em; }
.SP { display:block; }
.PC { display:none; }
@media screen and (min-width:728px) {
	.SP { display:none; }
	.PC { display:block; }
}

.cover { display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start; }
.cover .x3 { width:100%; }
.cover .x7 { width:100%; }

@media screen and (min-width:728px) {
	.cover { display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start; }
	.cover .x3 { width:30%; }
	.cover .x7 { width:64%; }
}

/* Haed */
.Head { background:rgba(255,255,255,1); }
.Head h1 { position:fixed; top:50%; left:50%; z-index:201; transform:translate(-50%,-50%); cursor:pointer; }
.Head h1.trigger.active {
	pointer-events:none;
}
.Head h1 img { width:auto; height:20vh; margin:120px;}

@media screen and (max-width:728px) {
	* { zoom:0.93; }
}


/* Menu */
.Menu { position:fixed; overflow:hidden; top:50%; left:50%; z-index:2; width:0; padding:0; color:#fff; background:rgba(0,0,0,0.0) url('../images/bg.jpg') no-repeat center center; background-size:cover; transform:translate(-50%,-50%); transition:1.0s; }
.Menu.active { position:fixed; top:50%; left:50%; z-index:202; width:calc(100% - 1.4em); height:calc(100% - 1.4em); background:rgba(0,0,0,0.85); transform:translate(-50%,-50%); transition:1.0s; }
.Menu .Close { position:absolute; top:1.5em; right:1.5em; width:30px; height:30px; z-index:2; cursor:pointer; }
.Menu h2 { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); }
.Menu h2 img { width:auto; height:10vh; opacity:0.15; filter:brightness(100%); }
.Menu ul { position:fixed; top:50%; left:25%; transform:translate(-50%,-50%); }
.Menu ul li { display:block; position:relative; overflow:hidden; margin-bottom:0.0em; font-size:1.4rem; letter-spacing:0.125em; white-space:nowrap; }
.Menu ul li:last-child { margin-bottom:0; }

	.Menu ul li a:first-child::before { content:''; display:block; position:absolute; top:0; left:-110%; width:100%; height:100%; background:rgba(0,0,0,1.0); }
.Menu ul li a:first-child { display:inline-block; position:relative; width:340px; margin:0 2.0em 0 0; padding:0.75em 0.7em 0.75em 1.5em; line-height:1.0; background:rgba(0,0,0,0); transition:0.5s; }
.Menu ul li a:first-child:hover { background:rgba(0,0,0,1); transition:0.5s; }
.Menu ul li a:first-child > img { width:auto; height:1.6rem; }
.Menu ul li a.insta { display:inline-block; position:relative; top:0.2em; margin-right:0.6em; }
.Menu ul li a.insta img { width:auto; height:0.8em; top:0.15em; }
.Menu ul li a.mail { display:inline-block; position:relative; top:0.2em; }
.Menu ul li a.insta, .Menu ul li a.mail { width:1.0em; height:1.0em; }

.Menu ul li a.mail img { width:100%; }

.Menu ul .line { display:none; position:absolute; top:50%; right:-150px; z-index:3; width:140px; enable-background:new 0 0 100 100; fill:none; stroke:rgba(255,255,255,1.0); stroke-width:0.25; stroke-dasharray:2000; stroke-miterlimit:10; animation:hello 2.0s infinite ease-in 0s; }

@media screen and (max-width:728px)  {
	.Menu ul { left:35%; }
	.Menu ul li a:first-child > img { width:auto; height:1.0em; }
	.Menu ul li a.SalonTrigger img,
	.Menu ul li a.Esthetic img,
	.Menu ul li a.RistranteTrigger img,
	.Menu ul li a.ArtTrigger img,
	.Menu ul li a.SpaTrigger img { width:auto; height:1.0em; }
}
@media screen and (min-width:728px) {
	.Menu.active { position:fixed; top:50%; left:50%; z-index:2; width:calc(100% - 2.4em); height:calc(100% - 2.4em); background:rgba(0,0,0,0.85); transform:translate(-50%,-50%); transition:1.0s; }
}

@keyframes labeler { 0% { left:-105%; } 100% { left:105%; } }
.labeler::before { animation-name:labeler; animation-duration:.5s; animation-iteration-count:1; animation-direction:normal; }
.Esthetic.labeler::before { animation-delay:0.15s; }
.RistranteTrigger.labeler::before { animation-delay:0.3s; }
.ArtTrigger.labeler::before { animation-delay:0.45s; }

@-webkit-keyframes hello { 0% { stroke-dashoffset:2000; } 40% { stroke-dashoffset:2000; } 50% { } 100% { stroke-dashoffset:0; } }
.Menu ul .line.SalonActive { display:none; }
.Menu ul .line.EstheticActive { display:none; }
.Menu ul .line.RistranteActive { display:none; }
.Menu ul .line.ArtActive { display:none; }
.Menu ul .line.SpaActive { display:none; }
@media screen and (min-width:729px) {
	.Menu ul .line.SalonActive { display:block; top:16.0%; }
	.Menu ul .line.EstheticActive { display:block; top:49%; }
	.Menu ul .line.RistranteActive { display:block; top:49%; }
	.Menu ul .line.ArtActive { display:block; top:82.5%; }
	.Menu ul .line.SpaActive { display:block; top:16.0%; }
}


/* Summary */
@-webkit-keyframes fadein { 0% { opacity:0; } 100% { opacity:1; } }
.fadein { animation-delay:3s; animation-duration:.5s; animation-iteration-count:1; animation-direction:ease-in; }

.Menu.showDetail ul { top:13%; transition:0.5s; }
@media screen and (min-width:728px) {
	.Menu.showDetail ul { top:50%; transition:0.5s; }
}

.Summary { position:fixed; overflow:hidden; z-index:300; top:60%; left:50%; perspective:800px; transform-style:preserve-3d; width:80%; height:0; color:rgba(255,255,255,1); opacity:1.0; transform:translate(-50%,-50%); transition:0.5s; }
.Summary.active { height:32em; opacity:1.0; transition:0.5s;  display: block !important;}
.Summary.active2 { overflow:inherit; height:32em; transition:0.5s; display: none;}
.SummaryInner { position:absolute; top:50%; left:50%; overflow:hidden; width:100%; opacity:1; transform-origin:center center; transform:rotateX(0deg) translate(-50%,-50%); transition:0.4s; }
	.Summary.active .SummaryInner { overflow:inherit; }
.Summary header { width: 100%; display:inline; position:absolute; top:2.5%; left:2.5%; z-index:20;}
.Summary h3 { display:inline-block; padding:0.25em 0.75em; color:rgba(255,255,255,1.0); line-height:1.2; font-size:1.6rem; white-space:nowrap; background:rgba(0,0,0,0.85); mix-blend-mode:overlay; transform: rotate(-9deg); margin-bottom:10px;}
.Summary h3 small { width: 50%; display:block; font-size:0.3em; }
.Summary figure { margin-top:0.4em; margin-bottom:1.0em;  transform:rotate(-0.6deg);  text-align: center; }
	.SummaryInner figure { opacity:1; transition:0.4s; }
	.SummaryInner figure img { filter: brightness(1); transition:0.7s; }
.Summary .Txt p { font-size:0.85rem; text-align:left; }

.Salon h3 { width: 35% !important;}
.Esthetic h3 { width: 45% !important; }
.Ristrante h3 { width: 50% !important; }
.Art h3 { width: 29% !important;}
.Spa h3 { width: 29% !important;}

.viewmore { position:relative; font-family:Arial, sans-serif; font-weight:bolder; }
.viewmore .material-icons { position:absolute; top:130%; left:50%; font-size:24px; transform:rotate(90deg) translate(0,50%); }
.SummaryInner.rotate { transform-origin:center center; transform:rotateX(99deg) translate(-50%,-50%); opacity:0; transition:0.4s; }
.SummaryInner.rotate figure { opacity:0; transition:0.4s; }
.SummaryInner.rotate figure img { filter: brightness(0); transition:0.7s; }
.profile { display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start; position:absolute; top:50%; left:50%; width:100%; font-family:Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; font-size:0.85rem; transform-origin:center center; transform:rotateX(-75deg) translate(-50%,-50%); opacity:0; transition:0.4s; }
.profile.rotate { transform:rotateX(0deg) translate(-50%,-50%); opacity:1; transition:0.4s; }
.profile .profileTxt { width:55%; }
.profile h4 { margin-bottom:30px; }
.profile h4 img { width:auto; height:48px; }
.profile p { margin-bottom:1.2em; line-height:1.8;/* font-size:0.75em; font-weight:bolder;*/text-align:left; }
.profilePhoto { width:35%; }
.profilePhoto img { width:100%; height:auto; }
.profilePhoto figcaption { display:block; margin-top:10px; font-size:0.7em; font-weight:normal; text-align:right; }

.viewmoreClose { position:absolute; top:-40px; left:87%; font-family:Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; }
.viewmoreClose .material-icons { position:absolute; top:-120%; left:50%; font-size:24px; transform:rotate(-90deg) translate(0,-50%); }


@media screen and (min-width:728px) {
	.Summary { position:fixed; overflow:hidden; z-index:300; top:50%; left:65%; width:40%; height:0; color:rgba(255,255,255,1); transform:translate(-50%,-50%); transition:0.5s; }
	.Summary.active { z-index:300; height:250px; transition:0.5s;  display: block !important;}
	.Summary.active2 { overflow:inherit; height:auto; transition:0.5s;  display: none;}
	.SummaryInner { position:absolute; overflow:hidden; }
		.Summary.active .SummaryInner { overflow:inherit; }
	.Summary header { display:inline; position:absolute; top:0; left:35%; z-index:20; }
	.Summary h3 { line-height: 0.8; font-size:1.7rem; transform: rotate(0deg); }
	.Summary h3 small { font-size:0.5rem; }
	.Summary figure { margin-top:0.4em; margin-bottom:0; }
	.Summary .Txt p { font-size:0.85rem; text-align:left; word-break: break-all;}

	.pc {
		display: block;
	}
	.sp {
		display: none !important;
	}
}
@media screen and (max-width:727px) {
	.pc {
		display: none !important;
	}
	.sp {
		display: block;
	}
}

.SummaryInner .profile { display:block; position:absolute; top:0; left:0; z-index:1; width:100%; margin-top:-2px; transform-origin:center bottom; opacity:0; transform:scale(0.83,1) rotateX(-85.75deg); transition:0.2s; }



/* Haed */
.Foot {  }
.FootInner {  }
.Foot small { position:fixed; top:50%; right:-9.2em; font-size:0.5em; line-height:1.0; letter-spacing:0.2em; transform:rotate(90deg); }

@media screen and (min-width:728px) {
	.Foot small { font-size:0.6em; }
}

.Esthetic_Slide {
	position: relative;
}
.Esthetic02 {
	opacity: 0;
	position: absolute;
    left: -100%;
    width: 100%;
}
.Esthetic01 {
	position: relative;
    left: 0;
    width: 100%;
}
.i_allow_left {
	position: absolute;
	left: -20px;
	width: 20px;
	height: 20px;
    top: calc(50% - 10px);
	cursor: pointer;

}
.i_allow_right {
	position: absolute;
	right: -20px;
	width: 20px;
	height: 20px;
    top: calc(50% - 10px);
	cursor: pointer;
}
@media screen and (max-width:768px) {
	
.i_allow_left {
	left: 0;
	width: 8vw;
	height: 8vw;
    top: calc(50% - 4vw);

}
.i_allow_right {
	right: 0;
	width: 8vw;
	height: 8vw;
    top: calc(50% - 4vw);
}
}