@charset "UTF-8";

/* 統合後追加css 展示場ページ */

.modelhousegallary-wrapper {
	position: relative;
	/* overflow: hidden; */
	padding-bottom: 30px;
}

.modelhousegallary-wrapper .swiper-pagination-bullet {
	background: #EEF0F2;
}

.modelhousegallary-wrapper .swiper-pagination-bullet {
	background: #EEF0F2;
}

.modelhousegallary-wrapper .swiper-pagination-bullet-active {
	background: #FF7400;
}

.swiper-button-next, .swiper-button-prev {
	margin-top: 0;
	transform: translateY(-50%);
	top: calc(50% - 32px);
}

.modelhousegallary-item {
}

.modelhousegallary-item-image {
	aspect-ratio: 4/3;
	background: #eee;
}

.modelhousegallary-item img {
	width: 100%;
	height: 100%;
	margin-bottom: 0;
	object-fit: contain;
}

.modelhousegallary-item-caption {
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: #333;
	padding: 20px;
	background: #eee;
}

.modelhouse-sns {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 5px;
	z-index: 50;
}

.modelhouse-sns-btn {
    display: inline-block;
    padding-right: 40px;
    padding: 5px 30px 5px 10px;
    border: 1px solid #333;
    line-height: 1.5;
    border-radius: 5px;
    background: url(../img/modelhouse/icon_share.svg) no-repeat right 4px center / 20px 20px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.modelhouse-sns-btn:hover {
	opacity: 0.7;
}

.modelhouse-sns-list {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	flex-direction: column;
	position: absolute;
	top: 100%;
	right: 0;
	background: white;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	list-style: none;
	margin: 5px 0 0 0;
	padding: 0;
	min-width: 200px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all 0.3s ease;
	z-index: 1000;
	display: none;
}

.modelhouse-sns.active .modelhouse-sns-list {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	display: block;
}

.modelhouse-sns-item {
	border-bottom: 1px solid #eee;
}

.modelhouse-sns-item:last-child {
	border-bottom: none;
}

.modelhouse-sns-item a {
	padding: 12px 16px;
	color: #333;
	text-decoration: none;
	transition: background 0.2s ease;
	font-size: 14px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.modelhouse-sns-item a:hover {
	background: #f8f9fa;
}

.modelhouse-sns-item i {
	width: 21px;
	height: 21px;
}

.modelhouse-sns-item-mail i {
	background: url(../img/modelhouse/icon_mail.svg) no-repeat center center / 100%;
}

.modelhouse-sns-item-line i {
	background: url(../img/modelhouse/icon_line.png) no-repeat center center / 20px;
}

.modelhouse-sns-item-facebook i {
	background: url(../img/modelhouse/icon_facebook.png) no-repeat center center / 20px;
}

.modelhouse-sns-item-x i {
	background: url(../img/modelhouse/icon_x.png) no-repeat center center / 15px;
}

.modelhouse-sns-item-copy i {
	background: url(../img/modelhouse/icon_copy.svg) no-repeat center center / 100%;
}

/* 各SNSのホバー色 */
/* .modelhouse-sns-item a[href*="mailto"]:hover {
	background: #f0f8ff;
	color: #0066cc;
}

.modelhouse-sns-item a[href*="facebook"]:hover {
	background: #e6f3ff;
	color: #1877f2;
}

.modelhouse-sns-item a[href*="twitter"]:hover {
	background: #f0f0f0;
	color: #000;
}

.modelhouse-sns-item a[href="#"]:hover {
	background: #f0f8ff;
	color: #0066cc;
} */
.copy-message {
	position: fixed;
	top: 20px;
	right: 20px;
	background: #FF7400;
	color: white;
	padding: 10px 20px;
	border-radius: 5px;
	z-index: 10000;
	opacity: 0;
	transform: translateY(-20px);
	transition: all 0.3s ease;
}

.copy-message.show {
	opacity: 1;
	transform: translateY(0);
}

.modelhouse-cta-btn-wrapper {
	text-align: center;
}

.modelhouse-cta-btn-top {
	position: relative;
}

.modelhouse-cta-btn {
    display: inline-block;
    position: relative;
    width: 100%;
    max-width: 330px;
    height: 60px;
    padding: 2px 10px 0;
    border: unset;
    border-radius: 40px;
    background: linear-gradient(90deg, #f89126 0%, #e6382a 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 60px;
    letter-spacing: 0.2em;
    text-align: center;
}

.modelhouse-cta-btn:hover {
    opacity: 0.7;
}

.modelhouse-cta-btn::before {
    position: absolute;
    display: block;
    top: 50%;
    right: 34px;
    width: 6px;
    height: 6px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg) translate(0, -50%);
    content: '';
}

.modelhouse-benefits-image {
	text-align: center;
}

.modelhouse-benefits-image img {
	width: 100%;
	max-width: 640px;
}

.inner640 {
	max-width: 640px;
	margin: 0 auto;
}


/* modal ---------------------------------------*/

.modal-btn {
	position: relative;
}

.modal-btn::after {
    display: block;   
	content: '';
	background: url('../img/modelhouse/icon_expansion.svg') no-repeat center center; 
	background-size: 100%;
	width: 24px;
	height: 24px;
	position: absolute;
	right: 5px;
	top: 5px;
}

.modal-wrapper{display: none;}

.modal{background: #fff;}

.modal-inner{
	width: 100%;
	background: #fff;
}

.modal-inner-close{
	position:absolute;
	right: 10px;
	top: 10px;
}

.modal-inner-close {
    top: 0;
    right: 0;
    background: url(../img/modelhouse/icon_modal_close.svg) no-repeat left top;
    background-size: 50px;
    width: 50px;
    height: 50px;
    z-index: 90;
}

#cboxContent {
    padding: 70px 0;
    background-color: transparent;
}

#cboxClose {
	display: none;
}


/* modelhouse-single-popup ---------------------------------------*/

.l-main-modelhouse {
	position: relative;
}

.modelhouse-single-popup {
	display: none;
	position: fixed;
	bottom: 120px;
	right: 50px;
	z-index: 1;
}

.modelhouse-single-popup.is-footer-visible {
    position: absolute !important;
    bottom: 46px;
    right: -122px;
}

.modelhouse-single-popup-link {
	display: block;
	transition: all .25s ease;
}

.modelhouse-single-popup-link:hover {
	opacity: 0.7;
}

.modelhouse-single-popup-image {
	width: 200px;
	height: 200px;
	transition: all .25s ease;
}

.modelhouse-single-popup-image.is-close {
	width: 0;
	height: 0;
}

.modelhouse-single-popup-image img {
	width: 100%;
	filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.2));
}

.modelhouse-single-popup-close {
	display: block;
	position: absolute;
	left: 170px;
	top: -10px;
	width: 45px;
	height: 45px;
	cursor: pointer;
	transition: all .25s ease;
	filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.2));
}

.modelhouse-single-popup-close.is-close {
	transform: rotate(45deg);
	left: -30px;
}

.modelhouse-single-popup-close:hover {
	opacity: 0.7;
}

.modelhouse-single-popup-close img {
	width: 100%;
}


/* small pc */
@media screen and (min-width: 769px) and (max-width: 1200px){

}


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

	.swiper-container .swiper-slide {
		max-width: unset !important;
		margin-left: 0;
	}

	.swiper-button-next, .swiper-button-prev {
		top: calc(50% - 41px)	;
	}

	.modelhousegallary-wrapper {
		margin-bottom: 70px;
	}

	.modelhousegallary-item-caption {
		font-size: 14px;
		padding: 20px;
	}

	.modelhouse-sns {
		position: static;
		top: unset;
		right: unset;
		transform: translateY(0);
		margin-top: 25px;
	}

	.modelhouse-sns-list {
		right: unset;
		left: 50%;
		transform: translateX(-50%);
	}

	.modelhouse-sns.active .modelhouse-sns-list {
		transform: translate(-50%, 10px);
	}

	.modelhouse-cta-btn {
		max-width: 340px;
	}


/* modelhouse-single-popup ---------------------------------------*/

	.modelhouse-single-popup {
		bottom: 60px;
		right: 10px;
	}

	.modelhouse-single-popup.is-footer-visible {
		bottom: 10px;
		right: 10px;
}
	
	.modelhouse-single-popup-image {
		width: 130px;
		height: 130px;
	}

	.modelhouse-single-popup-link:hover {
		opacity: 1;
	}

	.modelhouse-single-popup-close {
		left: 95px;
		top: -25px;
		width: 40px;
		height: 40px;
	}

	.modelhouse-single-popup-close.is-close {
		left: -50px;
		top: -50px;
	}

	.modelhouse-single-popup-close:hover {
		opacity: 1;
	}

}