@charset "utf-8";
/*======================
pc
======================*/
/* リード文 */
.repair_box {
	margin-bottom: 80px;
	padding: 30px auto;
}
.repair_box .lead_title {
	color: #867361;
	font-size: 24px;
	font-weight: 700;
	position: relative;
	padding-bottom: 8px;
}
.repair_box .lead_title::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%; /* 線の幅を要素全体に広げる */
	height: 2px; /* 線の太さ */
	background: repeating-linear-gradient(
		to right,
		#867361 0, /* 線の開始地点 */
		#867361 5px, /* 線の終了地点(長さ) */
		transparent 5px, /* 透明部分の開始地点(線の後ろから) */
		transparent 10px /* 透明部分の終了地点(0から数える) */
	);
}
.repair_box .lead_text {
	margin-top: 20px;
}

/* ミシン修理完了までの流れ */
.flow_box {
	margin-bottom: 150px;
}
.content_title {
	color: #867361;
	font-size: 30px;
	font-weight: 700;
	position: relative;
	padding-bottom: 10px;
	padding-left: 30px;
	margin-bottom: 50px;
	display: inline-block;
}
.content_title::before{
	content: url("../img/misin_repair/icon_title.svg");
	position: absolute;
	left: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
}
.content_title::after{
	content: ""; /* 擬似要素を有効化 */
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%; /* 線の幅を要素全体に広げる */
	height: 2px; /* 線の太さ */
	background: repeating-linear-gradient(
	to right,
		#867361 0, /* 線の開始地点 */
		#867361 5px, /* 線の終了地点(長さ) */
		transparent 5px, /* 透明部分の開始地点(線の後ろから) */
		transparent 10px /* 透明部分の終了地点(0から数える) */
	);
}
.content_box {
	background: #fff;
	border-radius: 20px;
	padding: 40px 60px 27px 60px;
	margin-bottom: 35px;
	position: relative;
}
.flow_1::before {
	content: "01";
	display: block;
	border-radius: 50%;
	background: #F0EFEC;
	color: #4EC1B8;
	font-size: 48px;
	height: 80px;
	width: 80px;
	position: absolute;
	top: 32px;
	right: 32px;
	padding-top: 8px;
	text-align: center;
}
.flow_2::before{
	content: "02";
	display: block;
	border-radius: 50%;
	background: #F0EFEC;
	color: #4EC1B8;
	font-size: 48px;
	height: 80px;
	width: 80px;
	position: absolute;
	top: 32px;
	right: 32px;
	padding-top: 8px;
	text-align: center;
}
.flow_3::before{
	content: "03";
	display: block;
	border-radius: 50%;
	background: #F0EFEC;
	color: #4EC1B8;
	font-size: 48px;
	height: 80px;
	width: 80px;
	position: absolute;
	top: 32px;
	right: 32px;
	padding-top: 8px;
	text-align: center;
}
.content_box_title {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 15px;
}
.reception_fee {
	margin-bottom: 20px;
}
.reception_fee span {
	color: #DB0034;
	font-size: 24px;
	font-weight: 700;
	margin-left: 20px;
}
.reception_fee span span {
	font-size: 18px;
	font-weight: 400;
	margin: 0;
}
.content_text {
	margin-bottom: 15px;
}
.selfcheck {
	max-width: 317px;
	margin-bottom: 30px;
}
.repair_hr {
	border: none;
	height: 1px; /* 線の太さ */
	background: repeating-linear-gradient(
	to right,
		#8D8D8D 0, /* 線の開始地点 */
		#8D8D8D 2px, /* 線の終了地点(長さ) */
		transparent 2px, /* 透明部分の開始地点(線の後ろから) */
		transparent 7px /* 透明部分の終了地点(0から数える) */
	);
}
.content_box_gray {
	margin-top: 30px;
	background: #F8F8F8;
	padding: 15px 20px;
	border-radius: 20px;
}
.content_box_gray p {
	color: #DB0034;
}
.notes {
	margin-top: 15px;
}
.notes p {
	font-size: 13px;
	line-height: 2;
}
.case_box {
	margin-top: 20px;
}
.case{
	margin-bottom: 13px;
	line-height: 2;
}
.case_title_area {
	background: #F0EFEC;
	display: flex;
	align-items: center;
	padding: 4px 15px;
	margin-bottom: 5px;
	line-height: 2;
}
.case_title span {
	color: #DB0034;
}

/* 修理に出す前のセルフチェック */
.selfcheck_box {
	margin-bottom: 115px;
}
.selfcheck_box .content_box,
.selfcheck_box .flexbox .content_box {
	padding: 30px 40px;
	position: relative;
}
.selfcheck_box .content_box .inner_column::before,
.selfcheck_box .flexbox .content_box::before {
	content: "";
	height: 35px;
	width: 35px;
	position: absolute;
	top: 26px;
	left: 40px;
	background-image: url("../img/misin_repair/icon_repair.svg");
}
.selfcheck_box .content_box .inner_column .content_item h3,
.selfcheck_box .flexbox .content_box h3 {
	padding-left: 45px;
	font-size: 20px;
	line-height: 1.6;
	margin-bottom: 10px;
	font-weight: 700;
}
.selfcheck_box .flexbox .content_box,
.question_box .flexbox .content_box,
.inner_column .content_item {
	flex: 0 0 calc(50% - 20px); /* gapの半分を引いて幅を調整 */
	box-sizing: border-box; /* パディングやボーダーを幅計算に含む */
	margin-bottom: 0;
}
.selfcheck_box .flexbox .flex_wide {
	flex: 0 0 100%;
	box-sizing: border-box; /* パディングやボーダーを幅計算に含む */
}
.selfcheck_box .content_text{
	margin-bottom: 38px;
}
.prepare {
	margin-top: 60px;
	margin-bottom: 35px;
	display: flex;
	gap: 15px;
	align-items: center;
}
.prepare_title {
	height: 42px;
	border-radius: 30px;
	background: #A8987F;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0px 20px;
}
.selfcheck_box .flexbox,
.question_box .flexbox,
.inner_column {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}
.selfcheck_box .flexbox .content_box .content_text {
	line-height: 1.75;
}
.content_item_text {
	position: relative;
	height: auto;
	display: flex;
	align-items: flex-start;
}
.content_item_text p {
	margin-left: 25px;
	line-height: 2;
}
.content_item_text p::before{
	content: "";
	height: 15px;
	width: 15px;
	background: #4EC1B8;
	border-radius: 50%;
	position: absolute;
	top: 8px;
	left: 0;
}
.content_item_img1 {
	margin-bottom: 10px;
}
.content_item_img2 {
	margin-top: 25px;
	margin-bottom: 10px;
}
.content_item_img3 {
	margin-top: 25px;
	margin-bottom: 10px;
}
.question_box .flexbox .content_box {
	padding: 30px 40px;
}
.question_box .flexbox .content_box .content_box_title {
	display: flex;
	align-items: center;
	color: #4EC1B8;
}
.question_box .flexbox .content_box .content_box_title h3 {
	font-size: 20px;
	font-weight: 700;
	color: #4EC1B8;
}
.question_box .flexbox .content_box .content_box_title span {
	font-size: 32px;
	font-weight: 700;
	display: block;
	margin-right: 10px;
	line-height: 1;
	padding-bottom: 5px
}
.question_box .flexbox .content_box .content_text {
	padding-top: 5px;
}

/*======================
tb
======================*/
@media screen and (max-width: 1023px) {
	.flow_1::before,
	.flow_2::before,
	.flow_3::before{
		height: 60px;
		width: 60px;
		font-size: 40px;
		padding-top: 5px;
		top: 17px;
		right: 17px;
	}
	.question_box .flexbox .content_box .content_box_title {
		align-items: flex-start;
	}
	.question_box .flexbox .content_box .content_box_title h3 {
		margin-top: 5px;
	}
}

/*======================
mb
======================*/
@media screen and (max-width: 425px) {
	.repair_box .lead_title{
		font-size: 20px;
	}
	.content_title {
		font-size: 22px;
	}
	.content_box {
		padding: 30px 20px 25px;
	}
	.content_box_title {
		font-size: 18px;
	}
	.flow_1::before,
	.flow_2::before,
	.flow_3::before{
		height: 50px;
		width: 50px;
		font-size: 33px;
		top: 12px;
		right: 12px;
	}
	.reception_fee span {
		font-size: 20px;
	}
	.prepare {
		flex-direction: column;
		align-items: flex-start;
	}
	.selfcheck_box .flexbox,
	.question_box .flexbox,
	.inner_column {
		flex-direction: column;
	}
	.selfcheck_box .content_box .inner_column .content_item h3,
	.selfcheck_box .flexbox .content_box h3 {
		padding-left: 32px;
		font-size: 18px;
	}
	.selfcheck_box .content_box .inner_column {
		gap: 20px;
	}
	.selfcheck_box .content_box .inner_column::before,
	.selfcheck_box .flexbox .content_box::before {
		content: "";
		height: 30px;
		width: 30px;
		background-size: 30px 30px;
		top: 23px;
		left: 18px;
	}
	.selfcheck_box .content_box,
	.selfcheck_box .flexbox .content_box {
	padding: 25px 20px;
	}
	.content_item_img1 {
		margin-top: 20px;
	}
	.content_item_img3 {
		margin-top: 0;
	}
	.question_box .flexbox .content_box {
		height: auto;
		padding: 25px 20px;
	}
	.notes p {
		font-size: 11px;
	}

}