@charset "UTF-8";



*{
	box-sizing:border-box;
	color:black;
}

html,body{
	/*scroll-behavior: smooth;*/
	margin: 0;
	padding: 0;
	background:white;
	font-family: 'Lato', sans-serif;
	font-weight:300;
	overflow-x:hidden;
}

a{
	text-decoration:none;
	color:black;
}




.wrapper{
	width:100%;
	padding-left:11.43%;
	padding-right:3.57%;
}
@media (max-width: 750px){
	.wrapper{
		padding-left:0;
		padding-right:0;
	}
}


.screen{
	height:100vh;
}



















header{
	width:11.43%;
	position:fixed;
	left:0;
	top:0;
	background:white;
	z-index:1000;
}
header h1{
	width:65px;
	position:absolute;
	left:50%;
	top:50px;
	transform:translatex(-50%);
}
header h1 a{

}
header .logo{
}
header .logo img{
	width:100%;
}
@media (max-height: 600px){
	header h1{
		display:none;
	}
}
header .place,
header .aboutus{
	font-size:16px;
	font-weight:700;
	white-space:nowrap;
}
header .place{
	display:block;
	position:absolute;
	left:50%;
	bottom:235px;
	transform:translatex(-50%);
}
header .place:before{
	content:"";
	position:absolute;
	left:-10px;
	top:-30px;
	right:-10px;
	bottom:-10px;
}
header .place:after{
	content:"";
	width:56px;
	height:22px;
	position:absolute;
	left:calc(50% - 28px);
	bottom:100%;
	background:url(images/arrow.png) no-repeat center/cover;
}
header .aboutus{
	display:block;
	position:absolute;
	right:50%;
	bottom:120px;
	transform-origin:center right;
	transform:rotate(90deg);
}
header .aboutus:before{
	content:"";
	position:absolute;
	left:-10px;
	top:-10px;
	right:-10px;
	bottom:-10px;
}
header .instagram, header .contact{
	width:30px;
	height:30px;
	position:absolute;
	left:calc(50% - 15px);
}
header .instagram{
	bottom:120px;
}
header .contact{
	bottom:80px;
}
header .instagram img, header .contact img{
	width:100%;
}
@media (max-width: 750px){
	header{
		width:100%;
		height:60px !important;
		display:flex;
		flex-wrap:nowrap;
		justify-content:center;
		align-items:center;
		position:fixed;
		top:-60px;
		left:0;
		transition:top 0.2s ease-out;
	}
	header.show{
		top:0;
	}
	header h1{
		width:auto;
		height:32px;
		position:relative;
		left:auto;
		top:auto;
		transform:none;
		display:block !important;
	}
	header h1 img{
		width:auto;
		height:32px;
	}
	header .place,
	header .aboutus,
	header .instagram,
	header .contact{
		display:none;
	}
}

header a > *{
	transition:transform 0.1s ease-out;
	display:block;
}
header a:hover > *{
	transform:scale(1.1);
}
header h1 a:hover > *{
	transform:scale(1.03);
}







nav{
	display:none;
}
@media (max-width: 750px){
	nav{
		display:flex;
		justify-content:center;
		align-items:center;
		width:296px;
		height:50px;
		border-radius:25px;
		background:black;
		position:fixed;
		left:calc(50% - 148px);
		bottom:-50px;
		z-index:1000;
		transition:bottom 0.2s ease-out;
		padding-left:10px;
	}
	header.show + nav{
		bottom:15px;
	}
	nav > *{
		margin:0 15px;
	}
	nav .instagram,
	nav .contact{
		width:50px;
		height:50px;
		display:flex;
		justify-content:center;
		align-items:center;
		margin-left:12px;
	}
	nav .instagram img,
	nav .contact img{
		width:25px;
		height:25px;
		filter:invert(100%);
	}
	nav .place{
		display:block;
		box-sizing:border-box;
		font-size:10px;
		font-weight:700;
		line-height:100%;
		white-space:nowrap;
		color:white;
		height:50px;
		padding:28px 5px 0 5px;
		position:relative;
	}
	nav .place:after{
		content:"";
		width:100%;
		padding-top:39.26%;
		position:absolute;
		left:0;
		bottom:48%;
		background:url(images/arrow.png) no-repeat center/contain;
		filter:invert(100%);
	}
	nav .place:before{
		content:"";
		width:calc(100% + 30px);
		height:100%;
		position:absolute;
		left:-15px;
		top:0;
	}

	nav .aboutus{
		display:block;
		box-sizing:border-box;
		font-size:10px;
		font-weight:700;
		line-height:100%;
		white-space:nowrap;
		color:white;
		height:50px;
		padding:0 5px 0 5px;
		position:relative;
	}
	nav .aboutus:before{
		content:"";
		width:0;
		height:100%;
		display:inline-block;
		vertical-align:middle;
	}
}












.firstView{
	width:100%;
	min-height:43vw;
	position:relative;
	overflow:hidden;
	padding-left:6.45%;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}
.firstView .background{
	position:absolute;
	width:100%;
	height:82.22%;
	min-height:43vw;
	left:0;
	top:50%;
	transform:translatey(-50%);
	overflow:hidden;
	background-size:4px 1px;
	background-image:linear-gradient(-90deg, transparent 75%, #9e9e9e 25%);
}
.firstView .background:after{
	content:"";
	width:150%;
	height:100%;
	position:absolute;
	left:-10%;
	top:0;
	transform:skewx(-6deg);
	background:white;
	animation:firstViewBackgroundAnim ease-out forwards;
}
.firstView .backgroundAP{
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	position:absolute;
	z-index:3;
	background:url(images/logo_line.svg) no-repeat center/auto 99%;
	opacity:0;
	animation:firstViewBakcgroudAPAnim ease-out forwards;
}
.firstView .message{
	display:inline-block;
	position:relative;
	z-index:4;
}
.firstView h2{
	margin:0;
	padding:0;
}
.firstView h2 > span{
	display:flex;
	justify-content:left;
	align-items: flex-start;
}
.firstView h2 > span > span,
.firstView h2 > span > span img{
	height:5.71vw;
}
.firstView h2 > span > span{
	display:inline-block;
	position:relative;
	overflow:hidden;
}
.firstView h2 img{
	display:inline-block;
	width:auto;
	position:relative;
	top:100%;
	animation:firstViewTitleAnim ease-out forwards;
}
.firstView .message p{
	display:inline-block;
	opacity:0;
	animation:firstViewMessageAnim ease-out forwards;
}
.firstView .message p img{
	width:33.00vw;
}


@media (max-width: 750px){
	.firstView{
		width:100%;
		min-height:100vh;
		position:relative;
		overflow:hidden;
		padding-left:0;
		display:block;
	}
	.firstView .background{
		width:100%;
		height:100%;
		min-height:100%;
		left:0;
		top:0;
		transform:none;
	}
	.firstView .backgroundAP{
		position:absolute;
		width:76vw;
		height:calc(50% - 2.67vw);
		left:12vw;
		top:0;
		background-image:url(images/logo_line_sp.svg);
		background-size:contain;
		background-position:center bottom;
	}
	/*
	.firstView .backgroundAP[data-type="0"]{
		background-image:url(images/ap_sp_black.png);
	}
	.firstView .backgroundAP[data-type="1"]{
		background-image:url(images/ap_sp_w.png);
	}
	.firstView .backgroundAP[data-type="2"]{
		background-image:url(images/ap_sp_k.png);
	}
	.firstView .backgroundAP[data-type="3"]{
		background-image:url(images/ap_sp_w.png);
		mix-blend-mode:difference;
	}
	*/

	.firstView .message{
		position:absolute;
		left:50%;
		transform:translatex(-50%);
		top:calc(50% + 2.67vw);
		z-index:4;
	}
	.firstView h2 > span > span,
	.firstView h2 > span > span img{
		height:11.25vw;
		max-height:8.00vh;
	}
	.firstView .message p img{
		width:auto;
		height:25.00vw;
		max-height:17.78vh;
	}
}


@keyframes firstViewBackgroundAnim{
	0%{left:0;}
	100%{left:120%;}
}
@keyframes firstViewBakcgroudAPAnim{
	0%{
		opacity:0;
		transform:scale(0.98);
	}
	100%{
		opacity:1;
		transform:scale(1.0);
	}
}
@keyframes firstViewTitleAnim{
	0%{top:100%;}
	100%{top:0;}
}
@keyframes firstViewMessageAnim{
	0%{opacity:0;}
	100%{opacity:1;}
}

.firstView .background:after{
	animation-duration:1.0s;
	animation-delay:0;
}
.firstView .backgroundAP{
	animation-duration:0.8s;
	animation-delay:0.5s;
}
.firstView h2 > span > span img{
	animation-duration:0.3s;
}
.firstView h2 > span:nth-child(1) > span:nth-child(1) img{
	animation-delay:0.3s;
}
.firstView h2 > span:nth-child(1) > span:nth-child(2) img{
	animation-delay:0.5s;
}
.firstView h2 > span:nth-child(1) > span:nth-child(3) img{
	animation-delay:0.7s;
}
.firstView h2 > span:nth-child(2) > span:nth-child(1) img{
	animation-delay:0.9s;
}
.firstView h2 > span:nth-child(3) > span:nth-child(1) img{
	animation-delay:1.1s;
}

.firstView .message p{
	animation-duration:0.4s;
	animation-delay:1.3s;
}




















.firstView .background2{
	position:absolute;
	width:100%;
	height:82.22%;
	min-height:43vw;
	left:0;
	top:8.89%;
	overflow:hidden;
}
.firstView .background2[data-parallax="true"]{
	position:fixed;
}
@media (max-width: 750px){
	.firstView .background2{
		width:100%;
		height:100%;
		min-height:100%;
		left:0;
		top:0;
	}
}

















.photos{
	width:100%;
	height:1060px;
	margin:110px auto 0 auto;
	position:relative;
}
.photo{
	position:absolute;
}
.photo:before{
	content:"";
	padding-top:62.5%;
	display:block;
}
.photo img{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
}

.photo:nth-of-type(1){width:220px; left:calc(50% - 30px); top:0px; z-index:40;}
.photo:nth-of-type(2){width:350px; left:calc(50% - 450px); top:100px; z-index:70;}
.photo:nth-of-type(3){width:180px; left:calc(50% + 260px); top:280px; z-index:80;}
.photo:nth-of-type(4){width:270px; left:calc(50% - 100px); top:480px; z-index:5;}
.photo:nth-of-type(5){width:150px; left:calc(50% - 370px); top:600px; z-index:40;}
.photo:nth-of-type(6){width:230px; left:calc(50% + 200px); top:710px; z-index:50;}
.photo:nth-of-type(7){width:180px; left:calc(50% - 250px); top:800px; z-index:5;}
.photo:nth-of-type(8){width:360px; left:calc(50% + 10px); top:1000px; z-index:70;}

.photos .background{
	display:block;
	position:absolute;
	width:300%;
	height:31px;
	transform-origin:right bottom;
	transform:skewx(-85deg);
	top:190px;
	right:200%;
	background:url(https://attract.place/assets/images/photos_back.png);
	pointer-events:none;
}
@keyframes photosBackAnim{
	0%{
		right:200%;
	}
	100%{
		right:0;
	}
}

@media (max-width: 750px){
	.photos{
		width:100%;
		height:950px;
		margin:110px auto 0 auto;
		position:relative;
	}
	.photo:nth-of-type(1){width:120px; left:calc(50% - 30px); top:0px; z-index:20;}
	.photo:nth-of-type(2){width:175px; left:calc(50% - 150px); top:100px; z-index:70;}
	.photo:nth-of-type(3){width:130px; left:calc(50% + 30px); top:220px; z-index:10;}
	.photo:nth-of-type(4){width:175px; left:calc(50% - 150px); top:330px; z-index:40;}
	.photo:nth-of-type(5){width:120px; left:calc(50% - 125px); top:530px; z-index:0;}
	.photo:nth-of-type(6){width:115px; left:calc(50% - 70px); top:630px; z-index:20;}
	.photo:nth-of-type(7){width:120px; left:calc(50% - 195px); top:740px; z-index:50;}
	.photo:nth-of-type(8){width:180px; left:calc(50% + 10px); top:850px; z-index:90;}
}




/*
.photo{
	opacity:0;
	filter:blur(10px);
	transition:
		opacity 0.4s ease-out,
		filter 0.2s ease-out;
}
.photo.faded{
	opacity:1;
	filter:blur(0px);
}
*/
.photos .background.show{
	animation:photosBackAnim 0.6s ease-out forwards;
}







.animationPhoto{
	opacity:0;
	--noiseDuration:1.0s;
	transition:opacity 0.3s ease-out;
	
}
.animationPhoto.loaded{
	opacity:1;
}
.animationPhoto > img{
	width:100%;
	height:100%;
	display:block;
	position:absolute;
	left:0;
	top:0;
}
.animationPhoto .animationNoise{
	position:absolute;
	width:1px;
	height:100%;
	left:0%;
	top:0;
	transform-origin:left center;
	transform:scale(3000,1);
	background-repeat:repeat-x;
	background-size:3000px 100%;
	background-position:0% 0;
	transition:
		left var(--noiseDuration) ease-out,
		background-position var(--noiseDuration) ease-out;
	z-index:2;
}
/*
.animationPhoto{
	transform:translatex(10%);
}
.animationPhoto.toLeft{
	transform:translatex(-10%);
}
.animationPhoto.loaded{
	transform:translatex(0%);
}
*/
.animationPhoto.loaded .animationNoise{
	left:100%;
	background-position:100% 0;
}
.animationPhoto.toLeft .animationNoise{
	left:calc(100% - 1px);
	transform-origin:right center;
	background-position:100% 0;
}
.animationPhoto.toLeft.loaded .animationNoise{
	left:0%;
	background-position:0% 0;
}



















.photos .followus{
	display:none !important;
}

.photos .followus,
.photos .followus > span,
.photos .followus > span > span,
.photos .followus > span > span img{
	height:24px;
}

.photos .followus{
	display:block;
	position:absolute;
	top:950px;
	left:50%;
	transform:translatex(-50%);
}
.photos .followus .icon{
	width:40px;
	height:40px;
	display:block;
	position:absolute;
	left:-56px;
	top:calc(50% - 20px);
	opacity:0;
}
.photos .followus > span{
	display:block;
	position:relative;
	white-space:nowrap;
}
.photos .followus > span > span{
	overflow:hidden;
	display:inline-block;
	position:relative;
}
.photos .followus > span > span img{
	display:inline-block;
	position:relative;
	transform:translatey(100%);
	transition:transform 0.4s ease-out;
}
.photos .followus .arrow{
	display:block;
	width:40px;
	height:11.7px;
	position:absolute;
	right:-45px;
	top:calc(50% - 6px);
	opacity:0;
}
.photos .followus.show .icon{
	opacity:1;
}
.photos .followus.show > span > span img{
	transform:translatey(0);
}
.photos .followus.show .arrow{
	opacity:1;
	right:-50px;
}

@media (max-width: 750px){
	.photos .followus{
		height:24px;
		top:1500px;
	}
	.photos .followus .icon{
		width:30px;
		height:30px;
		left:-46px;
		top:calc(50% - 15px);
	}
	.photos .followus > span{
		line-height:24px;
		font-size:24px;
	}
	.photos .followus .arrow{
		width:32px;
		height:9px;
		right:-40px;
		top:calc(50% - 4.5px);
	}
	.photos .followus.show .arrow{
		right:-45px;
	}
}

.photos .followus .icon{
	transition:opacity 0.4s ease-out 0s;
}
.photos .followus > span > span:nth-child(1) img{
	transition-delay:0.4s;
}
.photos .followus > span > span:nth-child(2) img{
	transition-delay:0.6s;
}
.photos .followus .arrow{
	transition:
		opacity 0.4s ease-out 0.8s,
		right 0.2s ease-out 0.5s,
		transform 0.2s ease-out 0s;
}
.photos .followus:hover .arrow{
	transform:translatex(6px);
}












.places{
	width:100%;
	margin-top:20vw;
	position:relative;
}
.places h2{
	width:26.05%;
	box-sizing:border-box;
	border:1px solid black;
	margin:0 auto;
	padding:0;
	position:relative;
}
.places h2:before{
	content:"";
	display:block;
	padding-top:61.29%;
}
.places h2 span{
	display:block;
	overflow:hidden;
	width:61.94%;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}
.places h2 span:before{
	content:"";
	display:block;
	padding-top:calc(25.52% + 1px);
}
.places h2 img{
	display:block;
	width:100%;
	position:absolute;
	left:0;
	top:100%;
	transition:top 0.4s ease-out 0.2s;
}
.places h2.show img{
	top:0;
}

.places .list{
	width:86.56%;
	max-width:1030px;
	margin:5.90% auto 0 auto;
	position:relative;
}
.places .list:before{
	content:"";
	display:block;
	padding-top:37.86%;
}
.places .list img{
	position:absolute;
	transition:transform 0.1s ease-out;
	cursor:crosshair;
}
.places .list img:hover{
	transform:scale(1.01);
}
.places .list img[alt="OMOTESANDO"]{
	width:auto;
	height:43.68%;
	left:0;
	top:26.31%;
}
.places .list img[alt="SANGENJAYA"]{
	width:auto;
	height:22.68%;
	right:0;
	top:0%;
}
.places .list img[alt="KAMIYACHO"]{
	width:auto;
	height:10.26%;
	left:0;
	top:0%;
}
.places .list img[alt="KAMIYACHO2"]{
	width:auto;
	height:10.26%;
	left:0;
	top:12.42%;
}
.places .list img[alt="YOGA"]{
	width:auto;
	height:43.68%;
	right:0;
	top:26.31%;
}
/*
.places .list img[alt="ROPPONGI"]{
	width:auto;
	height:25.86%;
	left:0;
	bottom:0;
}
*/
.places .list img[alt="KUDANSHITA"]{
	width:auto;
	height:22.86%;
	left:0;
	bottom:0;
}
.places .list img[alt="MIDORIGAOKA1"]{
	width:auto;
	height:10.00%;
	right:0;
	bottom:13.50%;
}
.places .list img[alt="MIDORIGAOKA2"]{
	width:auto;
	height:10.00%;
	right:0;
	bottom:0;
}
@media (max-width: 750px){
	.places{
		width:calc(100% - 50px);
		margin:200px auto 0 auto;
	}
	.places h2{
		width:155px;
		height:95px;
		position:absolute;
		left:calc(50% - 77.5px);
		top:-130px;
	}
	.places h2 span{
		width:60.32%;
	}
	.places .list{
		width:100%;
		max-width:100%;
		margin:40px auto 0 auto;
		position:relative;
	}
	.places .list:before{
		content:none;
	}
	.places .list img{
		position:relative;
		left:auto !important;
		right:auto !important;
		top:auto !important;
		bottom:auto !important;
		width:100% !important;;
		height:auto !important;
		margin-top:5px;
	}
	.places .list img:hover{
		transform:none;
	}
}






.places .data{
	width:86.56%;
	max-width:1030px;
	margin:6.45% auto 0 auto;
	position:relative;
}
.places .data:before{
	content:"";
	display:block;
	padding-top:29.07%;
}
.placeData{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:left;
	opacity:0;
	pointer-events:none;
	transition:opacity 0.3s ease-out;
}
.placeData.show{
	opacity:1;
	pointer-events:all;
}
.placeData > div{
	position:relative;
	z-index:5;
	box-sizing:border-box;
	padding-left:7.77%;
}
.placeData .background{
	position:absolute;
	z-index:4;
	width:135% !important;
	height:100%;
	left:0;
	top:0;
	overflow:hidden;
}

.placeData .code{
	font-size:3.35vw;
	font-style:italic;
	font-weight:700;
	line-height:100%;
}
.placeData a, .placeData .tel{
	font-size:2.00vw;
	line-height:130%;
	margin-top:1em;
	display:block;
	/*text-shadow:0 0 0.25em white;*/
}
.placeData .tel{
	pointer-events:none;
}
@media (min-width: 1400px){
	.placeData .code{
		font-size:46px;
	}
	.placeData a, .placeData .tel{
		font-size:30px;
	}
}
.placeData a:not(.tel):after{
	content:"";
	display:inline-block;
	font-size:inherit;
	height:0.90em;
	width:0.625em;
	background:url(images/pin.png) no-repeat center/cover;
	margin-left:0.2em;
}
.placeData .close{
	display:none;
}

@media (max-width: 750px){
	.places{
		position:relative;
	}
	.places .data{
		width:100%;
		max-width:100%;
		height:100%;
		margin:0;
		left:0;
		top:0;
		position:absolute;
		pointer-events:none;
	}
	.places .data:before{
		content:none;
	}
	.placeData{
		position:absolute;
		left:0;
		top:0;
		width:100%;
		height:100%;
		transition:opacity 0.2s ease-out;
	}
	.placeData > div{
		padding:0 25px;
		box-sizing:border-box;
	}
	.placeData .background{
		position:absolute;
		z-index:4;
		width:150% !important;
		height:106% !important;
		left:-25% !important;
		top:-3% !important;
	}
	/*
	.placeData.show .background:after{
		background-color:white;
		transition:bottom 0.2s ease-out;
	}
	*/
	.placeData .code{
		text-align:center;
		display:block;
		width:100%;
		font-size:45px;
	}
	.placeData a, .placeData .tel{
		text-align:center;
		display:block;
		width:100%;
		font-size:25px;
		line-height:180%;
		margin-top:1em;
		display:block;
	}
	.placeData a > span, .placeData .tel > span{
		display:inline-block;
	}
	.placeData a:not(.tel):after{
		content:"";
		display:block;
		font-size:inherit;
		height:1em;
		width:0.68em;
		margin-left:auto;
		margin-right:auto;
		margin-top:1em;
	}
	.placeData .close{
		display:block;
		width:100px;
		height:45px;
		display:flex;
		justify-content:center;
		align-items:center;
		text-align:center;
		font-size:15px;
		font-weight:700;
		font-style:italic;
		margin:40px auto 0 auto;
	}
}


.placeData > *:not(.background){
	opacity:0;
	transition:opacity 0.3s ease-out 0.3s;
}
.placeData.show > *:not(.background){
	opacity:1;
}
















.placeData .indicators{
	position:absolute;
	width:2%;
	left:0;
	top:0;
	z-index:10;
}
.placeData .indicators:before,
.placeData .indicators:after{
	content:"";
	display:block;
	padding-top:100%;
	width:100%;
	border-radius:100%;
	position:absolute;
	top:0;
}
.placeData .indicators:before{
	left:0;
	background:#4478c1;
}
.placeData .indicators:after{
	left:150%;
	background:#65ab45;
}
.placeData[data-name="OMOTESANDO"] .indicators{
	left:85.26%;
	top:40.67%;
}
.placeData[data-name="SANGENJAYA"] .indicators{
	left:70.05%;
	top:36.33%;
}
.placeData[data-name="KAMIYACHO"] .indicators{
	left:85.50%;
	top:30.33%;
}
.placeData[data-name="KAMIYACHO2"] .indicators{
	left:85.50%;
	top:30.33%;
}
.placeData[data-name="YOGA"] .indicators{
	left:61.65%;
	top:80.00%;
}
/*
.placeData[data-name="ROPPONGI"] .indicators{
	left:90.09%;
	top:14.33%;
}
*/
.placeData[data-name="KUDANSHITA"] .indicators{
	left:90.09%;
	top:14.33%;
}
.placeData[data-name="MIDORIGAOKA1"] .indicators{
	left:72.06%;
	top:88.00%;
}
.placeData[data-name="MIDORIGAOKA2"] .indicators{
	left:73.03%;
	top:88.67%;
}

@media (max-width: 750px){
	.placeData .indicators{
		width:10px;
	}
	.placeData .indicators:after{
		left:130%;
	}
	.placeData[data-name="OMOTESANDO"] .indicators{
		left:68.23%;
		top:15.89%;
	}
	.placeData[data-name="SANGENJAYA"] .indicators{
		left:23.77%;
		top:23.89%;
	}
	.placeData[data-name="KAMIYACHO"] .indicators{
		left:83.92%;
		top:18.32%;
	}
	.placeData[data-name="KAMIYACHO2"] .indicators{
		left:83.92%;
		top:18.32%;
	}
	.placeData[data-name="YOGA"] .indicators{
		left:0.77%;
		top:48.08%;
	}
	/*
	.placeData[data-name="ROPPONGI"] .indicators{
		left:83.38%;
		top:15.38%;
	}
	*/
	.placeData[data-name="KUDANSHITA"] .indicators{
		left:90.38%;
		top:12.38%;
	}
	.placeData[data-name="MIDORIGAOKA1"] .indicators{
		left:34.31%;
		top:55.82%;
	}
	.placeData[data-name="MIDORIGAOKA2"] .indicators{
		left:37.38%;
		top:59.89%;
	}
}









@media (min-width: 751px){
	.places.popup{
		margin:37.5vw auto 0 auto;
	}
	.places.popup h2{
		position:absolute;
		left:50%;
		bottom:115%;
		transform:translatex(-50%);
	}
	.places.popup{
		position:relative;
	}
	.places.popup .list img{
		cursor:pointer;
	}
	.places.popup .data{
		width:100%;
		max-width:100%;
		height:100%;
		margin:0;
		left:0;
		top:0;
		position:absolute;
		pointer-events:none;
	}
	.places.popup .data:before{
		content:none;
	}
	.places.popup .placeData{
		position:absolute;
		left:0;
		top:0;
		width:100%;
		height:100%;
		transition:opacity 0.2s ease-out;
	}
	.places.popup .placeData > div{
		width:100%;
		padding-right:7.77%;
	}
	.places.popup .placeData .close{
		cursor:pointer;
		display:flex;
		justify-content: center;
		align-items: center;
		width:10vw;
		height:3vw;
		box-sizing:border-box;
		font-size:2vw;
		font-weight:700;
		font-style:italic;
		margin:2vw auto 0 auto;
	}
}

















.information{
	width:86.56%;
	max-width:1030px;
	margin:15vw auto 0 auto;
	position:relative;
	opacity:0;
	transition:opacity 0.6s ease-out 0.1s;
}
.information.show{
	opacity:1;
}
.information .row{
	width:100%;
	display:flex;
	align-items:flex-start;
}
.information .row > div:first-child{
	font-size:20px;
	font-weight:700;
	line-height:160%;
	width:100px;
}
.information .row > div:last-child{
	font-size:20px;
	font-weight:300;
	line-height:160%;
	width:calc(100% - 100px);
}
.information .row > div:last-child > span{
	display:inline-block;
}
.information .contact{
	display:inline-block;
	font-size:24px;
	font-weight:700;
	line-height:100%;
	margin-top:70px;
	position:relative;
}
.information .contact:before{
	content:"";
	width:calc(100% + 20px);
	height:40px;
	position:absolute;
	left:0;
	top:calc(50% - 20px);
}
.information .contact:after{
	content:"";
	width:10px;
	height:10px;
	border:5px solid black;
	border-color:transparent transparent transparent black;
	box-sizing:border-box;
	position:absolute;
	right:-20px;
	top:calc(50% - 5px);
	transition:right 0.2s ease-out;
}
.information .contact:hover:after{
	right:-23px;
}
@media (max-width: 750px){
	.information{
		width:calc(100% - 50px);
		max-width:100%;
		margin:120px auto 0 auto;
	}
	.information .row > div:first-child{
		font-size:14px;
		width:80px;
	}
	.information .row > div:last-child{
		font-size:14px;
		width:calc(100% - 80px);
	}
	.information .contact{
		display:inline-block;
		font-size:16px;
		margin-top:75px;
	}
	.information .contact:after{
		content:"";
		width:8px;
		height:8px;
		border-width:4px;
		right:-16px;
		top:calc(50% - 4px);
	}
	.information .contact:hover:after{
		right:-19px;
	}
}







footer{
	width:86.56%;
	max-width:1030px;
	margin:10vw auto 30px auto;
	position:relative;
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
}
footer .credit{
	font-size:14px;
	font-weight:700;
	line-height:100%;
}

@media (max-width: 750px){
	footer{
		width:calc(100% - 50px);
		max-width:100%;
		margin:75px auto 110px auto;
		display:block;
	}
	footer .credit{
		margin-top:20px;
		font-size:12px;
		text-align:left;
	}
}












.effect{
	display:none !important;


	position:fixed;
	width:100vw;
	height:200px;
	left:0;
	top:calc(50% - 100px);
	background:black;
	z-index:10000;
	display:none;
	opacity:0;
	pointer-events:none;
}
.effect:before{
	content:"";
	position:absolute;
	width:200%;
	height:100%;
	background:black;
	left:-50%;
	top:0;
}
.effect img{
	position:absolute;
	left:calc(50% - 155px);
	top:calc(50% - 30px);
	width:310px;
	height:60px;
	display:block;
}
.effect .background{
	width:250%;
	height:40px;
	position:absolute;
	top:calc(50% - 20px);
	right:140%;
	transform-origin:right bottom;
	transform:skewx(-85deg);
	background:url(images/comfy_back.png);
}

.effect.show{
	display:block;
	animation:effectAnim 0.8s ease-in-out 0s forwards;
}
.effect.show img{
	animation:effectComfyAnim 0.8s ease-in-out 0s forwards;
}
.effect.show .background{
	animation:effectBackgroundAnim 0.8s ease-in-out 0s forwards;
}

@keyframes effectAnim{
	0%{opacity:0;transform:scale(1.1);}
	15%{opacity:1;transform:scale(1.0);}
	85%{opacity:1;transform:scale(1.0);}
	100%{opacity:0;transform:scale(0.90);}
}

@keyframes effectComfyAnim{
	0%{transform:scale(1.03);}
	100%{transform:scale(1.00);}
}

@keyframes effectBackgroundAnim{
	0%{right:140%;}
	70%{right:0%;}
	100%{right:0%;}
}








.stripe{
}
.stripe:before{
	content:"";
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	background-size:4px 1px;
	background-image:linear-gradient(-90deg, white 75%, #9e9e9e 25%);
	pointer-events:none;
	opacity:0;
	transition:0.01s linear;
}
*.show > .stripe:before,
.stripe.show:before{
	opacity:1;
}
.stripe:after{
	content:"";
	position:absolute;
	width:0;
	height:100%;
	left:0;
	right:auto;
	top:0;
	background:black;
}
*.show > .stripe:after,
.stripe.show:after{
	animation:stripeRectAnim 0.6s cubic-bezier(.97,0,.02,.99)
}
.stripe:before{
	transition-delay:0.3s;
}

@keyframes stripeRectAnim{
	0%{
		width:0%;
		left:0%;
		right:100%;
	}
	50%{
		width:100%;
		left:0%;
		right:0%;
	}
	100%{
		width:0%;
		left:100%;
		right:0%;
	}
}













.places2{
	width:100%;
	margin-top:20vw;
	position:relative;
}
.places2 h2{
	width:26.05%;
	box-sizing:border-box;
	border:1px solid black;
	margin:0 auto;
	padding:0;
	position:relative;
}
.places2 h2:before{
	content:"";
	display:block;
	padding-top:61.29%;
}
.places2 h2 span{
	display:block;
	overflow:hidden;
	width:61.94%;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}
.places2 h2 span:before{
	content:"";
	display:block;
	padding-top:calc(25.52% + 1px);
}
.places2 h2 img{
	display:block;
	width:100%;
	position:absolute;
	left:0;
	top:100%;
	transition:top 0.4s ease-out 0.2s;
}
.places2 h2.show img{
	top:0;
}
@media (max-width: 750px){
	.places2{
		width:100%;
		margin:200px auto 0 auto;
	}
	.places2 h2{
		width:155px;
		height:95px;
		position:absolute;
		left:calc(50% - 77.5px);
		top:-130px;
	}
	.places2 h2 span{
		width:60.32%;
	}
}






.places2data{
	margin:60px auto 0 auto;
	position:relative;
	left:auto;
	top:auto;
	display:block;
}
.places2map{
	width:100%;
	height:390px;
	overflow:hidden;
}
.places2mapInner{
	width:100%;
	max-width:1000px;
	height:100%;
	margin:0 auto;
	position:relative;
}
.places2pin{
	--digitWidth:16px;
	position:absolute;
	cursor:pointer;
	opacity:0;
	transform:translate(-10px,0);
	transition:opacity 0.15s ease-out,transform 0.30s ease-out;
	display:flex;
	align-items:center;
}
.show .places2pin{
	transform:translate(0,0);
	opacity:1;
}
.places2pin::before{
	content:"";
	width:0.8em;
	height:0.6em;
	display:block;
	position:absolute;
	right:0;
	top:50%;
	transform:translate(180%,-50%);
	background:linear-gradient(to bottom,#65ab45 35%, transparent, #4478c1 65%);
}
/*
.places2pin::before,.places2pin::after{
	content:"";
	width:calc(var(--digitWidth) * 0.58);
	height:calc(var(--digitWidth) * 0.58);
	border-radius:100%;
	display:block;
	margin-left:calc(var(--digitWidth) * 0.45);
	order:10;
}
.places2pin::before{background:#4478c1;}
.places2pin::after{background:#65ab45;}
*/

/*
.places2map:has(.active) .places2pin{
	opacity:0.5;
	transition:none;
}
.places2pin.active{
	opacity:1 !important;
	transition:none;
}
*/

@media (min-width:751px){
	.places2pin[data-target="MISYUKU"]{left:43%;top:calc(50% - 100px);}
	.places2pin[data-target="HIGASHIYAMA"]{left:43%;top:calc(50% + 10px);}
	.places2pin[data-target="TSURUMAKI"]{left:10%;top:calc(50% - 155px);}
	.places2pin[data-target="FUKAZAWA"]{left:5%;top:calc(50% - 35px);}
	.places2pin[data-target="SANGENJAYA2"]{left:20%;top:calc(50% + 45px);}
	.places2pin[data-target="KUDANSHITA"]{right:5%;top:calc(50% - 75px);}
	.places2pin[data-target="OMOTESANDO"]{right:35%;top:calc(50% - 25px);}
	.places2pin[data-target="SANGENJAYA"]{left:25%;top:calc(50% - 75px);}
	.places2pin[data-target="KAMIYACHO2"]{right:20%;top:calc(50% + 35px);}
	.places2pin[data-target="KAMIYACHO"]{right:22%;top:calc(50% + 85px);}
	.places2pin[data-target="MIDORIGAOKA2"]{left:18%;top:calc(50% + 125px);}
	.places2pin[data-target="MIDORIGAOKA"]{left:15%;top:calc(50% + 85px);}
	.places2pin[data-target="YOGA"]{left:3.5%;top:calc(50% - 115px);}
}

.digit{
	width:var(--digitWidth);
	height:calc(var(--digitWidth) * 1.5);
	position:relative;
	display:block;
	margin:0;
	padding:0;
	background-image:url(images/digits.png);
	background-size:calc(var(--digitWidth) * 10) 100%;
}
.digit0{background-position:calc(var(--digitWidth) * 0) 0%;}
.digit1{background-position:calc(var(--digitWidth) * -1) 0%;}
.digit2{background-position:calc(var(--digitWidth) * -2) 0%;}
.digit3{background-position:calc(var(--digitWidth) * -3) 0%;}
.digit4{background-position:calc(var(--digitWidth) * -4) 0%;}
.digit5{background-position:calc(var(--digitWidth) * -5) 0%;}
.digit6{background-position:calc(var(--digitWidth) * -6) 0%;}
.digit7{background-position:calc(var(--digitWidth) * -7) 0%;}
.digit8{background-position:calc(var(--digitWidth) * -8) 0%;}
.digit9{background-position:calc(var(--digitWidth) * -9) 0%;}

.places2info{
	width:100%;
	height:100%;
	position:abusolute;
	left:0;
	top:0;
}
.place2Data{
	width:100%;
	height:100%;
	margin:0 auto;
	padding:0 5.7% 20px 5.7%;
	position:absolute;
	left:0;
	top:0;
	display:flex;
	align-items:center;
	opacity:0;
	pointer-events:none;
}
.place2Data.show{
	opacity:1;
	pointer-events:all;
}
.place2Data > div{
	width:100%;
	position:relative;
	z-index:5;
	opacity:0;
}
.place2Data.show > div{
	opacity:1;
	transition:opacity 0.1s ease-out 0.3s;
}
.place2Data .code{
	font-size:46px;
	line-height:135%;
}
.place2Data .code::first-letter{
	font-weight:bold;
}
.place2Data a,
.place2Data .tel{
	font-size:30px;
	line-height:150%;
	text-decoration:none;
	color:inherit;
}
.place2Data a svg{
	width:0.8em;
	height:0.8em;
	display:inline-block;
	color:inherit;
}
.place2DataClose{
	width:50px;
	height:50px;
	position:absolute;
	right:25px;
	top:25px;
	display:block;
	cursor:pointer;
	z-index:10;
	opacity:0;
	pointer-events:none;
}
.place2DataClose::before,
.place2DataClose::after{
	content:"";
	width:100%;
	height:1px;
	background:black;
	position:absolute;
	left:0;
	top:calc(50% - 0.5px);
}
.place2DataClose::before{transform:rotate(-45deg);}
.place2DataClose::after{transform:rotate(45deg);}
.place2Data.show > .place2DataClose{
	opacity:1;
	transition:opacity 0.1s ease-out 0.3s;
	pointer-events:all;
}

@media (min-width:751px){
	.place2Data a:hover{
		text-decoration:underline;
	}
}

@media (max-width:750px){
	.places2data{
		margin:60px auto 0 auto;
		padding:0;
	}
	.places2map{
		height:130vw;
	}
	.places2pin{
		--digitWidth:3.8vw;
		--digitHeightWithMargin:17vw;
	}

	.places2pin[data-target="YOGA"],
	.places2pin[data-target="MIDORIGAOKA"],
	.places2pin[data-target="OMOTESANDO"],
	.places2pin[data-target="KUDANSHITA"],
	.places2pin[data-target="SANGENJAYA2"],
	.places2pin[data-target="TSURUMAKI"],
	.places2pin[data-target="MISYUKU"]
	{
		right:calc(60% + 1em);
	}
	.places2pin[data-target="SANGENJAYA"],
	.places2pin[data-target="KAMIYACHO"],
	.places2pin[data-target="MIDORIGAOKA2"],
	.places2pin[data-target="KAMIYACHO2"],
	.places2pin[data-target="FUKAZAWA"],
	.places2pin[data-target="HIGASHIYAMA"]
	{
		left:60%;
	}
	

	.places2pin[data-target="YOGA"],
	.places2pin[data-target="SANGENJAYA"]{
		top:calc(50% - var(--digitHeightWithMargin) * 3 - var(--digitWidth));
	}
	.places2pin[data-target="MIDORIGAOKA"],
	.places2pin[data-target="KAMIYACHO"]{
		top:calc(50% - var(--digitHeightWithMargin) * 2 - var(--digitWidth));
	}
	.places2pin[data-target="OMOTESANDO"],
	.places2pin[data-target="MIDORIGAOKA2"]{
		top:calc(50% - var(--digitHeightWithMargin) * 1 - var(--digitWidth));
	}
	.places2pin[data-target="KUDANSHITA"],
	.places2pin[data-target="KAMIYACHO2"]{
		top:calc(50% + var(--digitHeightWithMargin) * 0 - var(--digitWidth));
	}
	.places2pin[data-target="SANGENJAYA2"],
	.places2pin[data-target="FUKAZAWA"]{
		top:calc(50% + var(--digitHeightWithMargin) * 1 - var(--digitWidth));
	}
	.places2pin[data-target="TSURUMAKI"],
	.places2pin[data-target="HIGASHIYAMA"]{
		top:calc(50% + var(--digitHeightWithMargin) * 2 - var(--digitWidth));
	}
	.places2pin[data-target="MISYUKU"]{
		top:calc(50% + var(--digitHeightWithMargin) * 3 - var(--digitWidth));
	}


	/*
	.places2pin[data-target="YOGA"]{top:calc(50% - var(--digitHeightWithMargin) * 2.5 - var(--digitWidth));}
	.places2pin[data-target="KUDANSHITA"]{top:calc(50% - var(--digitHeightWithMargin) * 2.5 - var(--digitWidth));}

	.places2pin[data-target="SANGENJAYA"]{top:calc(50% - var(--digitHeightWithMargin) * 1.5 - var(--digitWidth));}
	.places2pin[data-target="KAMIYACHO2"]{top:calc(50% - var(--digitHeightWithMargin) * 1.5 - var(--digitWidth));}

	.places2pin[data-target="MIDORIGAOKA"]{top:calc(50% - var(--digitHeightWithMargin) * 0.5 - var(--digitWidth));}
	.places2pin[data-target="SANGENJAYA2"]{top:calc(50% - var(--digitHeightWithMargin) * 0.5 - var(--digitWidth));}
	
	.places2pin[data-target="KAMIYACHO"]{top:calc(50% + var(--digitHeightWithMargin) * 0.5 - var(--digitWidth));}
	.places2pin[data-target="FUKAZAWA"]{top:calc(50% + var(--digitHeightWithMargin) * 0.5 - var(--digitWidth));}

	.places2pin[data-target="OMOTESANDO"]{top:calc(50% + var(--digitHeightWithMargin) * 1.5 - var(--digitWidth));}
	.places2pin[data-target="TSURUMAKI"]{top:calc(50% + var(--digitHeightWithMargin) * 1.5 - var(--digitWidth));}
	
	.places2pin[data-target="MIDORIGAOKA2"]{top:calc(50% + var(--digitHeightWithMargin) * 2.5 - var(--digitWidth));}
	*/



	.place2Data{
		padding:0 25px;
	}
	.place2Data .code{
		font-size:32px;
		line-height:135%;
	}
	.place2Data a,
	.place2Data .tel{
		font-size:28px;
		line-height:150%;
	}
}















.darkMode{
	display:none;
}

@media (prefers-color-scheme: dark){
	.darkMode{
		display:block;
		z-index:65575;
		width:100vw;
		height:200vh;
		position:fixed;
		left:0;
		top:-50vh;
		background:white;
		mix-blend-mode:difference;
		pointer-events:none;
	}
	.photo img,
	.animationNoise,
	.photos .background,
	.placeData .indicators,
	.places2pin::before,.places2pin::after,
	.effect .background{
		filter:invert(100%);
	}
	.stripe:before{
		background-image:linear-gradient(-90deg, #cccccc 75%, white 25%);
	}
}