/* CRAFT STYLE 固有 */
/*
* アニメーション部分の配置　組み立て方
* 1. 左右方向に重なっている画像をdiv.p-snaps__blockに入れ、クラス指定に.p-snaps__block--rowを追加
* 2. 重なっている画像がなければ1枚でdiv.p-snaps__blockに入れる。
* 3. .p-snaps__blockごとに.block-1, .block-2のようにユニークなクラスを追加する。
* 4. .p-snaps__snapごとに.snap-1-1, .snap-1-2のようにユニークなクラスを追加する。
*
* 5. 左右の端から近い方の距離を、.p-snaps__snapに対してmargin-leftまたはmargin-rightで指定する。
* ※ 1枚組の場合、右に寄せる場合はmargin-left: auto;も合わせて指定する。
* ※ 2枚組の場合は、.p-snaps__blockに対してjustify-contentも設定する。左に寄せるならflex-start, 右に寄せるならflex-end, 左右が等しければ指定不要。指定しない場合はmargin指定も不要。
* ※ Figmaでオブジェクトを選択し、Alt or Optionキーを押しながら他の要素にカーソルを持っていくとオブジェクト同士の間隔を計測できる。
* ※ 画面幅に応じて幅やマージンを可変にしないとはみ出してしまうため、比率で指定する。
* 　　calc((【figma上での実際のpx数】 / 980) * 100%)で指定すればOK。
* 　　980pxの要素とx方向の差分を見ることでずれる距離を確認可能。
* 5. 2枚組の場合は下がっている方の画像に対してmargin-topを設定する。
*
* 6. .p-snaps__blockに対して、次の.p-snaps__blockまでの間隔をmargin-bottomで指定する。
* 
* 7. フェードインする画像には、js-animationクラスとdata-animation-name属性を追加する。
*　　data-animation-nameは"animate__fadeIn"でフェードのみ、"animate__fadeInDown"で下方向にスライド、他全4方向＋フェードのみのパターンを設定可能。
*/

.block-1 {
	margin-bottom: calc((154 / 980) * 100% * -1);
	justify-content: flex-start;
}

.snap-1-1 {
	width: calc((408 / 980) * 100%);
	margin-left: calc((122 / 980) * 100%);
}

.snap-1-2 {
	width: calc((287 / 980) * 100%);
	margin-top: calc(( 240/ 980) * 100%);

}

.block-2 {
	margin-bottom: calc((120 / 980) * 100%);
	justify-content: flex-start;
}
.snap-2-1 {
	width: calc((323 / 980) * 100%);
	margin-left: calc((207 / 980) * 100%);
}


.block-3 {
	margin-bottom: calc((120 / 980) * 100% );
	justify-content: flex-start;
}
.snap-3-1 {
	width: calc((980 / 980) * 100%);
	margin-left:auto;
}



.block-4 {
	margin-bottom: calc((8 / 980) * 100%);
	justify-content: flex-end;
}
.snap-4-1 {
	width: calc((339 / 980) * 100%);


}
.snap-4-2 {
	width: calc((339 / 980) * 100%);
	margin-right: calc((98 / 980) * 100%);
	margin-top: calc(( 120/ 980) * 100%);
}


.block-5 {
	margin-bottom: calc((8 / 980) * 100%);
	justify-content: flex-end;
}
.snap-5-1 {
	width: calc((445 / 980) * 100%);
	margin-left: auto;
	margin-right: calc((211 / 980) * 100%);
}

.block-6 {
	margin-top: calc(( 8/ 980) * 100%);
	margin-bottom: calc((120 / 980) * 100%);
	justify-content: flex-end;
}
.snap-6-1 {
	width: calc((354 / 980) * 100%);
	
}
.snap-6-2 {
	width: calc((398 / 980) * 100%);
	margin-top: calc(( 120/ 980) * 100%);
	margin-right: calc((121 / 980) * 100%);
}




/* インテリア＆エクステリア */
.p-equipments,
.p-equipments__slider--block-heading {
	color: #FFFFFF;
	background-color: #A32224;
}


.p-equipments .swiper-controls--equipments {
	background-color: #A32224;
	color: #fff;
}
.p-equipments .swiper-controls--equipments .swiper-button-prev,
.p-equipments .swiper-controls--equipments .swiper-button-next,
.p-equipments .swiper-controls--equipments .swiper-pagination {
	background-color: #A32224;
	color: #fff;
}

/* ドットの色設定 */
.p-equipments .swiper-controls--equipments .swiper-pagination-bullet {
	background-color: #fff;
	opacity: 0.6;
}

.p-equipments .swiper-controls--equipments .swiper-pagination-bullet-active {
	background-color: #000;
	opacity: 1;
}