@charset "utf-8";
/*------------------------------------------------------------
	about
------------------------------------------------------------*/
.pageTitle {
	margin-bottom: 0;
}
.pageImg {
	width: calc(50% + 22rem);
	margin: -16.9rem 0 9rem auto;
}
#main .topBox h3 {
	margin-bottom: 7rem;
	color: #111;
	font-size: 3.8rem;
	font-weight: 800;
	letter-spacing: 0.38rem;
}
#main .topBox h4 {
	margin-bottom: 2.2rem;
	color: #111;
	font-size: 2.6rem;
	font-weight: 600;
}
#main .topBox p {
	margin-bottom: 2.7rem;
	color: #111;
	font-size: 1.8rem;
	line-height: 1.8;
	letter-spacing: 0.04em;
}
#main p strong {
	font-weight: 700;
	background-color: #EAE6E1;
}
#main .topBox p:last-child {
	margin-bottom: 0;
}
#main .topBox {
	margin-bottom: 10rem;
}
#main .greetingBox {
	padding: 5.1rem 0 10rem;
}
#main .greetingBox .headLine04 {
	margin-bottom: 5rem;
}
#main .greetingBox .photo {
	margin-bottom: 4rem;
}
#main .greetingBox h4 {
	margin-bottom: 5.9rem;
	color: #111;
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1.8;
}
#main .greetingBox .imgBox {
	margin-bottom: 5.1rem;
}
#main .greetingBox .imgBox .photoBox {
	width: 48rem;
}
#main .greetingBox .imgBox .textBox {
	order: 1;
	width: 47rem;
}
#main .greetingBox .imgBoxR {
	margin-bottom: 3.3rem;
}
#main .greetingBox .imgBoxR .textBox {
	order: inherit;
}
#main .greetingBox .imgBoxR .textBox p {
	line-height: 1.5;
}
#main .greetingBox .imgBox .textBox p {
	margin-bottom: 2.7rem;
}
#main .greetingBox .imgBox .textBox p:last-child {
	margin-bottom: 0;
}
#main .greetingBox p {
	margin-bottom: 5.9rem;
	font-size: 1.9rem;
	line-height: 1.8;
	letter-spacing: 0.04em;
}
#main .greetingBox p:last-child {
	margin-bottom: 0;
}
#main .featureBox {
	padding: 5.1rem 0 10rem;
}
#main .featureBox .headLine04 {
	margin-bottom: 5rem;
}
#main .featureBox .imgBox {
	margin-bottom: 2rem;
}
#main .featureBox .imgBox:last-child {
	margin-bottom: 0;
}
#main .featureBox .imgBox .photoBox {
	width: 40rem;
}
#main .featureBox .imgBox .photoBox a:hover {
	opacity: 0.7;
}
#main .featureBox .imgBox .textBox {
	margin-top: 3.4rem;
	width: calc(100% - 43rem);
}
#main .featureBox .imgBox .textBox h4 {
	margin-bottom: 2rem;
	color: #111;
	font-size: 3.2rem;
	font-weight: 700;
}
#main .featureBox .imgBox .textBox p {
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 1.5;
}
#main .distinctBox {
	padding: 5rem 0 12rem;
}
#main .distinctBox .headLine04 {
	margin-bottom: 4.5rem;
	font-size: 4.4rem;
	letter-spacing: 0;
}
#main .distinctBox .inner {
	margin: 0 auto 6rem;
	max-width: 92rem;
}
#main .distinctBox .inner .subInner {
	padding: 2.8rem 3.7rem 4.9rem;
	width: calc((100% - 2rem) / 2);
	background: #FFFCEF;
	box-sizing: border-box;
}
#main .distinctBox .inner .subInner .logo {
	margin: 0 auto 2.7rem;
	width: 26rem;
}
#main .distinctBox .inner .subInner .textList li {
	margin-bottom: 1.8rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	min-height: 6.3rem;
	color: #FFF;
	font-size: 2.4rem;
	font-weight: 600;
	line-height: 1.2;
	border-radius: 0.4rem;
	background: #68BCE0;
	text-align: center;
}
#main .distinctBox .inner .subInner .textList.style01 li {
	background: #F78F7D;
}
#main .distinctBox .inner .subInner .textList li:last-child {
	margin-bottom: 0;
}
#main .distinctBox .inner .subInner .textList li.spec {
	font-size: 2.2rem;
}
#main .distinctBox .bottomText {
	color: #111;
	text-align: center;
	font-size: 2rem;
	font-weight: 400;
	line-height: 1.8;
}
#main .distinctBox .bottomText .big {
	font-size: 2.4rem;
	font-weight: 700;
}
#main .usageBox {
	padding: 5rem 0 12rem;
}
#main .usageBox .headLine04 {
	margin-bottom: 3.7rem;
	font-size: 4.4rem;
	letter-spacing: 0;
}
#main .usageBox .photoList {
	margin-bottom: 12rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
}
#main .usageBox .photoList li {
	width: calc((100% - 2.4rem) / 3);
	border: 1px solid #D8D8D8;
}
#main .usageBox .photoList li .titleBox {
	padding: 0.7rem 2.1rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	background: #6CBBA8;
}
#main .usageBox .photoList li .titleBox .tag {
	padding-bottom: 0.2rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 5.4rem;
	height: 5.4rem;
	background: #FFF;
	border-radius: 50%;
	color: #6CBBA8;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.06;
}
#main .usageBox .photoList li .titleBox .title {
	padding-bottom: 0.3rem;
	width: calc(100% - 7.5rem);
	color: #FFF;
	font-size: 2.4rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}
#main .usageBox .photoList li.style01 .titleBox {
	padding: 0.7rem 1.4rem 0.5rem;
	background: #68ADC6;
}
#main .usageBox .photoList li.style01 .titleBox .tag {
	color: #68ADC6;
}
#main .usageBox .photoList li.style01 .titleBox .title {
	width: calc(100% - 6.7rem);
	font-size: 2.2rem;
}
#main .usageBox .photoList li.style02 .titleBox {
	background: #E28DA1;
}
#main .usageBox .photoList li.style02 .titleBox .tag {
	color: #E28DA1;
}
#main .usageBox .photoList li .textImg {
	width: 24.6rem;
}
#main .usageBox .photoList li .subBox {
	padding-top: 0.1rem;
	min-height: 13.1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
#main .usageBox .photoList li .subBox .sub {
	width: fit-content;
}
#main .usageBox .photoList li .subBox .sub .note {
	margin-top: 0.6rem;
	color: #111;
	font-size: 1.2rem;
	font-weight: 500;
}
.abouttext {
	margin-bottom: 7.2rem;
}
#main .campaign .photo a:hover {
	opacity: 0.7;
}
@media all and (max-width: 896px) {
	.pageTitle {
		margin-bottom: 0;
	}
	.pageImg {
		width: auto;
		margin: 0 0 6rem;
	}
	.pageImg img {
		width: 100%;
	}
	#main .topBox h3 {
		margin: 0 -1rem 4rem 0;
		font-size: 2.7rem;
		letter-spacing: 0.2rem;
	}
	#main .topBox h4 {
		margin-bottom: 2rem;
		font-size: 1.8rem;
		line-height: 1.5;
	}
	#main .topBox p {
		margin-bottom: 2.4rem;
		font-size: 1.4rem;
		line-height: 1.8;
	}
	#main .topBox {
		margin-bottom: 7.9rem;
	}
	#main .greetingBox {
		padding: 1.3rem 0 7.5rem;
	}
	#main .greetingBox .headLine04 {
		margin-bottom: 4rem;
	}
	#main .greetingBox .photo {
		margin-bottom: 3rem;
	}
	#main .greetingBox .photo img {
		width: 100%;
	}
	#main .greetingBox h4 {
		margin-bottom: 3.1rem;
		font-size: 2rem;
		line-height: 1.6;
	}
	#main .greetingBox .imgBox {
		margin-bottom: 3rem;
		display: block;
	}
	#main .greetingBox .imgBox .photoBox {
		width: auto;
	}
	#main .greetingBox .imgBox .textBox {
		margin-bottom: 2.7rem;
		width: auto;
	}
	#main .greetingBox .imgBoxR {
		margin-bottom: 3.1rem;
	}
	#main .greetingBox .imgBox .textBox p {
		margin-bottom: 2.5rem;
		font-size: 1.4rem;
		line-height: 1.8;
	}
	#main .greetingBox p {
		margin-bottom: 3rem;
		font-size: 1.4rem;
	}
	#main .featureBox {
		padding: 1.3rem 0 7.9rem;
	}
	#main .featureBox .headLine04 {
		margin-bottom: 4rem;
	}
	#main .featureBox .imgBox {
		margin-bottom: 4.7rem;
		display: block;
	}
	#main .featureBox .imgBox .photoBox {
		width: auto;
	}
	#main .featureBox .imgBox .photoBox img {
		width: 100%;
	}
	#main .featureBox .imgBox .textBox {
		width: auto;
	}
	#main .featureBox .imgBox .textBox h4 {
		margin-bottom: 2.1rem;
		font-size: 2.2rem;
	}
	#main .featureBox .imgBox .textBox p {
		font-size: 1.4rem;
	}
	#main .distinctBox {
		padding: 2.1rem 0 6rem;
	}
	#main .distinctBox .headLine04 {
		margin-bottom: 4.5rem;
		font-size: 3.2rem;
		letter-spacing: 0.3rem;
	}
	#main .distinctBox .inner {
		margin: 0 0 4rem;
		max-width: inherit;
		display: block;
	}
	#main .distinctBox .inner .subInner {
		margin-bottom: 4rem;
		padding: 2.8rem 2rem;
		width: auto;
	}
	#main .distinctBox .inner .subInner:last-child {
		margin-bottom: 0;
	}
	#main .distinctBox .inner .subInner .logo {
		margin: 0 auto 2rem;
		width: 20rem;
	}
	#main .distinctBox .inner .subInner .textList li {
		margin-bottom: 1rem;
		min-height: 5rem;
		font-size: 1.6rem;
	}
	#main .distinctBox .inner .subInner .textList li.spec {
		font-size: 1.4rem;
	}
	#main .distinctBox .bottomText {
		font-size: 1.4rem;
		line-height: 1.8;
		text-align: left;
	}
	#main .distinctBox .bottomText .big {
		font-size: 1.6rem;
	}
	#main .usageBox {
		padding: 2rem 0 6rem;
	}
	#main .usageBox .headLine04 {
		margin-bottom: 3rem;
		font-size: 3.2rem;
	}
	#main .usageBox .photoList {
		margin-bottom: 5rem;
		display: block;
	}
	#main .usageBox .photoList li {
		margin-bottom: 2rem;
		width: auto;
	}
	#main .usageBox .photoList li:last-child {
		margin-bottom: 0;
	}
	#main .usageBox .photoList li .titleBox {
		padding: 0.7rem 2.1rem;
	}
	#main .usageBox .photoList li .titleBox .tag {
		padding-bottom: 0.2rem;
		width: 4rem;
		height: 4rem;
		font-size: 1.2rem;
	}
	#main .usageBox .photoList li .titleBox .title {
		padding-bottom: 0;
		width: calc(100% - 5rem);
		font-size: 1.8rem;
	}
	#main .usageBox .photoList li.style01 .titleBox {
		padding: 0.7rem 2.1rem;
	}
	#main .usageBox .photoList li.style01 .titleBox .title {
		width: calc(100% - 5rem);
		font-size: 1.6rem;
	}
	#main .usageBox .photoList li .subBox {
		padding: 1rem;
		min-height: 13.1rem;
	}
}