@charset "utf-8";

/*==============================================================================================================
  .studio / スタジオ紹介ページ
==============================================================================================================*/

/*------------------------------------------
  #mainVisual
------------------------------------------*/

#mainVisual {
	background-image: url(../../img/studio/mv01.png);
}


/*
	.ropTxt
---------------------------*/

.studio .topTxt {
	font-size: 13px;
	text-align: center;
	letter-spacing: 5px;
	line-height: 2.5;
	margin: 40px auto 60px;
}


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

	.studioTopTxt {
		margin: 30px auto;
		line-height: 1.8;
	}

}


/*------------------------------------------
  .studioList
------------------------------------------*/

.studioList {
	margin-bottom: 45px;
	border: 1px solid #4c4b4c;
}

.studioList .topName {
	color: #fff;
	font-size: 13px;
	text-align: center;
	padding: 5px;
	background: #4c4b4c;
}

.studioList .txtBox {
	padding: 30px;
}

.studioList .subName {
	font-size: 17px;
	text-align: center;
	font-weight: 500;
	position: relative;
	padding-top: 40px;
	margin-bottom: 20px;
}

.studioList .subName:before {
	content: "";
	width: 6px;
	height: 30px;
	background: #d5b45c;
	border-radius: 10px;
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	margin: auto;
}

.studioList .txt {
	font-size: 13px;
}


/*
	スライダー
---------------------------*/

.studioList .slider {
	width: 48.5%;
	float: left;
	margin-bottom: 40px !important;
}

.studioList .imgFitBox {
	height: 300px;
	padding: 0 5px;
}

.studioList .imgFitBox img {
	object-fit: contain;
	font-family: 'object-fit: contain; object-position: center center;';
}


/*
	所在地情報
---------------------------*/

.studioData {
	width: 49.5%;
	float: right;
}

.studioData .subTtl {
	font-weight: 500;
	margin-bottom: 70px;
}

.studioList th,
.studioList td {
	font-size: 13px;
}

.studioList th {
	width: 70px;
	vertical-align: top;
}

.studioList td p {
	font-size: inherit;
	margin-top: 20px;
}

.studioList td span {
	color: #dc0000;
	font-weight: bold;
}


/*
	google map
---------------------------*/

.mapBox {
	clear: both;
}

.mapBox {
	position: relative;
	padding-bottom: 45%;
	height: 0;
	overflow: hidden;
}

.mapBox iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
		-webkit-box-sizing: border-box;
	box-sizing: border-box;
}


/*
	駐車場情報
---------------------------*/

.parkingMap {
	clear: both;
	width: 48.5%;
	float: left;
	text-align: center;
	margin-bottom: 30px;
	background: #fff;
	border: 1px solid #4c4b4c;
}

.parkingData {
	width: 49.5%;
	float: right;
	margin-bottom: 30px;
}



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

	.studioList {
		margin-bottom: 20px;
	}
	
	.studioList .txtBox {
		padding: 20px 15px;
	}
	
	.studioList .txt {
		font-size: 13px;
	}
	
	
	/*
		スライダー
	---------------------------*/
	
	.studioList .slider {
		width: 100%;
		float: none;
		margin-bottom: 5px !important;
	}
	
	.studioList .imgFitBox {
			height: 240px;
	}


	/*
		所在地情報
	---------------------------*/
	
	.studioData {
		width: 100%;
		float: none;
		margin-bottom: 30px;
	}
	
	.studioData .subTtl {
		margin-bottom: 20px !important;
	}
	
	
	/*
		google map
	---------------------------*/
	
	.mapBox {
		padding-bottom: 58%;
	}
	
	
	/*
		駐車場情報
	---------------------------*/
	
	.parkingMap {
		width: 100%;
		float: none;
	}
	
	.parkingData {
		width: 100%;
		float: none;
	}

}


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

	.mapBox {
		padding-bottom: 80%;
	}

}