@charset "shift_jis";
@media screen and (min-width: 769px) {
	/*--- 事故物件ここから ---*/
	.sale_incident_wrap {
		/* メイン画像 */
		.sa_main {
			background-image: url(../img/main_bg.webp);
		}
		/* お悩み */
		.sa_worries_useimg li:nth-child(1) {
			margin: 0 0 0 155px;
		}
		.sa_worries_useimg li:nth-child(2) {
			margin: 0 155px 0 0;
		}
		.sa_worries_useimg li:nth-child(3) {
			margin: 0 200px 0 0;
		}
		.sa_worries_useimg li:nth-child(4) {
			margin: 0 0 0 200px;
		}
		.sa_worries_useimg li:nth-child(5) {
			margin: 0 0 0 50px;
		}
		.sa_worries_useimg li:nth-child(6) {
			margin: 0 50px 0 0;
		}
		.sa_worries_useimg .my_svg {
			width: 330px;
			margin: auto;
			position: absolute;
			bottom: 35px;
			right: 0;
			left: 0;
			z-index: -1;
		}
		/* ご相談ください */
		#sa_inci_please {
			width: 100%;
			background: #f2efe8;
			>div {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				width: 1100px;
				margin: 0 auto;
				padding: 75px 0 0 0;
				>div {
					max-width: 700px;
				}
				>div h2 {
					width: 570px;
					box-sizing: border-box;
					margin: 0 0 35px 0;
					padding: 10px 0 10px 15px;
					background: #FFF;
					font-size: 23px;
					line-height: 35px;
					font-weight: 500;
					letter-spacing: 0.12em;
					position: relative;
				}
				>div h2:after {
					content: "";
					display: block;
					width: 36px;
					height: 24px;
					clip-path: polygon(0 0, 100% 0%, 50% 100%);
					background: #FFF;
					position: absolute;
					bottom: -24px;
					left: 40px;
				}
				>div p {
					padding: 0 0 0 40px;
					font-size: 35px;
					line-height: 60px;
					color: #333;
					letter-spacing: 0.1em;
					font-feature-settings: "palt";
				}
				.my_svg {
					width: 390px;
				}
			}
		}
		/* 事故物件とは */
		#sa_inci_about {
            margin: 75px auto 100px auto;
            width: 1100px;
            border: solid 4px #b3a371;
            box-sizing: border-box;
            padding: 0px 0px 50px 0px;
			>p.sa_conts_txt {
				margin: 0 0 70px 0;
				text-align: center;
			}
			& h2{
            line-height: 50px;
            text-align: center;
            font-size: 35px;
            font-weight: bold;
            text-align: center;
            color: #fff;
            background-color: #b3a371;
            margin: 0px 0px 40px 0px;
            padding: 20px 0px;
			}
			& span{
				color: #b3a371;
			}
			.sa_inci_ab_ex {
				width: 800px;
				margin: 0 auto;
				position: relative;
				&:not(:last-of-type) {
					margin-bottom: 50px;
				}
				& h3 {
					width: 450px;
					box-sizing: border-box;
					margin: auto;
					padding: 5px 0;
					border: 1px solid #FFF;
					font-size: 23px;
					line-height: 40px;
					text-align: center;
					position: absolute;
					top: -26px;
					left: 0;
					right: 0;
				}
				>ul {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					gap: 0 24px;
					>li {
						display: flex;
						align-items: center;
						gap: 0 8px;
					}
					>li:before {
						content: "";
						width: 4px;
						height: 4px;
						border-radius: 50%;
						background: #333;
					}
				}
			}
			.sa_inci_ab_need {
				border: 3px solid #c80000;
				& h3 {
					background: #ffdbde !important;
					color: #c80000;
				}
				>div {
					display: flex;
					justify-content: space-between;
					padding: 15px 20px 5px 20px;
					border-bottom: 3px solid #c80000;
					>p.sa_conts_txt {
						margin: 20px 0 0 0;
					}
					>div {
						text-align: center;
						.my_svg {
							display: block;
							width: 105px;
							margin: 0 0 3px 0;
						}
						>p {
							font-size: 14px;
							line-height: 20px;
						}
					}
				}
				>ul {
					padding: 40px 0;
				}
			}
			.sa_inci_ab_noneed {
				border: 3px solid #0d73a2;
				& h3 {
					background: #e6f3fa !important;
					color: #0d73a2;
				}
				>ul {
					padding: 55px 0 40px 0;
				}
			}
		}
		/* メリット */
		#sa_inci_merit {
			& ul {
				display: flex;
				justify-content: space-between;
				width: 1100px;
				margin: 0 auto 75px auto;
				padding: 35px 0 0 0;
				& li {
					width: 264px;
					box-sizing: border-box;
					padding: 55px 0 20px 0;
					background: #f2efe8;
					border: 3px solid #b3a371;
					border-radius: 10px;
					position: relative;
					& h3 {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 230px;
						height: 70px;
						margin: auto;
						background: #b3a371 !important;
						border-radius: 10px;
						font-size: 22px;
						line-height: 30px;
						color: #FFF;
						text-align: center;
						position: absolute;
						top: -35px;
						left: 0;
						right: 0;
					}
					& div {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 155px;
						height: 155px;
						margin: 0 auto 15px auto;
						background: #FFF;
						border-radius: 50%;
					}
					.my_svg {
						width: 106px;
					}
					& p {
						padding: 0 15px;
						font-size: 16px;
						line-height: 24px;
					}
				}
			}
		}
    /* fadein（下から上） */
	#sa_qa{
		background-image: url(/sale_syakuchi/img/riyu_bg.jpg) !important;
	}
	.qa_list{
            border: solid 4px #b3a371;
			border-radius: 0px;
	}
		.qa_list .title:before{
			-webkit-mask-image: url(/sale_incident/img/q_icon.svg) !important;
			mask-image: url(/sale_incident/img/q_icon.svg) !important;
	}
	.qa_list dd:before{
			-webkit-mask-image: url(/sale_incident/img/a_icon.svg) !important;
			mask-image: url(/sale_incident/img/a_icon.svg) !important;
	}
    .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;
      }
    }
	}
	/*--- 事故物件ここまで ---*/
}




/*-------------------------------
	sp
--------------------------------*/


@media screen and (max-width: 768px) {
	/*--- 事故物件ここから ---*/
	.sale_incident_wrap {
		/* メイン画像 */
		.sa_main {
			background-image: url(../img/main_bg.webp);
		}
		/* ご相談ください */
		#sa_inci_please {
			width: 100%;
			padding: 30px 0 30px 0;
			background: #f2efe8;
			>div {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				width: fit-content;
				margin: 0 auto;
				padding: 0 0 0 0;
				>div h2 {
					width: fit-content;
					box-sizing: border-box;
					margin: 0 auto 20px auto;
					padding: 10px 15px 10px 15px;
					background: #FFF;
					font-size: clamp(16px, 4.2vw, 18px);
					line-height: 1.5;
					font-weight: 500;
					letter-spacing: 0.12em;
					position: relative;
				}
				>div h2:after {
					content: "";
					display: block;
					width: 18px;
					height: 10px;
					clip-path: polygon(0 0, 100% 0%, 50% 100%);
					background: #FFF;
					position: absolute;
					bottom: -10px;
					left: 20px;
				}
				>div p {
					font-size: clamp(20px, 5.3vw, 22px);
					line-height: 1.8;
					color: #333;
					letter-spacing: 0.1em;
					font-feature-settings: "palt";
				}
				.my_svg {
					display: none;
				}
			}
		}
		/* 事故物件とは */
		#sa_inci_about {
                width: 90%;
                margin: auto;
                border: solid 4px #b3a371;
                background-color: #fff;
				padding-bottom: 30px;
			margin: 40px auto 40px auto;
			>p.sa_conts_txt {
				margin: 0 4% 30px 4%;
			}
			& h2{
				            font-size: 20px;
            font-weight: bold;
            text-align: center;
            color: #fff;
            background-color: #b3a371;
            margin: 0px 0px 40px 0px;
            padding: 20px 0px;
			}
			& span{
				color: #b3a371;
			}
			.sa_inci_ab_ex {
                padding: 15px 15px 0 15px;
                width: 90%;
                box-sizing: border-box;
                margin: auto;
				&:not(:last-of-type) {
					margin-bottom: 20px;
				}
				& h3 {
					box-sizing: border-box;
					margin: auto;
					padding: 10px 0;
					border: 1px solid #FFF;
					font-size: clamp(18px, 4.8vw, 20px);
					line-height: 1.6;
					text-align: center;
				}
				>ul {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					gap: 0 24px;
					padding: 15px 0;
					>li {
						display: flex;
						align-items: center;
						gap: 0 8px;
					}
					>li:before {
						content: "";
						width: 4px;
						height: 4px;
						border-radius: 50%;
						background: #333;
					}
				}
			}
			.sa_inci_ab_need {
                border: 3px solid #c80000;
                width: 90%;
                box-sizing: border-box;
                margin: auto;
				& h3 {
					background: #ffdbde !important;
					color: #c80000;
				}
				>div {
					padding: 15px 0;
					border-bottom: 2px solid #c80000;
					>p.sa_conts_txt {
						width: fit-content;
						margin: 15px auto 0 auto;
					}
					>div {
						display: flex;
						justify-content: center;
						gap: 20px;
						>div {
							text-align: center;
						}
						.my_svg {
							display: inline-block;
							width: 105px;
							margin: 0 0 3px 0;
						}
						>p {
							font-size: clamp(14px, 3.7vw, 16px);
							line-height: 1.8;
						}
					}
				}
			}
			.sa_inci_ab_noneed {
				border: 3px solid #0d73a2;
				& h3 {
					background: #e6f3fa !important;
					color: #0d73a2;
				}
			}
		}
		/* メリット */
		#sa_inci_merit {
			& ul {
				display: flex;
				flex-wrap: wrap;
				gap: 10px;
				width: 90%;
				margin: 0 auto 30px auto;
				padding: 0 0 0 0;
				& li {
					width: calc((100% - 10px)/2);
					box-sizing: border-box;
					padding: 10px;
					background: #f2efe8;
					border: 2px solid #b3a371;
					border-radius: 5px;
					& h3 {
						display: flex;
						align-items: center;
						justify-content: center;
						height: 50px;
						margin: 0 auto 10px auto;
						background: #b3a371 !important;
						border-radius: 4px;
						font-size: clamp(14px, 3.7vw, 16px);
						line-height: 1.3;
						color: #FFF;
						text-align: center;
					}
					& div {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 100px;
						height: 100px;
						margin: 0 auto 10px auto;
						background: #FFF;
						border-radius: 50%;
					}
					.my_svg {
						width: 70px;
					}
					& p {
						font-size: clamp(12px, 3.2vw, 14px);
						line-height: 1.5;
					}
				}
			}
		}
    /* 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;
      }
    }
	}
	/*--- 事故物件ここまで ---*/
		#sa_qa{
		background-image: url(/sale_syakuchi/img/riyu_bg.jpg) !important;
	}
		.qa_list{
            border: solid 4px #b3a371;
			border-radius: 0px;
	}
	.qa_list .title:before{
			-webkit-mask-image: url(/sale_incident/img/q_icon.svg) !important;
			mask-image: url(/sale_incident/img/q_icon.svg) !important;
	}
	.qa_list dd:before{
			-webkit-mask-image: url(/sale_incident/img/a_icon.svg) !important;
			mask-image: url(/sale_incident/img/a_icon.svg) !important;
	}
	.sa_conts_tit{
		font-weight: bold;
	}
}

#sa_point{
	background: #f2efe8 !important;
}
.sa_font_color{
	color: #b3a371 !important;
}
.sale_contents {
	h3{
		background-color: #f2efe8 !important;
	}
}
.sale_incident_wrap{
        font-family: Noto Sans JP, sans-serif;
}
.svg_color_dark{
	fill: #c8bc8c !important;
}
.svg_color_light {
	fill: #ded6b9 !important;
}
.svg_color_morelight{
	fill: #ded6b9 !important;
}
span{
	font-weight: bold;
}