@charset "utf-8";

/* =======================================================================================
	TEMPLATE
======================================================================================= */



/* =======================================================================================
	COMMON
======================================================================================= */



/* =======================================================================================
	PAGE
======================================================================================= */

/*-------------------------------------------------------------------------------------  
mainHeaderVisualWrap
-------------------------------------------------------------------------------------  */
	.pt-masterplan_01 .mainHeaderVisualWrap .pPic {
		margin-left:	calc(-50vw + 50%);
		margin-right:	calc(-50vw + 50%);
	}
	.pt-masterplan_01 .mainHeaderVisualWrap .pPic img {
		width: 100%;
		max-width: none;
	}

/*-------------------------------------------------------------------------------------  
masterplanSection
-------------------------------------------------------------------------------------  */
	.masterplanUnit01{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	.masterplanUnit01 .txtBox{
		width: 37%;
	}
	.masterplanUnit01 .picBox{
		width: 56.25%;
		position: relative;
	}
	.masterplanUnit02{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		flex-direction: row-reverse;
		margin-top:var(--site-marpad-XL);
	}
	.masterplanUnit02 > *{
		width:  48%;
	}
@media screen and (max-width: 1200px) {
	.masterplanUnit01{
		display: block;
	}
	.masterplanUnit01 > *{
		width:  100%!important;
	}	
	.masterplanUnit01 .txtBox{
		margin-bottom: 2em;
	}
	.masterplanUnit01 .picBox{
		max-width: 900px;
		margin: 0 auto;
	}
}
@media screen and (max-width: 900px) {
	.masterplanUnit02{
		display: block;
	}
	.masterplanUnit02  > *{
		width:  100%!important;
	}	
	.masterplanUnit02 .txtBox{
		margin-bottom: 2em;
	}
}



/*-------------------------------------------------------------------------------------  
commonspaceSection
-------------------------------------------------------------------------------------  */

/*comSpaceBox ------------------------------  */
	.comSpaceBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		flex-direction: row-reverse;
		margin-top:var(--site-marpad-XL);
	}
	.comSpaceBox  .txtBox{
		width: 37%;
	}
	.comSpaceBox  .picBox{
		width: 56.25%;
	}

@media screen and (max-width: 1200px) {
	.comSpaceBox {
		display: block;
	}
	.comSpaceBox > *{
		width:  100%!important;
	}	
	.comSpaceBox .txtBox{
		margin-bottom: 2em;
	}
}
@media screen and (max-width: 600px) {
	.comSpaceBox {
		margin-top:var(--site-marpad-M);
	}
}

/*-------------------------------------------------------------------------------------  
lobbySection
-------------------------------------------------------------------------------------  */
.comdrawingWrap{
	margin:var(--site-marpad-L) auto;
}

.comdrawingBox .js_swipeMe_active .js_swipeMeInnerBoxOverlay, 
.comdrawingBox .js_swipeMe_active .js_swipeMeSwipeItem {
  width: 280%;
}


/*-------------------------------------------------------------------------------------  
serviceSection
-------------------------------------------------------------------------------------  */
	.serviceUnitWrap .serviceUnit{
		max-width: 1000px;
		width: 90%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		margin-bottom:var(--site-marpad-XL);
	}
	.serviceUnitWrap .serviceUnit:last-child{
		margin-bottom:0;
	}
	.serviceUnitWrap .serviceUnit > *{
		width: 46%;
	}
	.serviceUnitWrap .serviceUnit:nth-child(odd) {
		flex-direction: row-reverse;
	}
	.serviceUnitWrap .serviceUnit:nth-child(even) {
		margin-right: 0;
		margin-left: auto;
	}
	.serviceUnitWrap .serviceUnit .picBox{
		box-shadow: 15px 15px 0px 0px #393939;
		position: relative;
	}

@media screen and (max-width: 900px) {
	.serviceUnitWrap .serviceUnit {
		max-width: 1000px;
		width: 94%;
	}
}
@media screen and (max-width: 600px) {
	.serviceUnitWrap .serviceUnit{
		display: block;
		width: 90%;
	}
	.serviceUnitWrap .serviceUnit > *{
		width: 100%;
	}
	.serviceUnitWrap .serviceUnit .txtBox{
		margin-bottom: 2em;
	}
}