@charset "UTF-8";

/* ====================================
	製品ページ共通スタイル
 ==================================== */
/* tab01 */
/* サブセクション */
#tab01 .main-section {
	background-color: #C8E5DD;
}

#tab01 .category-title {
	color: #C8E5DD;
}

#tab01 .category-title::before {
	background: #C8E5DD;
}

/* ユーザーの声 */
#tab01 .voice-section {
	background-color: #C8E5DD;
}

#tab01 .voice-title {
	background-color: #5FB9A8;
}

/* 個別指定 */
/* tab01 */
#tab01 .sub02-1 .flex-item .img {
	position: relative;
	margin-right: 4.4%;
}

#tab01 .sub02-1 .flex-item .sub-img.img-shadow {
	border-radius: 50%;
}

#tab01 .sub02-1 .flex-item .sub-img {
	position: absolute;
	bottom: -13rem;
	right: -5rem;
	width: 50%;
}

/* #tab01 .sub05-1 .flex-item .img {
	position: relative;
	margin-left: 4.4%;
} */

#tab01 .sub05-1 .flex-item .sub-img.img-shadow {
	border-radius: 50%;
}

#tab01 .sub05-1 .flex-item .sub-img {
	position: absolute;
	bottom: -22rem;
	right: -18rem;
	width: 100%;
}

#tab01 .sub05 .sub-img-container {
	width: 30%;
	margin-top: 8rem;
}

#tab01 .sub05 .sub-img-container .img-shadow {
	border-radius: 50%;
}

#tab01 .sub05-2 .img-text {
	font-size: 1.2rem;
}

/* アローボタン */
#tab01 .btn-arrow a {
	background-color: #5FB9A8;
}

#navi-under-section::before {
	background-color: #5FB9A8;
}

/* ====================================
	スマートフォン専用スタイル
===================================== */
@media only screen and (max-width: 1023px) {

	.category-title::after,
	.category-title::before {
		background-color: #C8E5DD;
		content: '';
		flex-grow: 1;
		height: 2px;
	}

	#tab01 .flex-item.img {
		padding-right: 1.5%;
		padding-bottom: 1.5%;
	}

	/* 個別指定 */
	#tab01 .sub01-2 .flex-item.img {
		padding-right: 10%;
	}

	#tab01 .sub02-1 .flex-item .sub-img {
		bottom: -35%;
		right: -6%;
		width: 40%;
	}

	#tab01 .sub02-1 .flex-item .img {
		margin-bottom: 22%;
	}

	#tab01 .sub03 .sub-sub-item>.img-container.pcmaxw1080 {
		margin-top: 6rem;
	}

	#tab01 .sub04 .img-container {
		padding-right: 1.5%;
		padding-bottom: 1.5%;
	}

	#tab01 .sub05 .sub-img-container {
		width: 50%;
		margin-top: 4rem;
	}

	#tab01 .sub05-1 .flex-item .sub-img {
		bottom: -52%;
		left: -2%;
		width: 62%;
		max-width: 330px;
	}

	#tab01 .sub05-1 .flex-item .img {
		margin-bottom: 42%;
		margin-left: 8%;
	}



	/* 背景装飾 */
	.square1 {
		left: -14%;
		top: -131px;
		width: 50%;
		max-width: 350px;
		transform: rotate(58deg);
	}

	.square2 {
		left: 75%;
		top: 360px;
		width: 50%;
		max-width: 350px;
		transform: rotate(-30deg);
	}

	.square3 {
		left: -30%;
		bottom: -420px;
		width: 50%;
		max-width: 350px;
		transform: rotate(41deg);
	}


	.square4 {
		left: 84%;
		top: 320px;
		width: 50%;
		max-width: 350px;
		transform: rotate(41deg);
	}


	.square5 {
		left: -30%;
		top: 440px;
		width: 50%;
		max-width: 350px;
		transform: rotate(-30deg);
	}

	.square6 {
		left: 75%;
		top: 840px;
		width: 50%;
		max-width: 350px;
		transform: rotate(41deg);
	}

	.square7 {
		left: -32%;
		bottom: 310px;
		width: 50%;
		max-width: 350px;
		transform: rotate(-30deg);
	}
}

/* ====================================
	PC&タブレット、印刷専用スタイル
===================================== */
@media print,
screen and (min-width: 1024px) {

	/* 個別指定 */
	/* tab01 */
	#tab01 .sub01 .flex-item,
	#tab01 .sub02 .flex-item,
	#tab01 .sub03 .flex-item,
	#tab01 .sub04 .flex-item,
	#tab01 .sub05 .flex-item {
		width: 47%;
	}

	#tab01 .sub02 .flex-container {
		flex-direction: row-reverse;
	}

	#tab01 .sub02-1 .flex-item.img {
		padding-right: 4.4%;
		position: relative;
		margin-bottom: 13rem;
	}

	.sub02-1 .flex-item .sub-img img {
		border-radius: 50%;
	}

	#tab01 .sub02-2.flex-container>.flex-item.img {
		width: 44%;
	}

	#tab01 .sub02 .sub05-2.flex-container {
		flex-direction: row-reverse;
	}

	#tab01 .sub03-2.flex-container>.flex-item.img {
		padding: 0 6%;
	}

	#tab01 .sub05-1 .flex-item.img {
		position: relative;
		margin-bottom: 12rem;
	}

	.sub05-1 .flex-item .sub-img img {
		border-radius: 50%;
	}

	#tab01 .sub04-2.flex-container>.flex-item.img {
		padding: 0 6%;
	}


	#tab01 .sub04-2.flex-container {
		align-items: center;
	}


	#tab01 .sub05-1 .flex-item .img {
		position: relative;
		margin-right: 38%;
	}

	#tab01 .sub05-1.flex-container>.flex-item.text {
		margin-top: 7%;
	}

	#tab01 .sub05-2 .flex-item.img {
		padding: 0 4%;
	}

	#tab01 .sub05-2.flex-container>.flex-item.text {
		width: 47%;
		/* margin-top: 12%; */
	}

	#tab01 .sub05-2.flex-container {
		align-items: center;
	}

	#tab01 .sub05 .sub05-2.flex-container {
		flex-direction: row-reverse;
	}


	/* 背景装飾 */
	.square1 {
		left: calc(50% - 85rem);
		top: -285px;
		max-width: 500px;
		transform: rotate(58deg);
	}

	.square2 {
		left: calc(50% - -40rem);
		top: 80px;
		max-width: 500px;
		transform: rotate(-30deg);
	}

	.square3 {
		left: calc(50% - 98rem);
		bottom: 0px;
		max-width: 500px;
		transform: rotate(41deg);
	}

	.square4 {
		left: calc(50% - -46rem);
		top: -250px;
		max-width: 500px;
		transform: rotate(41deg);
	}

	.square5 {
		left: calc(50% - 98rem);
		top: 600px;
		max-width: 500px;
		transform: rotate(-30deg);
	}

	.square6 {
		left: calc(50% - -50rem);
		top: 678px;
		max-width: 500px;
		transform: rotate(41deg);
	}

	.square7 {
		left: calc(50% - 92rem);
		bottom: 350px;
		max-width: 500px;
		transform: rotate(-30deg);
	}
}

/* ====================================
	568px以上1023px以下専用スタイル
===================================== */
@media only screen and (min-width: 568px) and (max-width: 1023px) {
	#tab01 .sub05-1 .flex-item .img {
		margin-bottom: 30%;
	}
}

/* ====================================
	567px以下専用スタイル
===================================== */
@media only screen and (max-width: 567px) {}


/* ====================================
	1024px以上1199px以下専用スタイル
===================================== */
@media print,
screen and (min-width: 1024px) and (max-width: 1199px) {}

/* ====================================
	1200px以上専用スタイル
===================================== */
@media screen and (min-width: 1200px) {}