@charset "UTF-8";
/* CSS Document */


/*business-list（事業内容紹介ボタン（背景写真））
---------------------------------------------------------------------------*/
.business-list > a {
    text-decoration: none;
    display: block;
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:800px) {
	
	/*２つのボックスを囲むボックス*/
	.business-list{
		display: flex;	/*横並びにする*/
	}

	}/*追加指定ここまで*/

/* ▼ PC（1024px以上）：3列に変更 */
@media screen and (min-width: 1024px) {
    .business-list > * {
        flex: 1 1 calc(33.333% - 1rem); /* 3列用 */
        margin: 0.5rem; /* 少し余白。不要なら削除してOK */
    }
}


/*ボックス１個あたり*/
.business-list .list {
	text-align: center;
	position: relative;
	overflow-y: hidden;
	color: #fff;		/*文字色*/
	text-shadow: 0px 0px 8px rgba(0,0,0,0.8);	/*テキストの影。右へ、下へ、ぼかす量、0,0,0は黒のことで0.6は色が出た状態。*/
	padding: 2rem 2rem;	/*上下、左右へのボックス内の余白*/
	margin: 1rem 0;		/*上下、左右へのマージン*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
	
	.business-list > * {
		flex: 1;
	}
	.business-list .list {
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.business-list > a .list {
		height: 100%;
	}

	}/*追加指定ここまで*/


/*事業案内ボタン　
　左側ボックスの背景*/
.slidecm .business-list .list.image1 {
	background: url("../images/common/inf-banner/1.jpg") no-repeat center center / cover;
}
/*右側ボックスの背景*/
.slidecm .business-list .list.image2 {
	background: url("../images/common/inf-banner/2.jpg") no-repeat center center / cover;
}
/*左側ボックスの背景*/
.slidecm .business-list .list.image3 {
	background: url("../images/common/inf-banner/3.jpg") no-repeat center center / cover;
}
/*右側ボックスの背景*/
.slidecm .business-list .list.image4 {
	background: url("../images/common/inf-banner/4.jpg") no-repeat center center / cover;
}
/*左側ボックスの背景*/
.slidecm .business-list .list.image5 {
	background: url("../images/common/inf-banner/5.jpg") no-repeat center center / cover;
}
/*右側ボックスの背景*/
.slidecm .business-list .list.image6 {
	background: url("../images/common/inf-banner/6.jpg") no-repeat center center / cover;
}

/*h4見出し*/
.business-list h4 {
	font-weight: 200;	/*細字にする*/
	line-height: 1.2;	/*行間を狭く*/
}

/*h4見出し内のメインテキスト（main-text）1*/
.business-list h4 .main-text {
	display: block;
	font-size: 3rem;		/*文字サイズ。3倍。*/
	padding-top: 1.5rem;	/*上に空ける余白*/
	padding-bottom: 1.5rem;	/*下に空ける余白*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	.business-list h4 .main-text {
		font-size: 4rem;	/*文字サイズ。4倍。*/
	}

	}/*追加指定ここまで*/


/*h4見出し内のサブテキスト（sub-text）*/
.business-list h4 .sub-text {
	position: relative;
	padding: 0 5rem;	/*上下、左右への余白設定ですが、両サイドのラインの配置にも影響します。お好みで。*/
}
/*h4見出し内のサブテキストの左右のライン*/
.sub-text::before {left: 0;}
.sub-text::after {right: 0;}
.business-list h4 .sub-text::before,.business-list h4 .sub-text::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 2rem;	/*線の長さ*/
	border-top: 1px solid #fff;	/*ラインの幅、線種、色*/
}

/*見出しの下の説明テキスト*/
.business-list .list .text {
	position: relative;z-index: 1;
	font-size: 0.85rem;	/*文字サイズ85%*/
}

/*マウスオン用のアニメーション*/
.business-list .list::before {
	content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;
	background: rgba(0,0,0,0.6);		/*写真に重ねておく半透明の黒い色。0,0,0は黒のことで0.6は色が60%出た状態。*/
	transition: transform 0.3s 0.1s;	/*アニメーションの速度（0.3秒）と待機時間（0.1秒）。*/
}
.business-list .list:hover::before {
	transform: translateY(100%);	/*マウスオンで半透明の黒を枠外へ出す。-100%にすると逆に移動します。*/
}

/*ボックス内のボタン（.btn2）*/
.business-list .list .btn2 a,
.list-grid7 .list .btn2 a {
	background: rgba(0,0,0,0.7);	/*背景色。0,0,0は黒のことで0.7は色が70%出た状態。*/
}

/*ボックス内のボタン（.btn3）*/
.business-list .list .btn1 a {
	text-shadow: none;	/*テキストの影を消す*/
}

.slidecm  {
padding: 2rem  0 2rem 0 }

.slidecm .business-list .list {
margin: 0 }

.slidecm .business-list .text {
width: 80%; }

/*マウスオン用のアニメーション　逆の動き*/
.slidecm .business-list .list::before {
	content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;
	transition: transform 0.3s 0.1s;	/*アニメーションの速度（0.3秒）と待機時間（0.1秒）。*/
		background: rgba(0,0,0,0.6);		/*写真に重ねておく半透明の黒い色。0,0,0は黒のことで0.6は色が60%出た状態。*/
	transform: translateY(-100%);	/*マウスオンで半透明の黒を枠外へ出す。-100%にすると逆に移動します。*/

}
.slidecm .business-list .list:hover::before {
	transform: translateY(0%);	/*マウスオンで半透明の黒を枠外へ出す。-100%にすると逆に移動します。*/
}
