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

/*
	common
-----------------------------------------------------------------------------------------------*/
/* ページタイトル
========================================*/
[class*="pageService"] #cmnPageHead .tit, [class*="pageService"] #cmnPageHead .enCategory{
	color: var(--colorPurple);
}


/*
	Apotool & Box for Dentist
-----------------------------------------------------------------------------------------------*/
.pageService_apotool #ctsWrapper{
	position: relative;
}
.pageService_apotool .ctsArea{
	display: flex;
	gap: max(100px, calc(100 / var(--baseWidth) * 100vw));
	flex-direction: column;
}
/* 下部 装飾 */
.itemService{
	position: absolute;
	right: 0;
	z-index: -1;
}
.itemService:nth-of-type(1){
	width: max(192px, calc(192 / var(--baseWidth) * 100vw));
	bottom: min(-30px, calc(-30 / var(--baseWidth) * 100vw));
}
.itemService:nth-of-type(2){
	width: max(565px, calc(565 / var(--baseWidth) * 100vw));
	bottom: min(-100px, calc(-100 / var(--baseWidth) * 100vw));
	z-index: -2;
}

/* Apotool & Box for Dentist
============================== */
.logoApotool{
	width: 100%;
	margin-bottom: max(30px, calc(30 / var(--baseWidth) * 100vw));
}
.logoApotool .imgLogo{
	width: max(500px, calc(500 / var(--baseWidth) * 100vw));
	margin: 0 auto;
}
.apotoolCts .detailArea{
	display: flex;
	flex-wrap: wrap;
	gap: max(20px, calc(20 / var(--baseWidth) * 100vw));
	align-items: center;
	justify-content: space-between;
}
/* テキスト */
.apotoolCts .txtArea{
	display: flex;
	gap: max(30px, calc(30 / var(--baseWidth) * 100vw));
	flex-direction: column;
	letter-spacing: 0.1rem;
}
.apotoolCts .txtArea .ttlApotool{
	color: var(--colorBlue);
	font-size: max(3.2rem, calc(32 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
}
/* 画像 */
.apotoolCts .imgApotool{
	width: max(650px, calc(650 / var(--baseWidth) * 100vw));
}
.systemCts{
	margin: 0 auto;
}

/* 「Apotool & Box for Dentist」とは？
============================== */
.systemArea{
	padding: max(75px, calc(75 / var(--baseWidth) * 100vw));
	background-color: var(--bgBlue);
	border-radius: var(--br100);
	position: relative;
}
/* 見出し */
.systemArea .tit{
	margin-bottom: max(50px, calc(50 / var(--baseWidth) * 100vw));
	text-align: center;
}
.systemArea .tit .border{
	display: inline;
	font-size: max(4.0rem, calc(40 / var(--baseWidth) * 100vw));
	font-weight: var(--fwRegular);
	background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)) 0 calc(100% - 3px) / 100% 10px repeat-x;
}
/* 画像 */
.imgPeople{
	width: clamp(600px, calc(600 / var(--baseWidth) * 100vw), 1000px);
    margin-left: min(-100px, calc(-210 / var(--baseWidth) * 100vw));
    border-radius: 0 var(--br100) var(--br100) 0;
}
/* 画像横文章 */
.detailSystem{
	display: flex;
	gap: max(80px, calc(80 / var(--baseWidth) * 100vw));
	align-items: center;
}
.detailSystem .txtArea{
	display: flex;
	gap: max(30px, calc(30 / var(--baseWidth) * 100vw));
	flex-direction: column;
}
.detailSystem .txtArea .ttl{
	color: var(--colorBlue);
	font-size: max(2.4rem, calc(24 / var(--baseWidth) * 100vw));
	font-weight: var(--fwBold);
}
/* 注釈 */
.detailSystem .txtArea .txtBox .txtNotes{
	margin-top: max(15px, calc(15 / var(--baseWidth) * 100vw));
	font-size: max(1.4rem, calc(14 / var(--baseWidth) * 100vw));
	font-weight: var(--fwRegular);
}
/* タブレット 画像 */
.imgItemApotool{
	width: max(320px, calc(320 / var(--baseWidth) * 100vw));
	position: absolute;
	bottom: min(-180px, calc(-180 / var(--baseWidth) * 100vw));
	right: min(-20px, calc(-20 / var(--baseWidth) * 100vw));
}
/* 専用サイト ボタン */
.systemCts .btnArea{
	margin-top: max(40px, calc(40 / var(--baseWidth) * 100vw));
}


@media screen and (width <= 812px){
	/*
		Apotool & Box for Dentist
	-----------------------------------------------------------------------------------------------*/
	.pageService_apotool .ctsArea{
		gap: 60px;
	}
	/* 下部 装飾 */
	.itemService:nth-of-type(1){
		width: 80px;
		bottom: -10px;
	}
	.itemService:nth-of-type(2){
		width: 210px;
		bottom: -50px;
	}

	/* Apotool & Box for Dentist
	============================== */
	.logoApotool{
		margin-bottom: 20px;
	}
	.logoApotool .imgLogo{
		max-width: 240px;
		width: 100%;
	}
	.apotoolCts .detailArea{
		gap: 30px;
		flex-direction: column-reverse;
	}
	/* テキスト */
	.apotoolCts .txtArea{
		gap: 20px;
	}
	.apotoolCts .txtArea .ttlApotool{
		text-align: center;
		font-size: 2.2rem;
	}
	/* 画像 */
	.apotoolCts .imgApotool{
		width: 100%;
	}

	/* 「Apotool & Box for Dentist」とは？
	============================== */
	.systemArea{
		padding: 40px 30px;
		border-radius: 50px;
	}
	/* 見出し */
	.systemArea .tit{
		margin-bottom: 30px;
	}
	.systemArea .tit .border{
		font-size: 2.3rem;
	}
	/* 画像 */
	.imgPeople{
		width: 100%;
		margin-inline: max(20px, calc(18 / var(--baseWidthSp) * 100vw));
		border-radius: 50px;
	}
	/* 画像横文章 */
	.detailSystem{
		flex-direction: column;
		gap: 20px;
	}
	.detailSystem .txtArea{
		gap: 15px;
	}
	.detailSystem .txtArea .ttl{
		line-height: 1.7;
		font-size: 1.6rem;
	}
	/* 注釈 */
	.detailSystem .txtArea .txtBox .txtNotes{
		margin-top: 10px;
		font-size: 1.2rem;
	}
	/* タブレット 画像 */
	.imgItemApotool{
		width: 120px;
		bottom: -40px;
		right: -10px;
	}
	/* 専用サイト ボタン */
	.systemCts .btnArea{
		margin-top: 50px;
	}
}