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

body{
	margin: 0;
}

.wrapper{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto 5%;
}

.wrapper img{
	display: block;
	line-height: 0;
}

.mv{
	margin: 0 auto 3%;
}

.point{
	width: 95%;
	margin: 0 auto;
}

.point-box{
	display: flex;
	column-gap: 10px;
	align-items: center;
	margin-bottom: 2.5%;
	background-color: #DAE3F2;
	box-sizing: border-box;
	padding: 1%;
}

.point-img{
	width: 40%;
}

.point-lead {
	width: 60%;
	color: #636363;
}

.point-lead p{
	margin: 0;
	font-size: 0.7rem;
	line-height: 1.7;
	text-align: center;
	font-family: source-han-sans-cjk-ja, sans-serif;
}

.point-lead .point-title{
	font-family: "trade-gothic-next", sans-serif;
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1.5;
	margin-bottom: 2%;
	letter-spacing: 0px;

	/* ▼ 横並びにして中央に寄せる設定 */
	display: flex;
	align-items: center;
	justify-content: center; /* 文字と線を中央に集める */
}

/* 前後の線の共通設定（不正な空白を削除・短く固定） */
.point-lead .point-title::before,
.point-lead .point-title::after {
	content: "";
	height: 1px;
	background-color: #636363;
	width: 20px;        /* 線の長さを40pxに指定（ここでお好みの長さに変更できます） */
	flex-shrink: 0;     /* 画面が狭くなっても線が潰れないようにする */
}

/* 前の線と文字の間のすき間 */
.point-lead .point-title::before {
	margin-right: 15px;
}

/* 後の線と文字の間のすき間 */
.point-lead .point-title::after {
	margin-left: 15px;
}		

.row-reverse{
	flex-direction: row-reverse;
}

@media(min-width:750px){
	.point{
		width: 100%;
		display: flex;
		column-gap: 10px;
	}

	.point-box{
		display: block;
	}

	.point-img{
		width: 100%;
	}

	.point-lead {
		width: 100%;
		margin: 5% auto;
	}

	.point-lead p{
		font-size: 0.8rem;
	}

	/* 前後の線の共通設定（不正な空白を削除・短く固定） */
	.point-lead .point-title::before,
	.point-lead .point-title::after {
		content: "";
		height: 1px;
		background-color: #636363;
		width: 60px;        /* 線の長さを40pxに指定（ここでお好みの長さに変更できます） */
		flex-shrink: 0;     /* 画面が狭くなっても線が潰れないようにする */
	}

}