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

/*
	ダスキン事業
-----------------------------------------------------------------------------------------------*/
[class^="businessArea"]{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

/* タイトル周り
============================== */
.businessTitArea{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.businessTitArea > .tit > *{
    line-height: 1.0;
}
.businessTitArea > .tit{
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--colorPrimary);
}
.businessTitArea > .tit .num{
    font-family: var(--ffEn);
    font-size: 6.5rem;
    font-weight: 900;
    color: var(--colorSub01);
}
/* テキスト */
.businessTitArea > .txt{
	text-align: justify;
	line-height: 2.0;
}

/* gif画像
============================== */
[class^="businessArea"] .img{
    border-radius: 50%;
}

/* 01
============================== */
.businessArea01{
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--colorPoint03);
}
.businessArea01 .businessTitArea{
    width: calc(100% - 470px);
}
.businessArea01 .businessImgArea{
    width: 440px;
}
.businessArea01 .businessImgArea img{
    display: block;
}
.businessArea01 .businessImgArea img:last-of-type{
    margin-top: -130px;
    margin-inline: auto 0;
}

/* 02
============================== */
/* リスト */
.listBusinessImg{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.listBusinessImg > li{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 250px;
}
.listBusinessImg > li .txt{
    font-weight: 600;
    color: var(--colorPrimary);
}


/*
	当社の特長
-----------------------------------------------------------------------------------------------*/
/* リスト
============================== */
.listFeatures{
    display: flex;
    flex-direction: column;
}
.listFeatures > li{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.listFeatures > li:not(:last-child){
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--colorPoint03);
}
/* 反転 */
.listFeatures > li:nth-of-type(even){
    flex-direction: row-reverse;
}
/* テキストエリア */
.listFeaturesTxtArea{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: calc(100% - 380px);
}
.listFeaturesTxtArea .tit{
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--colorPrimary);
}
.listFeaturesTxtArea .txt{
    text-align: justify;
	line-height: 2.0;
}
/* 画像 */
.listFeatures > li .img{
    width: 340px;
    border-radius: var(--br20);
}


@media screen and (max-width:812px){
	/*
		ダスキン事業
	-----------------------------------------------------------------------------------------------*/
	[class^="businessArea"]{
		gap: 20px;
	}

	/* タイトル周り
	============================== */
	.businessTitArea{
		gap: 10px;
	}
	.businessTitArea > .tit{
		display: flex;
		align-items: center;
		gap: 15px;
		font-size: 1.8rem;
	}
	.businessTitArea > .tit .num{
		font-size: 3.5rem;
	}
	/* テキスト */
	.businessTitArea > .txt{
		line-height: 1.8;
	}

	/* 01
	============================== */
	.businessArea01{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}
	.businessArea01 .businessTitArea{
		width: 100%;
	}
	.businessArea01 .businessImgArea{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
		width: 100%;
	}
	.businessArea01 .businessImgArea img{
		width: calc((100% - 10px)/2);
		max-width: 160px;
	}
	.businessArea01 .businessImgArea img:last-of-type{
		margin-top: 0;
		margin-inline: 0;
	}

	/* 02
	============================== */
	/* リスト */
	.listBusinessImg{
		justify-content: center;
		gap: 10px;
	}
	.listBusinessImg > li{
		gap: 5px;
		width: calc((100% - 10px)/2);
		max-width: 160px;
	}
	.listBusinessImg > li .txt{
		font-size: 1.2rem;
	}


	/*
		当社の特長
	-----------------------------------------------------------------------------------------------*/
	/* リスト
	============================== */
	.listFeatures > li{
		flex-direction: column;
		align-items: center;
		gap: 15px;
	}
	.listFeatures > li:not(:last-child){
		margin-bottom: 20px;
		padding-bottom: 20px;
	}
	/* 反転 */
	.listFeatures > li:nth-of-type(even){
		flex-direction: column;
	}
	/* テキストエリア */
	.listFeaturesTxtArea{
		gap: 10px;
		width: 100%;
	}
	.listFeaturesTxtArea .tit{
		font-size: 1.8rem;
	}
	.listFeaturesTxtArea .txt{
		line-height: 1.8;
	}
	/* 画像 */
	.listFeatures > li .img{
		width: 100%;
		max-width: 300px;
		margin:  0 auto;
	}
}