@charset "utf-8";

/* ***************************************************************************************************
	COMMON
*************************************************************************************************** */

/* mainRoleHeaderVisualWrap
------------------------------------------------------------------------ */
	/*.mainRoleHeaderVisualBox .ppic img {
		object-position: center center;
	}*/




/* ***************************************************************************************************
	PAGE
*************************************************************************************************** */

/* commonspaceColBoxWrap
------------------------------------------------------------------------ */
	.commonspaceColBoxWrap .generalColBox {
		--common-generalColBox-margin-t:	40px;
		/*margin-top: 0;*/
	}
	.commonspaceColBoxWrap .colUnit {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		align-content: flex-start;
	}
	.commonspaceColBoxWrap .colUnit > * {
		width: 100%;
	}
	.commonspaceColBoxWrap .colUnit .pic {
		order: -1;
	}
	.commonspaceColBoxWrap .colUnit .pic img {
		width: 100%;
		max-width: none;
	}
	/*.commonspaceColBoxWrap .colUnit .pic .imgcapkeep {
		color: #fff;
		background: rgba(0, 0, 0, .65);
		padding: 0.2em 0.8em;
	}*/
	.commonspaceColBoxWrap .colUnit .ttl,
	.commonspaceColBoxWrap .colUnit .txt {
		width: calc(100% - 2em);
		max-width: 300px;
		margin-left:	auto;
		margin-right:	auto;
	}
	.commonspaceColBoxWrap .colUnit .ttl {
		text-align: center;
	}
@media screen and (max-width: 520px) { /*{SPs}*/
	.commonspaceColBoxWrap  {
		width: 96%;
		margin-left:	auto;
		margin-right:	auto;
	}
	.commonspaceColBoxWrap .colUnit .ttl,
	.commonspaceColBoxWrap .colUnit .txt {
		padding-left: 0;
		padding-right: 0;
	}
}



/* entrancerap
------------------------------------------------------------------------ */
/* entranceMainBox
---------------------------------------------------- */
	.entranceMainBox {
		position: relative;
	}
/* ===========
	ANIME
=========== */
	.entranceMainBox.js_showTarget .pic {
		overflow: hidden;
	}
	.entranceMainBox.js_showTarget .pic img {
		display: block;
		opacity: .7;
		filter: blur(15px);
		transform: scale(1.08);
	}
	.entranceMainBox.js_showTarget [class*="deco"]::before,
	.entranceMainBox.js_showTarget [class*="deco"]::after {
		content: "";
		position: absolute;
		inset: 0;
		width: 50%;
		z-index: 1;
		background: #fff;
		opacity: 1;
	}
	.entranceMainBox.js_showTarget [class*="deco"]::before {	right: auto; background: linear-gradient(to right, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .02) 100%);}
	.entranceMainBox.js_showTarget [class*="deco"]::after {	left: auto; background: linear-gradient(to left, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .02) 100%);}
	
	/* Animate */
	.entranceMainBox.js_showTargetAnimate .pic img {
		animation: 1.9s ease-out .1s both ANIME-entranceMainBox_picImg;
	}
	.entranceMainBox.js_showTargetAnimate .deco1::before,
	.entranceMainBox.js_showTargetAnimate .deco1::after {
		animation: 1.2s ease-out .3s both;
	}
	.entranceMainBox.js_showTargetAnimate .deco2::before,
	.entranceMainBox.js_showTargetAnimate .deco2::after {
		animation: 1s ease-out .6s both;
	}
	.entranceMainBox.js_showTargetAnimate [class*="deco"]::before {	animation-name: ANIME-entranceMainBox_deco-toLeft;}
	.entranceMainBox.js_showTargetAnimate [class*="deco"]::after {		animation-name: ANIME-entranceMainBox_deco-toRight;}
@keyframes ANIME-entranceMainBox_picImg {
	0% {	opacity: .7;filter: blur(10px); transform: scale(1.08);}
	70% {				filter: blur(0); transform: scale(1);}
	100% {	opacity: 1;	filter: blur(0); transform: scale(1);}
}
@keyframes ANIME-entranceMainBox_deco-toLeft {
	0% {	opacity: 1;	clip-path: inset(0 0 0 0);}
	100% {	opacity: .3;	clip-path: inset(0 100% 0 0);}
}
@keyframes ANIME-entranceMainBox_deco-toRight {
	0% {	opacity: 1;	clip-path: inset(0 0 0 0);}
	100% {	opacity: .3;	clip-path: inset(0 0 0 100%);}
}





/* coworkingWrap
------------------------------------------------------------------------ */
	.coworkingWrap {}

/* coworkingIntroBox
---------------------------------------------------- */
	.coworkingIntroBox {}

/* coworkingMainBox
---------------------------------------------------- */
	.coworkingMainBox {
		position: relative;
	}
/* ===========
	ANIME
=========== */
	.coworkingMainBox.js_showTarget .pic {
		overflow: hidden;
	}
	.coworkingMainBox.js_showTarget .pic img {
		display: block;
		opacity: .7;
		filter: blur(15px);
		transform: scale(1.08);
	}
	.coworkingMainBox.js_showTarget [class*="deco"]::before,
	.coworkingMainBox.js_showTarget [class*="deco"]::after {
		content: "";
		position: absolute;
		inset: 0;
		width: 50%;
		z-index: 1;
		background: #fff;
		opacity: 1;
	}
	.coworkingMainBox.js_showTarget [class*="deco"]::before {	right: auto; background: linear-gradient(to right, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .02) 100%);}
	.coworkingMainBox.js_showTarget [class*="deco"]::after {	left: auto; background: linear-gradient(to left, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .02) 100%);}
	
	/* Animate */
	.coworkingMainBox.js_showTargetAnimate .pic img {
		animation: 1.9s ease-out .1s both ANIME-coworkingMainBox_picImg;
	}
	.coworkingMainBox.js_showTargetAnimate .deco1::before,
	.coworkingMainBox.js_showTargetAnimate .deco1::after {
		animation: 1.2s ease-out .3s both;
	}
	.coworkingMainBox.js_showTargetAnimate .deco2::before,
	.coworkingMainBox.js_showTargetAnimate .deco2::after {
		animation: 1s ease-out .6s both;
	}
	.coworkingMainBox.js_showTargetAnimate [class*="deco"]::before {	animation-name: ANIME-coworkingMainBox_deco-toLeft;}
	.coworkingMainBox.js_showTargetAnimate [class*="deco"]::after {		animation-name: ANIME-coworkingMainBox_deco-toRight;}
@keyframes ANIME-coworkingMainBox_picImg {
	0% {	opacity: .7;filter: blur(10px); transform: scale(1.08);}
	70% {				filter: blur(0); transform: scale(1);}
	100% {	opacity: 1;	filter: blur(0); transform: scale(1);}
}
@keyframes ANIME-coworkingMainBox_deco-toLeft {
	0% {	opacity: 1;	clip-path: inset(0 0 0 0);}
	100% {	opacity: .3;	clip-path: inset(0 100% 0 0);}
}
@keyframes ANIME-coworkingMainBox_deco-toRight {
	0% {	opacity: 1;	clip-path: inset(0 0 0 0);}
	100% {	opacity: .3;	clip-path: inset(0 0 0 100%);}
}

/* coworkingTxtBox
---------------------------------------------------- */
	.coworkingTxtBox {
		line-height: 2.2;
		font-size: 1.2em;
		letter-spacing: .1em;
	}
@media screen and (max-width: 768px) { /*{SP}*/
	.coworkingTxtBox {
		line-height: 2.2;
		font-size: 1.12em;
	}
}
@media screen and (max-width: 520px) { /*{SPs}*/
	.coworkingTxtBox {
		font-size: 1.05em;
	}
}

/* coworkingListWrap
---------------------------------------------------- */
@media screen and (max-width: 520px) { /*{SPs}*/
	.coworkingListWrap .generalColBox {
		margin-top: calc(var(--common-generalColBox-margin-t) * -1);
	}
}




/* facilitiesWrap
------------------------------------------------------------------------ */
	.facilitiesWrap {}

/* facilitiesIntroBox
---------------------------------------------------- */
	.facilitiesIntroBox {}

/* facilitiesListBox
---------------------------------------------------- */
	.facilitiesListBox {}




/* appearanceCcontainer
------------------------------------------------------------------------ */
	.appearanceCcontainer {
		overflow: hidden;
	}

/* appearanceWrap
------------------------------------------------------------------------ */
	.appearanceWrap {}

/* appearanceIntroBox
---------------------------------------------------- */
	.appearanceIntroBox {}

/* appearanceMainBox
---------------------------------------------------- */
	.appearanceMainBox {}
	.appearanceMainBoxInner {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.appearanceMainBoxInner .pic {
		flex: 0 0 58.73016%;
	}
	.appearanceMainBoxInner .txtBox {
		flex: 0 0 36.50794%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.appearanceMainBoxInner .txtBoxInner {
		position: relative;
		width: 100%;
		line-height: 2.5;
		background: rgba(255, 255, 255, .2);
		padding: clamp(40px, 8vw, 130px) clamp(30px, 5vw, 80px) clamp(40px, 9vw, 130px);
		border: 2px solid #ccc;
		border-radius: 0 70px 0 0;
	}
	.appearanceMainBoxInner .txtBoxInner .heading {
		line-height: 1.6;
		font-family: var(--site-font_family-en2);
		font-size: 1.92857em;
		letter-spacing: .05em;
		margin-bottom: .9em;
	}
	.appearanceMainBoxInner .txtBoxInner .decoTxt {
		position: absolute;
		bottom: 0;
		right: 0;
		width: clamp(150px, 58%, 212px);
		transform: translate(13%, -120%) rotate(-18deg);
		transform-origin: right bottom;
	}
@media screen and (max-width: 980px) { /*{TBs}*/
	.appearanceMainBoxInner {
		display: block;
	}
	.appearanceMainBoxInner .txtBoxInner {
		margin-top: var(--default-marpad-S);
		padding: clamp(50px, 8vw, 70px) clamp(30px, 8vw, 130px) clamp(50px, (8vw + 55px), 90px);
		border-radius: 0 60px 0 0;
	}
	.appearanceMainBoxInner .txtBoxInner .heading,
	.appearanceMainBoxInner .txtBoxInner .txt {
		max-width: 560px;
		margin-left: auto;
		margin-right: auto;
	}
	.appearanceMainBoxInner .txtBoxInner .decoTxt {
		width: clamp(150px, 58%, 180px);
	}
}

/* ===========
	ANIME
=========== */
	.appearanceMainBoxInner .pic.js_showTarget {
		opacity: 0; transform: translateX(-50px);
	}
	.appearanceMainBoxInner .txtBox.js_showTarget {
		opacity: 0; transform: translateX(50px);
	}
	/* Animate */
	.appearanceMainBoxInner .pic.js_showTargetAnimate {
		animation: .8s ease-out .2s both ANIME-appearanceMainBoxInner_pic;
	}
	.appearanceMainBoxInner .txtBox.js_showTargetAnimate {
		animation: .8s ease-out .2s both ANIME-appearanceMainBoxInner_txtBox;
	}
@keyframes ANIME-appearanceMainBoxInner_pic {
	0% {opacity: 0; transform: translateX(-50px);}
	65% {opacity: 1;}
	100% {opacity: 1; transform: translateX(0);}
}
@keyframes ANIME-appearanceMainBoxInner_txtBox {
	0% {opacity: 0; transform: translateX(50px);}
	65% {opacity: 1;}
	100% {opacity: 1; transform: translateX(0);}
}