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

/* ------------------------------
○○とは
------------------------------ */
.home section:has(.about) {
	background: url("../../add_images/04/about_pc.png") right top / auto 100% no-repeat #fafafa;
}

.about {
	text-align: justify;
	text-justify: inter-ideograph;	
}

/*ロゴ入りタイトル*/
.about_title_ori {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	font-size: 20px;
}

.about_title_ori img {
	display: block;
	height: 40px;
}

/*キャッチコピー*/
.about_catch {
	margin-top: 2.5rem;
}

.about_catch p {
	display: block;
	width: -moz-fit-content;
	width: fit-content;
	padding: 0.2em 0.6em;
	font-size: 18px;
	font-weight: bold;
	background: var(--main-color);
	color: #fff;
}

.about_catch p + p {
	margin-top: 10px;
}

/*テキスト*/
.about_sentence {
	margin-top: 1.5rem;
	filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 10px #fff);
	line-height: 2;
}

/*ボタン*/
.about .btn_wrap {
	margin-top: 2.5rem;
}

.about .btn_wrap .btn2 a {
	border: 1px solid var(--main-color);
	background: #fff;
}

@media (min-width:768px){
	.about_content {
		width: 560px;
	}
}

@media screen and (max-width:767px){
	.home section:has(.about) {
		background: url("../../add_images/04/about_sp.png") right top / auto 100% no-repeat #fafafa;
	}

	/*ロゴ入りタイトル*/
	.about_title_ori {
		flex-direction: column;
		gap: 6px;
		align-items: center;
		font-size: 18px;
	}
	
	.about_title_ori img {
		width: 100%;
		height: 34px;
		object-fit: contain;
	}
	
	/*キャッチコピー*/
	.about_catch {
		margin-top: 2rem;
	}
	
	.about_catch p {
		font-size: 16px;
	}

	/*ボタン*/
	.about .btn_wrap {
		margin-top: 2rem;
	}
}

/* ------------------------------
3つの特徴
------------------------------ */
.point_list_04 {
	display: flex;
	gap: 40px;
}

.point_list_04 > div {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.point_list_04 img {
	display: block;
	width: 280px;
	height: 280px;
	margin: 0 auto;
	border-radius: 140px;
	object-fit: cover;
}

.point_list_04_num {
	margin-top: 30px;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	color: var(--main-color);
}

.point_list_04_ttl {
	margin-top: 10px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
}

.point_list_04_txt {
	flex-grow: 1;
	margin-top: 20px;
	text-align: justify;
	text-justify: inter-ideograph;
}

@media screen and (max-width:767px){
	.point_list_04 {
		flex-direction: column;
	}

	.point_list_04 img {
		width: 200px;
		height: 200px;
		border-radius: 100px;
	}

	.point_list_04_num {
		font-size: 22px;
	}

	.point_list_04_ttl {
		font-size: 16px;
	}
}