@charset "utf-8";

@media screen and (max-width:640px) {
}

/*mv*/
.section.mv .wp_mv {
	display: flex;
	flex-direction: column;
	margin: auto;
}
.section.mv .h1_mv {
	background-color: #898989;
}
.section.mv .logo_hq {
	fill:#fff;
	width: 100%;
}
.section.mv .top_fig {
	overflow: hidden;
}
.section.mv .top_fig.fadeAnm .top_img {
	animation: over_img 2.5s ease-out forwards;
}

@keyframes over_img {
	0%   {transform: scale(1);}
	100% {transform: scale(1.05);}
}

@media screen and (min-width:641px) {
	.section.mv {
		padding-top: min(11.5625vw, 330px);
		padding-bottom: min(12.5vw, 360px);
	}
	.section.mv .wp_mv {
		width: min(32.5vw, 930px);
	}
	.section.mv .h1_mv {
		padding: min(2.777777777777778vw, 80px);
	}
	.section.mv .top_fig {
		margin-bottom: min(1.875vw, 54px);
	}
}
@media screen and (max-width:640px) {
	.section.mv {
		padding: min(29.6vw, 220px) 0 min(32vw, 240px);
	}
	.section.mv .wp_mv {
		width: min(76vw, 570px);
	}
	.section.mv .h1_mv {
		padding: min(6.4vw, 48px);
	}
	.section.mv .top_fig {
		margin-bottom: min(14vw, 105px);
	}
}


/* list h/q */
section.list_hq .h2_hq {margin-bottom: 0;}
.box_prd .box_prd_link {
	color: #898989;
	text-decoration: none;
	display: flex;
	justify-content: space-between;
	overflow: hidden;
	position: relative;
}
.box_prd .wp_intro {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.box_prd .box_name {
	position: relative;
	z-index: 3;
}
.box_prd .box_name._pre {
	width: calc(100% - min(62.6736vw, 1805px));
}
.box_prd .prd_name {
	font-family: 'DMSerifDisplay', serif;
	font-size: clamp(2.2rem, 4.49vw, 4.4rem);
	font-weight: 400;
	line-height: 1.1;
	margin-top: 5px;
}
.box_prd .box_name._pre {
	color: #898989;
}
.box_prd .box_name._hv {
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.box_prd .prd_intro_tp {
	font-family: 'Montserrat', serif;
	font-size: clamp(0.6rem, 1.226vw, 1.2rem);
}
.box_prd .box_prd_link:hover .prd_intro_tp {
	font-size: clamp(0.7rem, 1.43vw, 1.4rem);
}
.box_prd .prd_img_base {
	width: min(62.6736vw, 1805px);
	z-index: 0;
}
.box_prd .wp_txt {
	color: #fff;
}

.box_prd .prd_intro_hv {
	font-family: 'Noto Sans JP', serif;
	font-weight: 400;
	font-size: clamp(0.75rem, 1.532vw, 1.5rem);
	line-height: 2;
}
.box_prd .prd_intro_hv._catch {
	font-size: clamp(1.15rem, 2.348vw, 2.3rem);
	line-height: 1.51;
	margin-bottom: .5em;
}

.box_prd .commingsn {
	font-family: 'Montserrat', serif;
	font-weight: 600;
	font-size: clamp(1.1rem, 2.246vw, 2.2rem);
}

.box_prd .txt_more .link_more {
	color: #fff;
}
.box_prd .txt_more .link_more::before,
.box_prd .txt_more .link_more::after {
	background-color: #fff;
}

@keyframes hover_prd_bs {
	0%  {
		transform: scale(0, 1);
		transform-origin: right center;
		opacity: 0;
	}
	100%{
		transform: scale(1, 1);
		opacity: .6;
	}
}
@keyframes hoverOut_prd_bs {
	0%  {
		transform: scale(1, 1);
		transform-origin: right center;
		opacity: .6;
	}
	100%{
		transform: scale(0, 1);
		opacity: 0;
	}
}

@keyframes fadeIn {
	0% {opacity: 0;}
	100%{opacity: 1;}
}
@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@keyframes fadeIn2 {
	0%  {
		display: none;
		opacity: 0;
	}
	75% {
		display: block;
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes fadeOut2 {
	0% {opacity: 1;}
	75% {
		opacity: 0;
		display: none;
	}
	100%{
		opacity: 0;
		display: none;
	}
}



@media screen and (min-width:641px) {
	.box_prd {
		/*border-bottom: 1px solid #898989;*/
		padding: min(0.6944444444444444vw, 20px) 0;
		position: relative;
	}
	.box_prd::before,
	.box_prd::after {
		content: '';
		display: block;
		width: 100%;
		height: 1px;
		background-color: #898989;
		position: absolute;
		left: 0;
		right: 0;
		transition: all .2s;
		opacity: 1;
	}
	.box_prd::before {
		top: 0;
	}
	.box_prd::after {
		bottom: -1px;
	}
	.box_prd.on::before,
	.box_prd.on::after,
	.box_prd:hover::before,
	.box_prd:hover::after {
		opacity: 0;
	}
	.box_prd.prd_coworking {padding-top: 0;}
	.box_prd.prd_coworking::before {display: none;}
	
	
	.box_prd .box_prd_link::before {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		opacity: 0;
	}
	.box_prd.prd_coworking .box_prd_link::before {
		background-color: #70b49a;
	}
	.box_prd.prd_share .box_prd_link::before {
		background-color: #73473b;
	}
	.box_prd.prd_cafe .box_prd_link::before {
		background-color: #878c9c;
	}
	.box_prd.prd_space .box_prd_link::before {
		background-color: #463564;
	}
	.box_prd.prd_rental .box_prd_link::before {
		background-color: #b92c4c;
	}
	.box_prd.prd_shelf .box_prd_link::before {
		background-color: #1e2f27;
	}

	.box_prd .prd_img_hover {
		z-index: 0;
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}

	.box_prd .box_prd_link {
		height: min(15.625vw, 450px);
		/*padding: min(0.6944444444444444vw, 20px) 0;*/
		position: relative;
	}
	.box_prd .box_name._hv {
		width: min(46.25vw, 1330px);
		height: 100%;
		padding-left: min(7.118055555555556vw, 205px);
	}
	.box_prd ._hv .prd_name {
		width: min(30.3125vw, 873px);
		height: auto;
		margin-bottom: min(1.5625vw, 45px);
	}

	.box_prd .wp_txt {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding-left: min(16.14583333333333vw, 465px);
		left: calc(100% - min(62.6736vw, 1805px));
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		opacity: 0;
	}
	/*hover*/
	.box_prd .box_prd_link:hover::before {
		animation: hover_prd_bs .5s ease-out forwards;
		z-index: 1;
		visibility: visible;
	}
	.box_prd:hover .wp_intro {
		display: block;
		z-index: 3;
	}
	.box_prd .box_prd_link:hover {
		transition-delay: .5s;
		height: min(30.55555555555556vw, 880px);
	}
	.box_prd:hover .prd_img_hover {
		animation: fadeIn 1s .5s ease-out forwards;
		z-index: 2;
	}
	.box_prd:hover .wp_txt {
		animation: fadeIn 1s .75s ease-out forwards;
		z-index: 5;
	}
	.box_prd:hover ._hv {
		height: 100%;
		animation: fadeIn 1.2s .75s ease-out forwards;
	}
	.box_prd:hover ._pre,
	.box_prd ._hv {
		height: 0;
		opacity: 0;
	}
	.box_prd:hover ._pre {
		animation: fadeOut .25s ease-out forwards;
	}
	/*hover out*/
	.box_prd .box_prd_link::before {
		transform-origin: right center;
		animation: hoverOut_prd_bs .5s ease-out forwards;
		visibility: hidden;
	}
	.box_prd .prd_img_hover {
		animation: fadeOut .25s ease-out forwards;
	}
	.box_prd .txt_more {
		margin-top: min(4.428571428571429vw, 124px);
	}
	.comingsoon.box_prd .txt_more {
		margin-top: 0;
	}
	
	.box_prd:hover .prd_img_base {
		animation: fadeOut .5s forwards;
	}
	.box_prd .prd_img_base {
		opacity: 0;
		animation: fadeIn 1s .35s forwards;
	}

}

@media screen and (min-width:1200px) {
	.box_prd .prd_name._vis {
		font-size: clamp(2.7rem, 5.51vw, 5.4rem);
	}
}
@media screen and (max-width:640px) {
	.list_hq .wp_h2HQ,
	.prd_intro_tp,
	.box_prd .prd_img_base,
	.box_prd .prd_img_hover,
	.box_prd .box_name._pre {display: none;}
	.section.list_hq {
		margin: 0 0 min(18.8vw, 140px);
	}
	.box_prd {
		margin-bottom: min(3.2vw, 24px);
	}
	.box_prd .wp_intro {
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		padding-top:  min(14vw, 105px);
	}
	.prd_share .wp_intro,
	.prd_coworking .wp_intro {
		padding-top: calc(min(14vw, 105px) / 2);
	}
	.prd_cafe .wp_intro {
		padding-top: calc(min(14vw, 105px) * 3);
	}

	.box_prd ._hv .prd_name {
		width: min(85.2vw, 639px);
		margin: 0 auto min(9.6vw, 72px);
	}
	.box_prd .prd_intro_hv {
		font-size: clamp(1rem, 2.606vw, 2rem);
	}
	.box_prd .prd_intro_hv._catch {
		font-size: clamp(1.5rem, 3.908vw, 3rem);
		margin-bottom: 1em;
	}
	.box_prd .commingsn {
		font-size: clamp(1.05rem, 2.736vw, 2.1rem);
		width: 100%;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 5em;
	}
	.box_prd .txt_more {
		position: absolute;
		left: 0;
		right: 0;
		bottom: min(9.6vw, 70px);
	}
	.box_prd .txt_more .link_more .dc,
	.box_prd .txt_more .link_more {
		border-color: #fff;
	}
	.box_prd .txt_more .link_more .dc::after {
		background-color: #fff;
	}
}



/*access*/
.access .wp_h2HQ .address {
	color: #898989;
	font-family: 'Montserrat', serif ;
	font-weight: 400;
	font-size: clamp(0.7rem, 1.43vw, 1.4rem);
}

.access #map,
.access .frame_map {
	aspect-ratio: 2680 / 800;
}

@media screen and (min-width:641px) {
	.access {position: absolute;}
	.access .h2_hq {
		border-bottom: none;
		padding-bottom: 0;
		margin-bottom: 0;
		margin-right: min(3.263888888888889vw, 94px);
	}
	.access .txt_more {
		position: absolute;
		right: 0;
		top: 0;
	}
}
@media screen and (max-width:640px) {
	.access #map,
	.access .frame_map {
		aspect-ratio: 690 / 960;
		margin-bottom: min(12vw, 90px);
	}
	.access .wp_h2HQ {
		border: none;
		padding-bottom: 0;
		margin-bottom: min(8vw, 60px);
	}
	.access .wp_h2HQ .address {
		font-size: clamp(1.4rem, 3.646vw, 2.8rem);
		text-align: center;
	}
}