/*===============================================================================
***MV
================================================================================*/
.f-mv__inner{
	position: relative;
}

/*===============================
* 背景画像
* =================================*/
.f-mv__bgi{
	position: relative;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: -1;
	display: block;
	max-width: 100vw;
	width: 100vw;
	aspect-ratio: 390 / 560;
}
@media (min-width: 600px){
	.f-mv__bgi{
		aspect-ratio: 1;
	}
}
@media (min-width: 960px){
	.f-mv__bgi{
		aspect-ratio: 1440 / 682;
	}
}
.f-mv__bgi img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.f-mv__bgi::before{
	content: "";
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: 1;
	width: 100vw;
	height: 100%;
	background: linear-gradient(0deg, rgba(36, 38, 36, 0.3), rgba(36, 38, 36, 0.3));
}

/*===============================
* コンテナ
* =================================*/
.f-mv__container{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

/*===============================
* ヘッド
* =================================*/
.f-mv__head{
	margin-top: -6rem;
	text-align: center;
}
@media (min-width: 960px){
	.f-mv__head{
		margin-top: 0;
	}
}
.f-mv__catch{
	position: relative;
	max-width: fit-content;
	margin-inline: auto;
	padding: .25em 1em;
	font-family: var(--ff-gs);
	color: var(--c-light);
	text-shadow: var(--shdw--sm) var(--c-main--darkest);
}
.f-mv__catch::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(253, 244, 222, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
	backdrop-filter: blur(2px);
}
.f-mv__title{
	margin-bottom: 1rem;
	font-family: var(--ff-gz);
	font-weight: var(--fw-xl);
	font-size: clamp(2.5rem, 1.786rem + 1.9vw, 3.5rem);
	color: var(--c-light);
	text-shadow: var(--shdw) var(--c-main--darkest);
}
.f-mv__text{
	font-family: var(--ff-gz);
	font-weight: var(--fw-xl);
	font-size: clamp(1rem, 0.643rem + 0.95vw, 1.5rem);
	color: var(--c-light);
	text-shadow: var(--shdw) var(--c-main--darkest);
}


/*===============================
* フローティング
* =================================*/
.f-mv-float{
	--c-bgc: rgba(214, 194, 174, 0.8);
	position: absolute;
	bottom: 26%;
	right: 0;
	transform: translateY(50%);
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 8em;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--c-bgc);
	font-size: clamp(1rem, 0.821rem + 0.48vw, 1.25rem);
	font-family: var(--ff-gz);
	font-weight: var(--fw-lg);
	color: var(--c-light);
	transition: var(--ani-t--normal) ease-out;
}
@media (min-width: 960px){
	.f-mv-float{
		bottom: 15%;
		transform: translateY(0);
	}
}
@media (min-width: 1150px){
	.f-mv-float{ bottom: 5%; }
}
.f-mv-float:is(:hover, :focus){
	--c-bgc: var(--c-main);
}
.f-mv-float::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
	width: calc( 100% + .5em );
	height: calc( 100% + .5em );
	border: 2px solid var(--c-bgc);
	border-radius: 50%;
	transition: var(--ani-t--normal) ease-out;
}
.f-mv-float:is(:hover, :focus)::before{
	width: 100%;
	height: 100%;
}
.f-mv-float svg{
	width: 1.5em;
}

/*===============================
* ボディ
* =================================*/
.f-mv__body{
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translate(-50%, 50%);
	display: flex;
	flex-direction: column;
	gap: 0 1.25rem;
	width: 100%;
	max-width: 783px;
	margin-inline: auto;
	padding: clamp(1rem, 0.643rem + 0.95vw, 1.5rem);
	background: var(--c-light);
	background-image: var(--bgi);	
	border-radius: var(--bd-r--sm);
	overflow: hidden;
	box-shadow: 0px 0px 8px rgba(40, 35, 30, 0.2);
}
@media (min-width: 960px){
	.f-mv__body{
		transform: translateX(-50%);
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-radius: 99999px;
	}
}
.f-mv__post{
	flex-grow: 1;
}
.f-mv__btn{
	align-self: center;
	font-family: var(--ff-gz);
}



/*===============================================================================
***村上建築にお任せ下さい
================================================================================*/
.f-omakase{
	margin-bottom: var(--g-sec--lg);
}
.f-omakase__inner{
	position: relative;
	padding-top: calc( var(--g-sec--lg) + var(--g-sec--sm) );
}
@media (min-width: 960px){
	.f-omakase__inner{
		padding-top: var(--g-sec--lg);
		padding-bottom: var(--g-sec--lg);
	}
}
.f-omakase__inner::before{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
	content: "";
	width: 100vw;
	height: 100%;
	background-image: var(--bgi);
	background-attachment: fixed;
}
.f-omakase__flex{
	--count: 1;
	--gap: var(--g-sec--xs);
	--media-width: 87%;
	--body-width: calc( 200% - var(--media-width) );
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--g-sec--md) var(--gap);
}
@media (min-width: 768px){
	.f-omakase__flex{
		--count: 2;
		flex-direction: row-reverse;
	}
}
/* 画像 */
.f-omakase__image{
	flex-grow: 1;
	width: calc( ( var(--media-width) - var(--gap) * (var(--count) - 1) ) / var(--count) );
	border-radius: var(--bd-r--sm);
	overflow: hidden;
}
.f-omakase__image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
@media (min-width: 768px){
	.f-omakase__image{
		max-width: 30rem;
		aspect-ratio: 480 / 569;
	}
}
/* テキストエリア */
.f-omakase__body{
	flex-grow: 1;
	width: calc( ( var(--body-width) - var(--gap) * (var(--count) - 1) ) / var(--count) );
}
@media (min-width: 768px){
	.f-omakase__body{
		max-width: 40rem;
	}
}
.f-omakase__title{
	margin-bottom: var(--g-sec--sm);
}
.f-omakase__textArea{
	margin-bottom: var(--g-sec--sm);
	font-family: var(--ff-gs);
}
.f-omakase__btn{
	text-align: center;
}
@media (min-width: 768px){
	.f-omakase__btn{
		text-align: left;
	}
}
.f-omakase__deco{
	position: absolute;
	bottom: 0;
	right: calc( 50% - 44vw );
	z-index: -1;
	width: 25%;
}



/*===============================================================================
***このようなお悩みはございませんか？
================================================================================*/
.f-trouble__nayami{
	margin-bottom: var(--g-sec--lg);
}
.f-trouble__head{
	margin-bottom: var(--g-sec--sm);
}

/*===============================
* メディアテキスト
* =================================*/
.f-trouble-mediaText{
	--count: 1;
	--gap: 1rem;
	--media-width: 70%;
	--body-width: calc( 200% - var(--media-width) );
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--gap);
}
@media (min-width: 960px){
	.f-trouble-mediaText{
		--count: 2;
	}
}
/* 画像 */
.f-trouble-mediaText__media{
	flex-grow: 1;
	width: calc( ( var(--media-width) - var(--gap) * (var(--count) - 1) ) / var(--count) );
	max-width: 30rem;
	margin-inline: auto;
}
/* テキストエリア */
.f-trouble-mediaText__body{
	flex-grow: 1;
	width: calc( ( var(--body-width) - var(--gap) * (var(--count) - 1) ) / var(--count) );
}
@media (min-width: 960px){
	/* 画像 */
	.f-trouble-mediaText__media{
		max-width: 416px;
	}
	/* テキストエリア */
	.f-trouble-mediaText__body{
		max-width: 744px;
	}
}

/*===============================
* 吹き出し
* =================================*/
/* 吹き出しの三角がはみ出た分の余白を取る要素 */
.f-trouble-mediaText__balloon{
	--triangle-w: 4rem;
	--triangle-h: 1.5rem;
	--triangle-c: var(--c-main);
	--bd-w: 3px;
	padding-bottom: var(--triangle-h);
}
@media (min-width: 960px){
	.f-trouble-mediaText__balloon{
		--triangle-w: 2.5rem;
		--triangle-h: 5rem;
		padding-right: var(--triangle-w);
	}
}
.f-trouble-mediaText__lists{
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: 1.25rem;
	flex-wrap: wrap;
	padding: var(--g-sec--sm);
	background-image: var(--bgi);
	border-radius: var(--bd-r--xl);
}
@media (min-width: 600px){
	.f-trouble-mediaText__lists{
		flex-wrap: nowrap;
	}
}
/* 吹き出し：三角形 */
.f-trouble-mediaText__lists::after {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	content: '';
	display: block;
	width: var(--triangle-w);
	height: var(--triangle-h);
	background-image: var(--bgi);
	clip-path: polygon(0 0, 50% 100%, 100% 0);
}
@media (min-width: 960px){
	.f-trouble-mediaText__lists::after {
		top: 50%;
		left: 100%;
		transform: translateY(-50%);
		clip-path: polygon(0 0, 0% 100%, 100% 50%);
	}
}
/* リスト */
.f-trouble-mediaText__lists ul{
	max-width: fit-content;
}
.f-trouble-mediaText__lists li:not(:last-of-type){
	margin-bottom: 1.25rem;
}
.f-trouble-mediaText__lists li{
	display: flex;
	align-items: center;
	gap: .5rem;
	font-weight: var(--fw-lg);
	font-family: var(--ff-gz);
}
.f-trouble-mediaText__lists img{
	width: .75rem;
}

/*===============================
* カバー
* =================================*/
.f-trouble-cover__inner{
	position: relative;
	padding: var(--g-sec--xl) 0;
}
.f-trouble-cover__bgi{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: -1;
	max-width: 100vw;
	width: 100vw;
	height: 100%;
}
.f-trouble-cover__bgi img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
.f-trouble-cover__bgi::before{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	content: "";
	width: 100%;
	height: 100%;
	background: rgba(192, 151, 110, 0.5);
}
.f-trouble-cover__content{
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.f-trouble-cover__title{
	text-align: center;
	text-shadow: var(--shdw) var(--c-main--dark);
	font-size: clamp(1.75rem, 0.5rem + 3.33vw, 3.5rem);
	font-weight: var(--fw-lg);
	color: var(--c-light);
}
.f-trouble-cover__title strong{
	font-size: 1.3em;
}



/*===============================================================================
***村上建築ができること
================================================================================*/
.f-service__inner{
	position: relative;
	padding: var(--g-sec--lg) 0;
}
/* 背景画像 */
.f-service__inner::before{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
	content: "";
	width: 100vw;
	height: 100%;
	background-image: var(--bgi);
	background-attachment: fixed;
}
/* デコレーション画像 */
.f-service__deco{
	position: absolute;
	z-index: -1;
}
.f-service__deco.--top{
	top: clamp(1.75rem, -1.286rem + 8.1vw, 6rem);
	left: calc(50% - 45vw);
	width: 23%;
}
.f-service__deco.--bottom{
	bottom: 0;
	right: calc( 50% - 46vw );
	width: 15%;
}

/*===============================
* ヘッド
* =================================*/
.f-service__head{
	margin-bottom: var(--g-sec--sm);
}
.f-trouble__title{
	margin-bottom: 1.5rem;
}
.f-trouble__message{
	text-align: center;
	font-family: var(--ff-gs);
}

/*===============================
* ボディ
* =================================*/
.f-service-cards .c-card__text{
	font-family: var(--ff-gs);
}


/*===============================================================================
***今治市で村上建設が選ばれる理由
================================================================================*/
.f-reason__inner{
	position: relative;
	padding: var(--g-sec--lg) 0;
}
/* 背景画像 */
.f-reason__bgi{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: -1;
	max-width: 100vw;
	width: 100vw;
	height: 100%;
}
.f-reason__bgi img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
.f-reason__head{
	margin-bottom: var(--g-sec--sm);
}
.f-trouble__title.front__title.c-mainText.--lg{
}

/*===============================
* ボディ
* =================================*/
.f-reason__body{
	margin-bottom: var(--g-sec--sm);
}
/*===============================
* カード
* =================================*/
.f-reason-cards{
	--count: 2;
	--gap: .75rem;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--gap);
}
@media (min-width: 1100px){
	.f-reason-cards{
		--count: 4;
	}
}

.f-reason-card{
	position: relative;
	max-width: 21rem;
	width: calc( ( 100% - var(--gap) * (var(--count) - 1) ) / var(--count) );
	padding: 1.5rem .75rem;
	background: var(--c-light);
	border-radius: var(--bd-r--sm);
	overflow: hidden;
}

/* 数字 */
.f-reason-card__tag {
	position: absolute;
	top: 0;
	left: .75rem;
	font-size: 2.5rem;
	font-weight: var(--fw-lg);
	font-family: var(--ff-gz);
	color: var(--c-act01);
	z-index: 1;
}
.f-reason-card__img{
	width: 6rem;
	margin-inline: auto;
	margin-bottom: 1rem;
}
.f-reason-card__text{
	max-width: 13em;
	margin-inline: auto;
	text-align: center;
	font-weight: var(--fw-lg);
	font-family: var(--ff-gz);
}

/*===============================
* フット
* =================================*/
.f-reason__foot{
	text-align: center;
}


/*===============================================================================
***代表挨拶
================================================================================*/
.f-aisatu__inner{
	position: relative;
	padding: var(--g-sec--lg) 0;
}
.f-aisatu__bgi{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: -1;
	max-width: 100vw;
	width: 100vw;
	height: 100%;
}
.f-aisatu__bgi img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/*===============================
* ヘッド
* =================================*/
.f-aisatu__head{
	margin-bottom: var(--g-sec--sm);
}
/*===============================
* ボディ
* =================================*/
.f-aisatu__body{
	margin-bottom: var(--g-sec--sm);
}
/*===============================
* メディアテキスト
* =================================*/
.f-aisatu-mediaText{
	--count: 1;
	--gap: 2rem;
	--media-width: 83%;
	--body-width: calc( 200% - var(--media-width) );
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--gap);
}
@media (min-width: 960px){
	.f-aisatu-mediaText{
		--count: 2;
	}
}
/* 画像 */
.f-aisatu-mediaText__media{
	width: calc( ( var(--media-width) - var(--gap) * (var(--count) - 1) ) / var(--count) );
	margin-inline: auto;
	text-align: center;
	border-radius: var(--bd-r--sm);
	overflow: hidden;
}
/* テキストエリア */
.f-aisatu-mediaText__body{
	flex-grow: 1;
	width: calc( ( var(--body-width) - var(--gap) * (var(--count) - 1) ) / var(--count) );
	font-family: var(--ff-gz);
}
@media (min-width: 960px){
	.f-aisatu-mediaText__body{
		max-height: 36rem;
		writing-mode: vertical-rl;
		text-orientation: upright;
		line-height: var(--lh-lg);
	}
}
.f-mediaText__title{
	margin-bottom: var(--g-sec--md);
}
@media (min-width: 960px){
	.f-mediaText__title{
		margin-left: var(--g-sec--md);
		margin-bottom: 0;
	}
}
.f-aisatu-mediaText__box:not(:last-child){
	margin-bottom: var(--g-sec--sm);
}
@media (min-width: 960px){
	.f-aisatu-mediaText__box:not(:last-child){
		margin-left: var(--g-sec--sm);
		margin-bottom: 0;
	}
}
.f-aisatu-mediaText__name{
	text-align: right;
}
/*===============================
* フット
* =================================*/
.f-aisatu__foot{
	margin-bottom: var(--g-sec--lg);
	text-align: center;
}



/*===============================================================================
***施工実績
================================================================================*/
.f-works{
	margin-bottom: var(--g-sec--lg);
}
.f-works__inner{
	position: relative;
	padding: var(--g-sec--lg) 0;
}
/* 背景画像 */
.f-works__inner::before{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
	content: "";
	width: 100vw;
	height: 100%;
	background-image: var(--bgi);
	background-attachment: fixed;
}
/* デコレーション画像 */
.f-works__deco{
	position: absolute;
	z-index: -1;
}
.f-works__deco.--top{
	top: clamp(2rem, 0.571rem + 3.81vw, 4rem);
	right: calc(50% - 49vw);
	width: 17%;
	min-width: 5.75rem;
}
.f-works__deco.--bottom{
	bottom: 0;
	left: calc( 50% - 46vw );
	width: 12%;
	min-width: 4rem;
}

/*===============================
* ヘッド
* =================================*/
.f-works__head{
	margin-bottom: var(--g-sec--sm);
}
.f-trouble__title{
	margin-bottom: 1.5rem;
}
.f-trouble__message{
	text-align: center;
	font-family: var(--ff-gs);
}

/*===============================
* ボディ
* =================================*/
.f-works__body{
	margin-bottom: var(--g-sec--sm);
}

/*===============================
* フット
* =================================*/
.f-works__foot{
	text-align: center;
}



/*===============================================================================
***よくある質問
================================================================================*/
/*===============================
* ヘッド
* =================================*/
.f-faq__head{
	margin-bottom: var(--g-sec--sm);
}

/*===============================
* ボディ
* =================================*/
.f-faq__body{
	margin-bottom: var(--g-sec--sm);
}
.f-faq__body .p-faq:not(:last-of-type) {
	margin-bottom: 1.5rem;
}

/*===============================
* フット
* =================================*/
.f-faq__foot{
	text-align: center;
}