@charset "utf-8";

/*
 * 特殊レイアウト
 * --------------------------------------------------
 */

* {
	min-height: 0 !important;
	min-width: 0 !important;
	box-sizing: border-box;
}

/* タブレット */
body {
	min-width: 1000px;
}

/* スマホ */
@media screen and (max-width: 767px) {
	body {
		min-width: initial;
		max-width: 100%;
	}
}

.HOME-container.gap-15 {
	gap: 15px;
}

.HOME-container.gap-15 .col-20 {
	width: calc((100% - 60px) / 5);
}

.HOME-container.gap-15 .col-25 {
	width: calc((100% - 45px) / 4);
}

.HOME-container.gap-30 {
	gap: 30px;
}

.HOME-container.gap-30 .col-50 {
	width: calc((100% - 30px) / 2);
}

.HOME-container.gap-30 .col-33 {
	width: calc((100% - 60px) / 3);
}

@media (max-width:767px) {
	.HOME-container.gap-30 {
		gap: 15px;
	}

	.HOME-container.gap-15 .col-m-50 {
		width: calc((100% - 15px) / 2) !important;
	}
}

/*
 * トップページ共通パーツ
 * --------------------------------------------------
 */

h2.index-title {
	display: inline-block;
	width: 100%;
	height: auto;
	font-size: clamp(24px, 3cqi, 28px);
	font-weight: 500;
	letter-spacing: 5px;
	line-height: 1;
	text-align: center;
	position: relative;
	font-family: "Noto Serif JP", serif;
}

h2.index-title::after {
	background: #333;
	content: "";
	display: block;
	height: 1px;
	margin: 20px auto 0px auto;
	width: 40px;
}

.index-title_renovation {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	right: 0px;
	top: 0px;
	background: rgba(233, 218, 206, 1);
	color: rgba(46, 25, 7, 1);
	width: auto;
	font-size: 1.4cqi;
	letter-spacing: 0px;
	height: auto;
	padding: 1cqi;
	border: 1px solid rgba(255, 255, 255, 1);
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
}

.index-title_renovation:hover {
	filter: brightness(1.05);
}

.index-title_renovation img {
	width: 14px;
	height: 14px;
	margin-left: 7px;
}

@media only screen and (max-width:767px) {
	.index-title {
		margin-top: 30px;
	}

	.index-title_renovation {
		font-size: clamp(10px, 3cqi, 12px);
		white-space: nowrap;
		width: auto;
		height: auto;
		right: 0px;
		top: -45px;
		padding: 5px 10px;
	}

	.index-title_renovation img {
		width: 10px;
		height: 10px;
		margin-left: 5px;
	}
}

/*
 * メインビデオ
 * --------------------------------------------------
 */
.video-wrapper {
	position: relative;
	width: 100vw;
	/* heightが２つあるのは間違いではないので消さないように */
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

.video-catch {
	width: 35cqi;
	height: auto;
	aspect-ratio: 32/5;
	position: absolute;
	/* filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.25)); */
}

#video-main {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	filter: grayscale(0.2);
}

#video-progress {
	position: absolute;
	bottom: 40px;
	width: 20%;
	height: 1px;
	appearance: none;
	background-color: rgba(0, 0, 0, 0.2);
}

#video-progress::-webkit-progress-bar {
	background-color: rgba(0, 0, 0, 0.2);
}

#video-progress::-webkit-progress-value {
	background-color: rgba(255, 255, 255, 0.8);
}

#video-progress::-moz-progress-bar {
	background-color: rgba(255, 255, 255, 0.8);
}

/*
.scroll {
	display: inline-block;
	width: 10px;
	height: 80px;
	font-size: 10px;
	letter-spacing: 0px;
	line-height: 1;
	color: #ffffff;
	overflow: hidden;
	padding: 10px 0px 10px 20px;
	position: absolute;
	left: 30px;
	bottom: 0px;
	text-decoration: none;
	z-index: 2;
	writing-mode: vertical-rl;
	text-orientation: upright;
}

.scroll::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 80px;
	background: #ffffff;
	position: absolute;
	left: 0px;
	bottom: 0px;
	animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
	z-index: 2;
}
*/

@media (max-width:767px) {
	.video-catch {
		width: 70cqi;
	}

	#video-progress {
		position: absolute;
		right: 30px;
		bottom: 30px;
		width: 35%;
		height: 1px;
		appearance: none;
		background-color: rgba(0, 0, 0, 0.2);
	}
}

/*
 * トップページ
 * --------------------------------------------------
 */

.index-info {
	display: inline-block;
	width: 100%;
	font-size: clamp(10px, 1.4cqi, 12px);
	line-height: 2;
	padding: 15px 0px;
	color: #1a1a1a;
	background: #fafafa;
	border: 1px solid #ffffff;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
	word-break: keep-all;
	text-align: center;
}

.index-info span {
	border-bottom: 1px solid #1a1a1a;
}

.firstview_wrap {
	background: #efefef;
	padding: 60px 0px;
}

.newCampaign__swiper img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 2/1;
}

/*　検索エンジン用トプページタイトル */
.firstview-title {
	display: none;
	font-size: 0px;
}

.firstview-catch {
	display: inline-block;
	width: 100%;
	text-align: left;
	font-size: 3.3cqi;
	line-height: 1;
	font-weight: 400;
	padding-bottom: 3.3cqi;
	padding-left: 30px;
	white-space: nowrap;
}

.firstview-catch span {
	font-size: 2.8cqi;
	white-space: nowrap;
	line-height: 1;
	margin-top: 1.4cqi;
	display: inline-block;
}

.firstview-lead {
	display: inline-block;
	width: 100%;
	text-align: left;
	font-size: 1.3cqi;
	line-height: 2.5;
	padding-left: 30px;
}

@media (max-width:767px) {
	.index-info {
		font-size: clamp(10px, 2cqi, 12px);
		padding: 10px 0px;
		letter-spacing: -0.5px;
	}

	.firstview_wrap {
		padding: 15px 0px;
	}

	.firstview-catch {
		padding-top: 15px;
		padding-left: 0px;
		text-align: center;
		font-size: 6cqi;
	}

	.firstview-catch span {
		font-size: 5cqi;
	}

	.firstview-lead {
		text-align: center;
		font-size: clamp(12px, 3.75cqi, 14px);
		padding: 15px 0px;
	}
}

/*
 * イベント
 * --------------------------------------------------
 */
.index-event_tab button {
	display: flex;
	width: 100%;
	height: auto;
	background: #f7f6f5;
	color: #232323;
	justify-content: center;
	align-items: center;
	font-size: 1.5cqi;
	letter-spacing: 1px;
	line-height: 1;
	padding: 1.5cqi;
	appearance: none;
	border: none;
	border-radius: 5px;
	font-family: "Noto Serif JP", serif;
	cursor: pointer;
}

.index-event_tab .active button {
	background: #900002;
	color: #ffffff;
}


.index-event_content {
	width: 100%;
	height: auto;
	display: flex;
	flex-wrap: wrap;
	padding: 10px;
	background: #f6f6f6;
}

.index-event_image {
	display: inline-block;
	width: 100%;
	height: auto;
	aspect-ratio: 3/2;
	position: relative;
}

.index-event_image img {
	width: 100%;
	height: 100%;
}

.index-event_place {
	position: absolute;
	left: 0px;
	top: 0px;
	font-size: 1.2cqi;
	padding: 0.8cqi;
	background-color: #323232;
	color: #ffffff;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	display: inline-block;
	width: auto;
	height: auto;
	align-items: center;
}

.index-event_image .end {
	position: absolute;
	left: 0px;
	top: 0px;
	font-size: 1.2cqi;
	padding: 10px;
	background: rgba(0, 0, 0, 0.5);
	color: #ffffff;
	overflow: hidden;
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
}

.index-event_detail {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: auto;
	padding: 0px;
}

.index-event_date {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: auto;
	padding: 10px 0px;
	align-items: center;
	position: relative;
	border-bottom: 1px solid #1a1a1a;
}

.index-event_date .date {
	display: inline-block;
	width: auto;
	height: auto;
	font-size: 1.3cqi;
	line-height: 1;
	font-weight: 600;
	color: #900002;
}

.index-event_date .limit {
	display: inline-block;
	width: auto;
	height: auto;
	font-size: 0.8cqi;
	padding: 0.5cqi;
	line-height: 1;
	color: #1a1a1a;
	border: 1px solid #1a1a1a;
	position: absolute;
	right: 0px;
	background: transparent;
}

.index-event_title {
	display: inline-block;
	width: 100%;
	height: auto;
	font-size: 1.8cqi;
	font-weight: 600;
	padding: 1cqi 0px;
	line-height: 1;
	color: #1a1a1a;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.index-event_caption {
	display: inline-block;
	width: 100%;
	height: 7.4cqi;
	font-size: 1.2cqi;
	font-weight: 500;
	padding: 0px 0px 1cqi 0px;
	line-height: 1.5;
	color: #1a1a1a;
	text-overflow: ellipsis;
	overflow: hidden;
}

.index-event_more {
	display: flex;
	border: solid 1px #1a1a1a;
	border-radius: 5px;
	color: #1a1a1a;
	font-size: 1.5cqi;
	letter-spacing: 0.2cqi;
	padding: 20px 0px;
	justify-content: center;
	align-items: center;
	width: 75%;
	height: auto;
	margin: 0px auto;
}

@media (max-width:767px) {

	.index-event_tab button {
		font-size: 3.5cqi;
		padding: 4cqi 0px;
	}

	.index-event_content {
		padding: 0px;
		background: none;
	}

	.index-event_image {
		width: 35%;
		height: calc((35cqi / 3 * 2) + 8cqi);
	}

	.index-event_image img {
		width: 100%;
		height: auto;
		aspect-ratio: 3/2;
		position: absolute;
		bottom: 0px;
	}

	.index-event_place {
		font-size: 3cqi;
		padding: 2.5cqi 1cqi;
		width: 100%;
		height: auto;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: center;
	}

	.index-event_detail {
		width: calc(65% - 3cqi);
		margin-left: 3cqi;
	}

	.index-event_date {
		padding: 1.5cqi 0px;
	}

	.index-event_date .date {
		font-size: 4cqi;
	}

	.index-event_date .limit {
		font-size: 2.5cqi;
		padding: 1.5cqi;
		border: none;
		background: #efefef;
	}

	.index-event_title {
		font-size: 4.5cqi;
		padding: 3cqi 0px;
	}

	.index-event_caption {
		font-size: 3cqi;
		padding: 0px 0px 1.5cqi 0px;
		height: 15cqi;
	}

	.index-event_hr {
		border-bottom: 1px solid #cccccc;
		height: 1px;
		font-size: 0px;
	}

	.index-event_more {
		font-size: 3cqi;
		width: 50%;
	}
}

/*
 * モデルハウス
 * --------------------------------------------------
 */

.index-model_tab button {
	display: flex;
	width: 100%;
	height: auto;
	background: #f7f6f5;
	color: #232323;
	justify-content: center;
	align-items: center;
	font-size: 1.5cqi;
	letter-spacing: 1px;
	line-height: 1;
	padding: 1.5cqi;
	appearance: none;
	border: none;
	border-radius: 5px;
	font-family: "Noto Serif JP", serif;
	cursor: pointer;
}

.index-model_tab .active button {
	background: #900002;
	color: #ffffff;
}

.index-model_image {
	display: inline-block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	position: relative;
}

.index-model_image img {
	width: 100%;
	height: 100%;
}

.index-model_caption {
	display: flex;
	background: #323232;
	color: #ffffff;
	width: 100%;
	height: 5.8cqi;
	font-size: 1.3cqi;
	line-height: 1.4;
	font-weight: 500;
	padding: 1cqi;
	justify-content: center;
	align-items: center;
	word-break: auto-phrase;
	text-align: center;
}

.index-model_title {
	display: flex;
	width: 100%;
	height: 5cqi;
	justify-content: center;
	align-items: center;
	word-break: auto-phrase;
}

.index-model_title h3 {
	display: inline-block;
	width: 100%;
	height: auto;
	font-size: 1.4cqi;
	font-weight: 400;
	line-height: 1.4;
	color: #1a1a1a;
	margin: 0px;
	padding: 0px;
	text-align: center;
}

.index-model_address {
	display: flex;
	color: #1a1a1a;
	width: 100%;
	height: 1.6cqi;
	font-size: 1.2cqi;
	line-height: 1.4;
	font-weight: 400;
	padding: 0px;
	justify-content: center;
	align-items: center;
	word-break: auto-phrase;
}

.index-model_more {
	display: flex;
	width: 100%;
	height: 7.5cqi;
	justify-content: center;
	align-items: center;
}

.index-model_more p {
	border: #1a1a1a solid 1px;
	color: #1a1a1a;
	font-size: 1.2cqi;
	letter-spacing: 2px;
	padding: 1.5cqi 0px;
	width: 50%;
	text-align: center;
}

.index-model_more p:hover {
	border: #1a1a1a solid 1px;
	background: #1a1a1a;
	color: #ffffff;
	font-size: 1.2cqi;
	letter-spacing: 2px;
	padding: 1.5cqi 0px;
	width: 50%;
}

@media (max-width:767px) {

	.index-model_tab button {
		font-size: 3.5cqi;
		padding: 4cqi 0px;
		height: 14cqi;
		word-break: auto-phrase;
	}

	.index-model_caption {
		height: 11.5cqi;
		font-size: 2.8cqi;
	}

	.index-model_title {
		height: 10cqi
	}

	.index-model_title h3 {
		font-size: 3cqi;
	}

	.index-model_address {
		height: calc(3.5cqi + 15px);
		font-size: 2.5cqi;
		padding-bottom: 15px;
	}

	.index-model_more {
		display: none;
	}

}

/*
 * 施工事例
 * --------------------------------------------------
 */
.works__swiper img {
	width: 100%;
	height: auto;
	aspect-ratio: 1/1;
}

.works__swiper .swiper-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.works__swiper .swiper-slide {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	width: calc((100% - 45px) / 4) !important;
	background: #ffffff;
}

.works__swiper .swiper-slide h3 {
	display: inline-block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: auto;
	max-width: calc(100% - 30px);
	height: auto;
	background: rgba(50, 50, 50, 0.75);
	color: #ffffff;
	font-size: 1.2cqi;
	padding: 1.2cqi;
}

.works__swiper .swiper-slide p {
	display: flex;
	font-size: 1.2cqi;
	line-height: 1.5;
	height: calc(3.6cqi + 30px);
	align-items: center;
	padding: 0px 15px;
}

.index-works_more {
	display: flex;
	border: solid 1px #1a1a1a;
	border-radius: 5px;
	color: #1a1a1a;
	font-size: 1.5cqi;
	letter-spacing: 0.2cqi;
	padding: 20px 0px;
	justify-content: center;
	align-items: center;
	width: 75%;
	height: auto;
	margin: 0px auto;
}

@media (max-width:767px) {

	.works__swiper .swiper-wrapper {
		flex-wrap: nowrap;
		gap: 0px;
		padding: 15px 0px;
	}

	.works__swiper .swiper-slide {
		opacity: 0;
		transition: all 0.3s ease;
		width: 100% !important;
		padding: 15px;
	}

	.works__swiper .swiper-slide h3 {
		top: 15px;
		left: 15px;
		font-size: 3.5cqi;
		padding: 3.5cqi;
	}

	.works__swiper .swiper-slide p {
		height: 17.5cqi;
		font-size: 3.5cqi;
		padding: 3.5cqi;
		line-height: 1.5;
		padding: 0px;
	}

	.works__swiper .swiper-slide.swiper-slide-active {
		opacity: 1;
	}

	.index-works_more {
		font-size: 3cqi;
		width: 50%;
	}

}

/*
 * 下部リンク・インスタグラム
 * --------------------------------------------------
 */
.banner_box img {
	width: 100%;
	height: auto;
}

.index-instagram p.tit {
	aspect-ratio: 15/2;
	display: inline-block;
	width: 100%;
	height: auto;
	padding: 10px 0px 0px 10px;
}

.index-instagram p.tit a {
	width: 100%;
	height: 100%;
}

.index-instagram p.tit a img {
	width: auto !important;
	height: 100% !important;
}

ul#insta-widget {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	align-items: center;
	gap: 1px;
}

#insta-widget li {
	display: inline-block;
	width: calc((100% - 2px) / 3);
	height: auto;
	aspect-ratio: 1/1;
}

#insta-widget li img {
	height: auto;
	object-fit: cover;
	width: 100%;
	aspect-ratio: 1/1;
	object-position: center center;
}