@charset "shift_jis";
:root {
	--main-color: #2d86af;
	--btn-color: #ff9c00;
	--bg-blue-color: #e6f3fa;
}
@media screen and (min-width: 769px) {
	/*--- ninibaikyakuここから ---*/
	.sale_ninibaikyaku_wrap {
		/* メイン画像 */
		.sa_main_wrap {
			height: 550px;
			background: url(../img/main_bg.webp);
			background-size: cover;
			background-position: center;
			.sa_main_inner {
				width: 1200px;
				margin: 0 auto;
				padding-top: 200px;
				>span {
					font-size: 50px;
					font-weight: bold;
					color: #fff;
					line-height: 92px;
					border-bottom: 1px solid #fff;
					display: inline;
					text-shadow: 0 0 10px rgba(54, 118, 142, 0.8);
					>b {
						font-size: 70px;
					}
				}
			}
		}
		/* 悩み */
		.nayami {
			width: 1100px;
			margin: 100px auto 120px;
			.nayami_group {
				position: relative;
				margin: 0px 0;
				ul {
					display: flex;
					justify-content: center;
					flex-wrap: wrap;
					padding: 0;
					margin: 0;
					li {
						width: 350px;
						height: 110px;
						font-size: 17px;
						font-weight: bold;
						line-height: 30px;
						border: 1px solid #bfbfbf;
						padding: 25px 0;
						box-sizing: border-box;
						list-style: none;
						border-radius: 10px;
						margin: 10px 8px;
						text-align: center;
						span {
							background: linear-gradient(transparent 60%, #ffdbde 0%);
						}
					}
				}
			}
		}
		/* 滞納したままにすると */
		.nb_arrearage_wrap {
			background-color: #0d73a2;
			position: relative;
			padding: 120px 0 100px;
			box-sizing: border-box;
			&:after {
				position: absolute;
				content: "";
				top: -15px;
				left: 0px;
				right: 0;
				margin: 0 auto;
				box-sizing: border-box;
				width: 4px;
				height: 4px;
				border: 84px solid transparent;
				border-left: 54px solid rgb(255, 255, 255);
				transform: rotate(90deg);
			}
			.nb_arr_inner {
				.nb_arr_txt {
					color: #fff;
					text-align: center;
					>h3 {
						font-size: 35px;
						line-height: 1;
					}
					>p {
						font-size: 18px;
						line-height: 30px;
						margin: 50px 0;
					}
				}
				.nb_arr_img {
					text-align: center;
				}
			}
		}
		/* 任意売却で解決 */
		.nb_solution_wrap {
			text-align: center;
			margin: 90px 0 110px;
			.nb_sol_title {
				h3 {
					font-size: 35px;
					background: linear-gradient(transparent 70%, #ffdbde 0%);
					line-height: 1.3;
					display: inline-block;
					margin: 0 0 10px;
				}
			}
			p {
				font-size: 18px;
				line-height: 35px;
				margin: 40px 0;
			}
		}
		/* 競売と任意売却の違い */
		.nb_difference_wrap {
			padding: 120px 0 0;
			.nb_dif_table {
				width: 1100px;
				margin: 0 auto;
				border: 1px solid #ccc;
				box-sizing: border-box;
				padding: 40px 50px;
				display: flex;
				justify-content: space-between;
				ul {
					padding: 0;
					margin: 0;
					li {
						list-style-type: none;
					}
				}
				/* テーブル共通 */
				.nb_dif_block {
					.komoku {
						p {
							width: 400px;
							line-height: 50px;
							text-align: center;
							color: #fff;
							font-size: 20px;
							background-color: #aaaaaa;
							margin: 0;
							font-weight: bold;
						}
					}
					.nb_dif_list {
						ul {
							li {
								padding: 40px 0;
								text-align: center;
								border-bottom: 1px dashed #ccc;
								p {
									font-size: 20px;
									line-height: 1;
									margin: 20px 0 10px;
									font-weight: bold;
								}
								span {
									font-size: 14px;
									color: #565656;
								}
							}
						}
					}
					.nb_dif_btm {
						text-align: center;
						margin-top: 30px;
						p {
							font-size: 20px;
							font-weight: bold;
							margin: 20px 0;
						}
					}
				}
				/* 違いの項目PC用 */
				.nb_dif_komoku {
					width: 80px;
					margin-top: 70px;
					li {
						text-align: center;
						margin-bottom: 70px;
						p {
							font-size: 15px;
							font-weight: bold;
							line-height: 1;
							margin-bottom: 20px;
						}
					}
				}
				/* 任意売却の内容 */
				.nini_block {
					.komoku {
						p {
							background-color: #0d73a2;
						}
					}
				}
			}
		}
		/* タイムリミット */
		.nb_limit_wrap {
			text-align: center;
			margin-bottom: 110px;
			.nb_lim_title {
				margin: 90px 0 70px;
				h3 {
					font-size: 35px;
					line-height: 1;
					margin-bottom: 30px;
					span {
						color: #f00;
						font-weight: bold;
					}
				}
				p {
					margin: 0;
					font-size: 20px;
				}
			}
			.nb_lim_img {
				margin-bottom: 60px;
			}
			.nb_lim_btm {
				.fz30 {
					font-size: 30px;
					line-height: 1;
					font-weight: bold;
					margin: 20px 0;
					span {
						background: linear-gradient(transparent 70%, #ffdbde 0%);
						line-height: 1.3;
					}
				}
				.fz35 {
					font-size: 35px;
					line-height: 1;
					font-weight: bold;
				}
			}
		}
		/* 任意売却の相談事例 */
		.salec_result_wrap {
			background-color: var(--bg-blue-color);
			padding: 110px 0 90px;
			.salec_res_list {
				ul {
					width: 1100px;
					margin: 0 auto;
					padding: 0;
					li {
						list-style-type: none;
						background-color: #fff;
						border: 3px solid #307fa9;
						border-radius: 5px;
						box-sizing: border-box;
						padding: 40px;
						margin-bottom: 30px;
						.res_list_top {
							p {
								font-size: 26px;
								font-weight: bold;
								color: #307fa9;
								margin: 20px 0;
								.res_list_number {
									display: inline-block;
									background-color: #307fa9;
									color: #fff;
									padding: 10px 20px;
									margin-right: 20px;
									font-size: 18px;
									font-weight: normal;
									line-height: normal;
								}
								.res_list_name {
									font-size: 18px;
								}
							}
						}
						.res_list_btm {
							display: flex;
							.img {
								width: 340px;
								text-align: center;
							}
							.txt {
								width: 700px;
								p {
									font-size: 16px;
									line-height: 1.5;
									margin: 20px 0;
								}
							}
						}
					}
				}
			}
		}
		/* 任意売却に関するよくある質問 */
		#sa_qa {
			padding: 0;
			.salec_qa_wrap {
				padding: 110px 0 80px;
			}
		}
		/* title */
		h2 {
			font-size: 40px;
			line-height: 40px;
			font-weight: bold;
			text-align: center;
			color: #000;
			margin: 0 0 40px;
			&.sa_conts_tit_line::after {
				content: "";
				display: block;
				width: 70px;
				height: 5px;
				background-color: #0e6e98;
				margin: 30px auto 0;
			}
		}
		/* svg */
		svg {
			margin: 0 auto;
			display: block;
			.cls-1 {
				fill: var(--main-color);
			}
		}
		/* btn */
		.btn_link {
			display: block;
			width: 80%;
			line-height: 60px;
			background-color: var(--btn-color);
			color: #fff;
			text-align: center;
			position: relative;
			margin: 0 auto 00px;
			border-radius: 5px;
			font-weight: bold;
			font-size: 18px;
			&:hover {
				opacity: .8;
			}
		}
		/* fadein（下から上） */
		.fadein {
			opacity: 0;
			transform: translateY(30px);
			transition: all 0.8s ease-out;
			&.show {
				opacity: 1;
				transform: translateY(0);
			}
			&.fadein-1 {
				transition-delay: 0.2s;
			}
			&.fadein-2 {
				transition-delay: 0.4s;
			}
			&.fadein-3 {
				transition-delay: 0.6s;
			}
			&.fadein-4 {
				transition-delay: 0.8s;
			}
			&.fadein-5 {
				transition-delay: 1.0s;
			}
			&.fadein-6 {
				transition-delay: 1.2s;
			}
		}
	}
	/*--- ninibaikyakuここまで ---*/
}
/*-------------------------------
sp
--------------------------------*/
@media screen and (max-width: 768px) {
	/*--- ninibaikyakuここから ---*/
	.sale_ninibaikyaku_wrap {
		/* メイン画像 */
		.sa_main_wrap {
			background: url(../img/main_bg.webp);
			background-size: cover;
			background-position: center;
			.sa_main_inner {
				width: 90%;
				margin: 0 auto;
				text-align: center;
				padding: 80px 0;
				>span {
					font-size: clamp(14px, 4.2vw, 16px);
					font-weight: bold;
					color: #fff;
					line-height: 30px;
					border-bottom: 1px solid #fff;
					display: inline;
					text-shadow: 0 0 10px rgba(54, 118, 142, 0.8);
					>b {
						font-size: clamp(28px, 8vw, 35px);
					}
				}
			}
		}
		/* 悩み */
		.nayami {
			width: 96%;
			margin: 0 auto;
			h2 {
				font-size: clamp(20px, 7vw, 32px);
				text-align: center;
				line-height: initial;
				margin: revert;
			}
			.nayami_group {
				position: relative;
				margin: 2px 0;
				ul {
					display: block;
					padding: 0;
					width: 90%;
					margin: 0 auto;
					li {
						width: 100%;
						font-size: clamp(14px, 4.2vw, 16px);
						font-weight: bold;
						line-height: 180%;
						border: 1px solid #bfbfbf;
						padding: 20px 10px;
						box-sizing: border-box;
						list-style: none;
						border-radius: 10px;
						margin-bottom: 15px;
						text-align: center;
						span {
							background: linear-gradient(transparent 60%, #ffdbde 0%);
						}
					}
				}
			}
		}
		/* 滞納したままにすると */
		.nb_arrearage_wrap {
			background-color: #0d73a2;
			position: relative;
			padding: 60px 0 60px;
			box-sizing: border-box;
			margin-top: 50px;
			&:after {
				position: absolute;
				content: "";
				top: -10px;
				left: 0px;
				right: 0;
				margin: 0 auto;
				box-sizing: border-box;
				width: 4px;
				height: 4px;
				border: 60px solid transparent;
				border-left: 40px solid rgb(255, 255, 255);
				transform: rotate(90deg);
			}
			.nb_arr_inner {
				.nb_arr_txt {
					color: #fff;
					text-align: center;
					>h3 {
						font-size: clamp(24px, 7vw, 30px);
						line-height: 1.5;
						letter-spacing: -1px;
						text-align: center;
					}
					>p {
						font-size: clamp(15px, 4.7vw, 18px);
						line-height: 1.8;
						margin: 30px auto 40px;
						width: 85%;
					}
				}
				.nb_arr_img {
					text-align: center;
					width: 90%;
					margin: 0 auto;
					img {
						width: 100%;
					}
				}
			}
		}
		/* 任意売却で解決 */
		.nb_solution_wrap {
			margin: 70px 0 110px;
			.nb_sol_title {
				text-align: center;
				h3 {
					font-size: clamp(24px, 7vw, 30px);
					background: linear-gradient(transparent 70%, #ffdbde 0%);
					line-height: 1.8;
					display: inline;
					margin: 0 0 10px;
				}
			}
			p {
				font-size: clamp(15px, 4.5vw, 17px);
				line-height: 1.8;
				margin: 40px auto;
				width: 85%;
			}
			.nb_sol_img {
				width: 90%;
				margin: 0 auto;
				img {
					width: 100%;
				}
			}
		}
		/* 競売と任意売却の違い */
		.nb_difference_wrap {
			padding: 120px 0 0;
			.nb_dif_table {
				width: 90%;
				margin: 0 auto;
				border: 1px solid #ccc;
				box-sizing: border-box;
				padding: 20px;
				ul {
					padding: 0;
					margin: 0;
					li {
						list-style-type: none;
					}
				}
				/* テーブル共通 */
				.nb_dif_block {
					.komoku {
						p {
							line-height: 50px;
							text-align: center;
							color: #fff;
							font-size: clamp(18px, 5.3vw, 20px);
							background-color: #aaaaaa;
							margin: 0;
							font-weight: bold;
						}
					}
					.nb_dif_list {
						display: flex;
						ul {
							li {
								padding: 20px;
								text-align: center;
								border-bottom: 1px dashed #ccc;
								height: 120px;
								p {
									font-size: clamp(18px, 5.3vw, 20px);
									line-height: 1;
									margin: 20px 0 10px;
									font-weight: bold;
								}
								span {
									font-size: clamp(12px, 3.5vw, 14px);
									color: #565656;
								}
							}
							&.sp_komoku {
								li {
									border-right: 1px dashed #ccc;
									padding: 20px 10px 20px 0;
									p {
										font-size: clamp(13px, 3.8vw, 15px);
										font-weight: normal;
									}
									img {
										width: 50px;
									}
								}
							}
						}
					}
					.nb_dif_btm {
						text-align: center;
						margin-top: 20px;
						p {
							font-size: clamp(21px, 6vw, 25px);
							font-weight: bold;
							margin: 0 0 20px;
							line-height: 1.5;
						}
						.illust {
							width: 70%;
							margin: 0 auto;
							img {
								width: 100%;
							}
						}
					}
				}
				/* 違いの項目PC用 */
				.nb_dif_komoku {
					width: 80px;
					margin-top: 70px;
					li {
						text-align: center;
						margin-bottom: 70px;
						p {
							font-size: clamp(13px, 3.8vw, 15px);
							font-weight: bold;
							line-height: 1;
							margin-bottom: 20px;
						}
					}
				}
				/* 任意売却の内容 */
				.nini_block {
					.komoku {
						p {
							background-color: #0d73a2;
						}
					}
				}
			}
		}
		/* タイムリミット */
		.nb_limit_wrap {
			text-align: center;
			margin-bottom: 110px;
			.nb_lim_title {
				margin: 90px 0 70px;
				h3 {
					font-size: clamp(28px, 8vw, 35px);
					line-height: 1.3;
					margin-bottom: 30px;
					span {
						color: #f00;
						font-weight: bold;
					}
				}
				p {
					font-size: clamp(15px, 4.7vw, 18px);
					width: 85%;
					margin: 0 auto;
					line-height: normal;
				}
			}
			.nb_lim_img {
				width: 90%;
				margin: 0 auto 0px;
				overflow: scroll;
				img {
					width: 700px;
					max-width: none;
				}
			}
			.scroll_img {
				width: 90%;
				margin: 10px auto 60px;
				img {
					width: 100%;
				}
			}
			.nb_lim_btm {
				width: 85%;
				margin: 0 auto;
				.fz30 {
					font-size: clamp(21px, 6vw, 25px);
					line-height: 1.3;
					font-weight: bold;
					span {
						background: linear-gradient(transparent 70%, #ffdbde 0%);
						line-height: 1.5;
					}
				}
				.fz35 {
					font-size: clamp(24px, 7vw, 30px);
					line-height: 1.3;
					font-weight: bold;
				}
			}
		}
		/* 任意売却の相談事例 */
		.salec_result_wrap {
			background-color: var(--bg-blue-color);
			padding: 110px 0 90px;
			.salec_res_list {
				ul {
					width: 90%;
					margin: 0 auto;
					padding: 0;
					li {
						list-style-type: none;
						background-color: #fff;
						border: 3px solid #307fa9;
						border-radius: 5px;
						box-sizing: border-box;
						padding: 30px;
						margin-bottom: 30px;
						.res_list_top {
							p {
								font-size: clamp(18px, 5.3vw, 20px);
								color: #307fa9;
								font-weight: bold;
								margin: 0 0 20px;
								line-height: normal;
								.res_list_number {
									display: block;
									background-color: #307fa9;
									color: #fff;
									padding: 10px 20px;
									margin-bottom: 20px;
									font-size: clamp(15px, 4.7vw, 18px);
									text-align: center;
									line-height: normal;
								}
								.res_list_name {
									font-size: clamp(14px, 4.2vw, 16px);
									display: block;
								}
							}
						}
						.res_list_btm {
							.img {
								text-align: center;
							}
							.txt {
								p {
									font-size: clamp(14px, 4.2vw, 16px);
									line-height: 1.5;
									margin: 20px 0;
								}
							}
						}
					}
				}
			}
		}
		/* 任意売却に関するよくある質問 */
		#sa_qa {
			padding: 0;
			.salec_qa_wrap {
				padding: 110px 0 80px;
			}
		}
		/* title */
		h2 {
			font-size: clamp(14px, 6vw, 24px);
			line-height: 1.8;
			font-weight: bold;
			text-align: center;
			color: #000;
			margin: 0 0 30px;
			&.sa_conts_tit_line::after {
				content: "";
				display: block;
				width: 70px;
				height: 5px;
				background-color: #0e6e98;
				margin: 20px auto 0;
			}
		}
		/* svg */
		svg {
			margin: 0 auto;
			display: block;
			.cls-1 {
				fill: var(--main-color);
			}
		}
		/* btn */
		.btn_link {
			display: block;
			width: 80%;
			line-height: 60px;
			background-color: var(--btn-color);
			color: #fff;
			text-align: center;
			position: relative;
			margin: 0 auto 00px;
			border-radius: 5px;
			font-weight: bold;
			font-size: clamp(15px, 4.7vw, 18px);
			&:hover {
				opacity: .8;
			}
		}
		/* fadein（下から上） */
		.fadein {
			opacity: 0;
			transform: translateY(30px);
			transition: all 0.8s ease-out;
			&.show {
				opacity: 1;
				transform: translateY(0);
			}
			&.fadein-1 {
				transition-delay: 0.2s;
			}
			&.fadein-2 {
				transition-delay: 0.4s;
			}
			&.fadein-3 {
				transition-delay: 0.6s;
			}
			&.fadein-4 {
				transition-delay: 0.8s;
			}
			&.fadein-5 {
				transition-delay: 1.0s;
			}
			&.fadein-6 {
				transition-delay: 1.2s;
			}
		}
	}
	/*--- ninibaikyakuここまで ---*/
}