@charset "UTF-8";
header nav.gnav ul.gnavList li.gnavItem:first-child {
	display: block;
}

header nav.gnav ul.gnavList li.gnavItem:first-child {
	display: block;
}


@font-face {
	font-family: "Hiragino Sans";
	src: local(HiraginoSans-W6);
	font-weight: 700;
}

/* base
--------------------------------------------------*/
main,
main a {
	color: #000;
	font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", "Helvetica", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
}

main a:hover {
	text-decoration: underline;
}

.mainCts {
	margin-bottom: 100px;
	border-bottom: 1px solid #ccc;
}

.cts {
	width: 100%;
	margin-bottom: 100px;
}

.cts .ctsInner {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

.pc {
	display: block !important;
}

.sp {
	display: none !important;
}

@media screen and (max-width: 767px) {
	main a:hover {
		text-decoration: none;
	}
	.mainCts {
		margin-bottom: 60px;
	}
	.cts {
		margin-bottom: 43px;
	}
	.cts .ctsInner {
		max-width: 100%;
		padding: 0 20px;
		box-sizing: border-box;
	}
	.pc {
		display: none !important;
	}
	.sp {
		display: block !important;
	}
	main a:hover {
		text-decoration: none !important;
	}
}

/* scaleImage */
.scaleImage {
	display: block;
	transition: all 0.3s;
}

a:hover .scaleImage {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
	transition-duration: 0.3s;
}

@media screen and (max-width: 767px) {
	.scaleImage {
		display: block;
		transition: none;
	}
	a:hover .scaleImage {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

/* arwBlank */
.arwBlank i {
	position: relative;
	padding-right: 30px;
}

.arwBlank i::after {
	display: inline-block;
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background: url(/-/media/image/msh/company/realestate/icon_blank.svg) no-repeat 0 0;
	background-size: cover;
}

/* arwLink */
.arwLink i {
	position: relative;
	left: 10px;
	padding-right: 17px;
}

/* IE */
_:-ms-input-placeholder, :root .arwLink i {
	top: -3px;
}

.arwLink i::before {
	display: inline-block;
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	-webkit-transform: translate3d(0, -50%, 1px);
	transform: translate3d(0, -50%, 1px);
	width: 17px;
	height: 2px;
	background-color: #1C73D0;
	transition: all 0.3s;
}

.arwLink i::after {
	display: inline-block;
	content: '';
	position: absolute;
	top: 50%;
	right: -1px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 9px;
	height: 16px;
	background: url(/-/media/image/msh/company/realestate/arrow_head_blue.svg) no-repeat 0 0;
	background-size: cover;
	transition: all 0.3s;
}


a:hover .arwLink i::after {
	right: -8px;
}

a:hover .arwLink i::before {
	width: 24px;
}

@media screen and (max-width: 767px) {
	.arwBlank span {
		padding-right: 25px;
	}

	.arwLink i {
		left: 5px;
	}

	.arwLink .arwLink i::before,
	.arwLink .arwLink i::after {
		transition: none;
	}
	a:hover .arwLink i::after {
		right: 0;
	}
	a:hover .arwLink i::before {
		width: 17px;
	}
}

/* ctsHeader h2 */
.ctsHeader {
	text-align: center;
}

.headingTitle {
	margin: 0 auto 5px;
	text-indent: -9999px;
}

.headingText {
	font-size: 1.4rem;
	line-height: 1.5;
}

/* section_block */
@media screen and (max-width: 767px) {
	.section_block {
		padding: 0 25px;
	}
}

/* btn */
.btn a {
	position: relative;
	display: block;
	width: 100%;
	height: 48px;
	background-color: #0066cc;
	border-radius: 26px;
	color: #ffffff;
	font-size: 1.6rem;
	text-align: center;
	line-height: 48px;
	transition: 0.3s all;
}

.btnWhite a {
	background-color: #ffffff;
	border: 1px solid #0851d7;
	box-sizing: border-box;
	color: #0851d7;
}

.btn .arrowWhite,
.btn .arrowBlue {
	position: absolute;
	top: 50%;
	right: 43px;
	transform: translateY(-50%);
	width: 10px;
	height: 14px;
}

.btn .arrowWhite::before,
.btn .arrowWhite::after {
	content: '';
	position: absolute;
	right: 0;
	width: 10px;
	height: 3px;
	display: inline-block;
	border-radius: 2px;
	background: #fff;
}

.btn .arrowBlue::before,
.btn .arrowBlue::after {
	content: '';
	position: absolute;
	right: 0;
	width: 10px;
	height: 3px;
	display: inline-block;
	border-radius: 2px;
	background: #0851d7;
}

.btn .arrowWhite::before,
.btn .arrowBlue::before {
	top: calc(50% - 4px);
	transform: rotate(45deg);
}

.btn .arrowWhite::after,
.btn .arrowBlue::after {
	bottom: calc(50% - 4px);
	transform: rotate(-45deg);
}

@media screen and (max-width: 767px) {
	.btn .arrowWhite,
	.btn .arrowBlue {
		right: 25px;
	}
}

@media screen and (min-width: 768px) {
	.btn a:hover {
		background-color: #e6f0fa;
		color: #0851d7;
		text-decoration: none;
	}

	.btnWhite a:hover {
		background-color: #0066cc;
		color: #ffffff;
	}

	.btn a:hover .arrowWhite::before,
	.btn a:hover .arrowWhite::after {
		background: #0851d7;
	}

	.btn a:hover .arrowBlue::before,
	.btn a:hover .arrowBlue::after {
		background: #ffffff;
	}
}


/* mainTitle
--------------------------------------------------*/
.mainTitle {
	position: relative;
	width: 100%;
	height: 260px;
	margin-bottom: 72px;
	background-color: #f2f3f6;
}

.mainTitle::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 100%;
	background-color: #c7ddfa;
}

.mainTitle::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: -2.6%;
	width: 48.18%;
	height: 100%;
	background-color: #c7ddfa;
	transform:skew(344deg);
}

.mainTitleInner {
	position: relative;
	max-width: 1000px;
	height: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.mainTitle .title {
	flex: 0 0 595px;
}

.mainTitle .title h1 {
	position: relative;
	color: #1e335a;
	font-size: 5rem;
	line-height: 1.04;
	z-index: 1;
}

.mainTitle .btnArea {
	position: relative;
	flex: 0 0 350px;
	z-index: 1;
}

@media screen and (max-width: 767px) {
	.mainTitle {
		height: auto;
		padding: 68px 27px 64px;
		margin-bottom: 35px;
		box-sizing: border-box;
	}

	.mainTitleInner {
		display: block;
	}

	.mainTitle .title h1 {
		margin-bottom: 32px;
		font-size: 3.3rem;
		line-height: 1.83;
	}

	.mainTitle .btnArea {
		width: 91.79%;
		margin: 0 auto;
	}
	.mainTitle::after {
		right: -5.1%;
	}
}

/* propertyDescription
--------------------------------------------------*/
.propertyDescription {
	margin-bottom: 62px;
}

.propertyDescriptionInner {
	display: flex;
	justify-content: space-between;
}

@media screen and (max-width: 767px) {
	.propertyDescription {
		margin-bottom: 63px;
	}

	.propertyDescriptionInner {
		display: block;
	}
}

/* visual */
.visual {
	flex: 0 0 450px;
}

.visual .imageSet .mainImg,
.visual .imageSet .thumbnailItem {
	background-color: #f5f7f9;
}

.visual .imageSet .mainImg figure::before,
.visual .imageSet .thumbnailItem::before {
	content: '';
	display: block;
	position: relative;
	width: 100%;
	height: 0;
}

.visual .imageSet .mainImg figure,
.visual .imageSet .thumbnailItem {
	display: block;
	position: relative;
	overflow: hidden;
}

.visual .imageSet .mainImg figure img,
.visual .imageSet .thumbnailItem img {
	position: absolute;
	top: 0;
	height: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.visual .imageSet .thumbnailItem img {
	cursor: pointer;
}

.visual .imageSet {
	width: 100%;
}

.visual .imageSet .mainImg {
	margin-bottom: 5px;
}

.visual .imageSet .mainImg figure::before {
	padding-top: 65.6716%;
	/* padding-top: 80%; */
}

.thumbnails {
	display: flex;
	justify-content: space-between;
}

.visual .imageSet .thumbnailItem {
	width: 110px;
}

.visual .imageSet .thumbnailItem::before {
	padding-top: 65.4545%;
	/* padding-top: 78.1818%; */
}

@media screen and (max-width: 767px) {
	.visual {
		margin-bottom: 35px;
	}

	.visual .imageSet .mainImg figure::before {
		padding-top: 65.6716%;
	}

	.visual .imageSet .thumbnailItem {
		width: 23.88%;
	}

	.visual .imageSet .thumbnailItem::before {
		padding-top: 78.125%;
	}
}

/* infoText */
.infoText {
	flex: 0 0 487px;
}

.infoText .subTitle {
	position: relative;
	padding-bottom: 20px;
	margin-top: -5px;
	margin-bottom: 25px;
	border-bottom: 3px solid #acacac;
	font-size: 27px;
	font-weight: bold;
	line-height: 1;
	letter-spacing: -0.02em;
}

.infoText .subTitle::before {
	display: block;
	content: '';
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 70px;
	height: 3px;
	background-color: #0851d7;
}

@media screen and (max-width: 767px) {
	.infoText .subTitle {
		font-size: 24px;
		padding-bottom: 15px;
		margin-bottom: 44px;
	}

	.infoText .subTitle::before {
		width: 35px;
	}
}

table.data {
	width: 100%;
	border-collapse:  collapse;
	border-top: 1px solid #ccc;
	font-size: 1.5rem;
}

table.data tr {
	border-bottom: 1px solid #ccc;
}

table.data th {
	width: 145px;
	background-color: #f5f7f9;
}

table.data th,
table.data td {
	padding: 15px 8px 14px 16px;
	vertical-align: top;
	box-sizing: border-box;
}

table.data td {
	padding-left: 22px;
}

table.data .dataList {
	margin: -15px -8px -14px -22px;
}

table.data .dataList li {
	padding: 15px 8px 14px 22px;
	letter-spacing: -0.08em;
	box-sizing: border-box;
}

table.data .dataList li:not(:last-child) {
	border-bottom: 1px solid #ccc;
}

@media screen and (max-width: 767px) {
	table.data {
		font-size: 1.4rem;
	}

	table.data th {
		width: 35%;
	}

	table.data th,
	table.data td,
	table.data .dataList li {
		padding: 15px 8px 15px 12px;
	}

	table.data .dataList {
		margin: -15px -8px -15px -12px;
	}
}


/* supplementInfoInner
--------------------------------------------------*/
.supplementInfo {
	margin-bottom: 58px;
}


.supplementInfo .smallTitle {
	padding-left: 15px;
	margin-bottom: 25px;
	border-left: 3px solid #0851d7;
	font-size: 2.4rem;
	letter-spacing: -0.02em;
	line-height: 1.38;
}

.supplementInfoInner {
	display: flex;
	justify-content: space-between;
}

@media screen and (max-width: 767px) {
	.supplementInfo {
		margin-bottom: 74px;
	}

	.supplementInfo .smallTitle {
		margin-bottom: 20px;
	}

	.supplementInfoInner {
		display: block;
	}
}

/* floorDrawing */
.floorDrawing {
	flex: 0 0 450px;
}

.floorDrawing .image .modalImage {
	position: relative;
	display: block;
	width: 100%;
	height: 316px;
	border: 2px solid #c6c6c6;
	box-sizing: border-box;
}

.floorDrawing .image .modalImage::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 13px;
	right: 12px;
	width: 41px;
	height: 41px;
	background: url(/-/media/image/msh/company/realestate/icon_zoom.svg) no-repeat 0 0;
	background-size: cover;
	z-index: 1;
}

.floorDrawing .modalImage img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.floorDrawing .image .note {
	margin-top: 15px;
	font-size: 1.3rem;
	line-height: 1.38;
	letter-spacing: 0.08em;
}
@media screen and (max-width: 767px) {
	.floorDrawing {
		margin-bottom: 38px;
	}

	.floorDrawing .image .modalImage {
		height: auto;
		pointer-events: none;
	}

	.floorDrawing .image .modalImage::before,
	.floorDrawing .image .note {
		display: none;
	}

	.floorDrawing .modalImage img {
		position: static;
		transform: none;
	}

	.modalCts .modalCtsInner {
		display: none;
	}
}

.modalCts {
	max-width: 950px;
	margin: 0 auto;
}

.modalCts .modalCtsInner {
	position: relative;
	padding: 73px 45px 86px;
	background-color: #fff;
	border-radius: 3px;
	box-sizing: border-box;
}

.modalCtsHeader {
	margin-bottom: 25px;
}

.modalCtsHeader > p {
	display: inline;
}

.modalCtsHeader .name {
	font-size: 27px;
}

.modalCtsHeader .detail {
	font-size: 15px;
	padding-left: 42px;
}

.modalCts .modalCtsInner figure {
	border: 2px solid #c6c6c6;
}

.modalCtsClose {
	position: absolute;
	top: 26px;
	right: 0;
	width: 40px;
	height: 40px;
	cursor: pointer;
}

.modalCtsClose span {
	position: relative;
	display: inline-block;
	text-indent: -9999px;
}

.modalCtsClose span::before,
.modalCtsClose span::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3px;
	height: 40px;
	background: #272d4a;
}

.modalCtsClose span::before {
	transform: translate(-50%,-50%) rotate(45deg);
}

.modalCtsClose span::after {
	transform: translate(-50%,-50%) rotate(-45deg);
}

.mfp-close {
	display: none !important;
}

/* map */
.map {
	flex: 0 0 487px;
}

.mapIframe {
	position: relative;
	width: 100%;
	padding-top: 65.3608%;
}

.mapIframe iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 767px) {
	.mapIframe {
		padding-top: 60.8955%;
	}
}

/* contact
--------------------------------------------------*/
.contact {
	margin-bottom: 57px;
}

.contactInner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 47px 67px;
	background: #f5f6f8;
	border-radius: 3px;
	box-sizing: border-box;
}

.contact .info .infoLead {
	font-size: 20px;
	line-height: 1.1;
}

.contact .info .infoTel {
	font-family: "Hiragino Sans";
	font-size: 3rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.6;
}

.contact .info .telLink {
	color: #0066cc;
	pointer-events: none;
	text-decoration: none;
}

.contact .info .infoText {
	font-size: 1.5rem;
	letter-spacing: 0.08em;
	line-height: 1.2;
}

.contact .btnArea {
	flex: 0 0 420px;
}

.contact .btnArea .btn .mailWhite {
	position: relative;
}

.contact .btnArea .btn .mailWhite::before {
	content: '';
	display: inline-block;
	position: relative;
	top: 1px;
	width: 18px;
	height: 15px;
	margin-right: 15px;
	background: url(/-/media/image/msh/company/realestate/icon_mail.svg) no-repeat 0 0;
	background-size: cover;
}

@media screen and (min-width: 768px) {
	.contact .btnArea .btn a:hover .mailWhite::before {
		background: url(/-/media/image/msh/company/realestate/icon_mail-blue.svg) no-repeat 0 0;
		background-size: cover;
	}
}


.btnAll {
	max-width: 350px;
	margin: 0 auto 65px;
}

@media screen and (max-width: 767px) {
	.contact {
		margin-bottom: 45px;
	}

	.contactInner {
		display: block;
		padding: 38px 20px 46px;
		margin: 0 -20px;
		text-align: center;
	}

	.contact .info {
		margin-bottom: 33px;
	}

	.contact .info .infoLead {
		font-size: 1.6rem;
		line-height: 1.2;
	}

	.contact .info .infoText {
		font-size: 1.2rem;
	}

	.contact .info .telLink {
		pointer-events: auto;
	}

	.contact .btnArea {
		width: 91.94%;
		margin: 0 auto;
	}

	.contact .btnArea .btn .mailWhite::before {
		position: relative;
		width: 15px;
		height: 12px;
		margin-right: 13px;
	}

	.btnAll {
		width: 82.13%;
		margin: 0 auto 45px;
	}
}