@charset "shift_jis";
.sale_top_wrap{
	& h2, h3, ul, li, p {
		margin: 0;
		padding: 0;
	}
	& ul, li {
		list-style: none;
	}
	& a {
		text-decoration: none;
		color: #000000;
	}
	/*  共通  */
	.pc_off{
		display: none!important;
	}
	.moji_noto{
		font-family: "Noto Sans JP", "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
	}
	.sale_top_tit{
		font-size: clamp(35px, 2.6vw, 40px);
		line-height: 1.2;
		letter-spacing: 0.1em;
		font-weight: 900;
		text-align: center;
		position: relative;
		z-index: 0;
		&:before{
			content: "";
			display: block;
			background-repeat: no-repeat;
			background-size: contain;
			position: absolute;
			top: -75%;
			right: 0;
			left: 0;
			margin: auto;
			z-index: -1;
		}
	}
	.sale_con_btn{
		border-radius: 25px;
		border: 2px solid #ffffff;
		background: linear-gradient(to right, #fc5048, #e61f1b, #e41512);
		text-align: center;
		color: #ffffff;
		display: block;
		width: clamp(250px, 19.2vw, 300px);
		line-height: 46px;
		font-size: clamp(12px, 0.92vw, 16px);
		filter: drop-shadow(0px 5px 4px rgba(170, 170, 170, 1));
		font-weight: bold;
		position: relative;
		letter-spacing: 0.05em;
		transition: all 0.2s;
		&:hover{
			filter: none;
			transform: translate(0px, 4px);
		}
		&:after{
			content: "";
			display: block;
			width: 0;
			height: 0;
			border-top: 6px solid transparent;
			border-bottom: 6px solid transparent;
			border-left: 10px solid #ffffff;
			top: 0;
			bottom: 0;
			margin: auto;
			right: 20px;
			position: absolute;
		}
	}
	.ad_con_btn{
		border-radius: 25px;
		border: 2px solid #ffffff;
		background-color: #ffffff;
		text-align: center;
		display: block;
		width: clamp(250px, 19.2vw, 300px);
		line-height: 46px;
		font-size: clamp(13px, 1vw, 16px);
		font-weight: bold;
		position: relative;
		box-shadow: 6px 6px 0px 0px #ea3341;
		transition: all 0.2s;
		&:after {
			content: "";
			display: block;
			width: 0;
			height: 0;
			border-top: 6px solid transparent;
			border-bottom: 6px solid transparent;
			border-left: 10px solid #ea3341;
			top: 0;
			bottom: 0;
			margin: auto;
			right: 20px;
			position: absolute;
		}
		&:hover{
			box-shadow: 0px 0px 0px 0px #ea3341;
			transform: translate(4px, 4px);
		}
	}
	.swiper-container{
		overflow: hidden;
	}
	/*  メイン  */
	.main_wrap{
		background-color: #ea3341;
		.main_in{
			padding: 20px;
			display: flex;
			.main_l{
				width: 70%;
				background-image: url(/img/top/main_bg.webp);
				background-size: cover;
				background-repeat: no-repeat;
				border-radius: 40px 0px 0px 40px;
				box-sizing: border-box;
				padding: clamp(180px, 25.7vh, 210px) 0px clamp(70px, 10vh, 100px) 40px;
				overflow: hidden;
				background-position: bottom;
				position: relative;
				&:before {
					content: "";
					display: block;
					width: clamp(250px, 19.2vw, 306px);
					height: auto;
					aspect-ratio: 153 / 283;
					background-image: url(/img/top/main_per.webp);
					background-repeat: no-repeat;
					background-size: contain;
					position: absolute;
					bottom: -1px;
					right: 5px;
				}
				>h2{
					position: relative;
					z-index: 0;
					display: inline-block;
					&:before{
						content: "";
						display: block;
						width: clamp(450px, 34.6vw, 511px);
						height: auto;
						aspect-ratio: 1 / 1;
						background-image: url(/img/top/main_map.webp);
						background-repeat: no-repeat;
						background-size: contain;
						position: absolute;
						top: clamp(-230px, -28.5vh, -200px);
						right: 100px;
						z-index: -1;
					}
					>img{
						width: clamp(650px, 50vw, 841px);
					}
				}
			}
			.main_r{
				background-color: #ffd0c1;
				border-radius: 0px 40px 40px 0px;
				width: 30%;
				padding: clamp(90px, 12.8vh, 120px) 20px 20px 20px;
				.top_form{
					background-color: #ffffff;
					border-radius: 20px;
					.t_form_tit_w{
						background-color: #ea3341;
						color: #ffffff;
						text-align: center;
						box-sizing: border-box;
						padding: 23px 0px 18px 0px;
						position: relative;
						border-radius: 20px 20px 0px 0px;
						&:before{
							content: "";
							display: block;
							width: clamp(123px, 9.4vw, 153px);
							height: clamp(99px, 14.1vh, 123px);
							background-image: url(/img/top/main_cala.png);
							background-repeat: no-repeat;
							background-size: contain;
							position: absolute;
							top: clamp(-113px, -12.4vh, -87px);
							right: 0;
							left: 0;
							margin: auto;
						}
						.t_form_easy{
							font-size: clamp(12px, 0.92vw, 15px);
							line-height: 1.2;
							letter-spacing: 0.1em;
							font-weight: bold;
						}
						.t_form_satei {
							font-size: clamp(25px, 1.9vw, 30px);
							line-height: 1.2;
							letter-spacing: 0.1em;
							font-weight: bold;
							margin: 3px 0px 0px 0px;
						}
					}
					>form{
						padding: 45px 20px 50px 15px;
						box-sizing: border-box;
						text-align: left;
						.top_form_inner{
							>table{
								width: 100%;
								>tbody{
									>tr:nth-of-type(1){
										margin: 0px;
										>td{
											display: flex;
											align-items: center;
											gap: 0px 5px;
											>label {
												border: 1px solid #dddddd;
												border-radius: 5px;
												font-size: clamp(10px, 0.76vw, 14px);
												line-height: 3;
												letter-spacing: 0.05em;
												box-sizing: border-box;
												padding: 0px 0px 0px 7px;
												display: flex;
												align-items: center;
												gap: 0px 2px;
												cursor: pointer;
												>input{
													margin: 0px;
												}
												.jcjs_sf {
													appearance: none;
													-webkit-appearance: none;
													/* 古いブラウザ用 */
													width: 15px;
													height: 15px;
													border: 1px solid #f37d4f;
													/* 未選択時の枠線の色 */
													border-radius: 50%;
													outline: none;
													cursor: pointer;
													vertical-align: middle;
													margin-right: 5px;
													/* 中のドットを中央に配置するための設定 */
													display: inline-grid;
													place-content: center;
													position: relative;
												}
												/* 2. ホバー時（マウスを乗せた時）のスタイル */
												.jcjs_sf:hover {
													border-color: #999;
												}
												/* 3. 選択された（チェックがついた）時のスタイル */
												.jcjs_sf:checked {
													border-color: #fcb11f;
													/* 選択時の枠線の色（例：鮮やかな青） */
												}
												/* 4. 選択された時の「中のドット」を擬似要素で作る */
												.jcjs_sf:checked::before {
													content: "";
													width: 9px;
													height: 9px;
													border-radius: 50%;
													background-color: #fcb11f;
													position: absolute;
													top: 0;
													bottom: 0;
													left: 0;
													right: 0;
													margin: auto;
													/* 選択時の真ん中の丸の色 */
												}

											}
											>label:nth-of-type(1) {
												width: 35%;
											}
											>label:nth-of-type(2){
												width: 40%;
											}
											>label:nth-of-type(3) {
												width: 25%;
											}
										}
									}
									>tr{
										margin: clamp(10px, 1.4vh, 15px) 0px 0px 0px;
										display: flex;
										gap: 0px 15px;
										align-items: center;
										>th{
											font-size: clamp(11px, 0.84vw, 14px);
											line-height: 1.2;
											letter-spacing: 0.05em;
											white-space: nowrap;
											min-width: clamp(80px, 6.1vw, 110px);
										}
										>td{
											width: 100%;
											>input{
												border: 1px solid #dddddd;
												border-radius: 5px;
												background-color: #fff2f1;
												font-size: clamp(10px, 0.76vw, 12px);
												line-height: 3.6;
												letter-spacing: 0.05em;
												width: 100%;
												box-sizing: border-box;
												padding: 0px 0px 0px 10px;
											}
											>input::placeholder{
												color: #cbcbcb;
											}
										}
									}
								}
							}
						}
						#jc_btn_submit{
							width: 96%;
							margin: clamp(15px, 2.1vh, 20px) auto 0px auto;
							font-size: clamp(13px, 1vw, 16px);
							letter-spacing: 0.05em;
							color: #ffffff;
							background: linear-gradient(to right, #fc5048, #e61f1b, #e41512);
							border: none;
							filter: drop-shadow(0px 1.5px 3px rgba(98, 53, 99, 0.6));
							position: relative;
							height: clamp(45px, 6.4vh, 50px);
							transition: all 0.2s;
							&:hover{
								opacity: 0.8;
							}
							&:after{
								content: "";
								display: block;
								width: 0;
								height: 0;
								border-top: 7px solid transparent;
								border-bottom: 7px solid transparent;
								border-left: 10px solid #ffffff;
								top: 0;
								bottom: 0;
								margin: auto;
								right: 70px;
								position: absolute;
							}
						}
					}
				}
			}
		}
	}
	/*  エリア別不動産売却実績  */
	.area_w{
		background-color: #ea3341;
		position: relative;
		z-index: 0;
		overflow: hidden;
		&:before{
			content: "";
			display: block;
			width: calc(100% + 200px);
			aspect-ratio: 1 / 1;
			border-radius: 50%;
			height: auto;
			background-color: #ffffff;
			position: absolute;
			top: 100px;
			left: -100px;
			z-index: -1;
		}
		&:after{
			content: "";
			display: block;
			width: clamp(570px, 43.8vw, 722px);
			height: clamp(145px, 20.7vh, 183px);
			background-image: url(/img/top/area_cala1.webp);
			background-repeat: no-repeat;
			background-size: contain;
			position: absolute;
			top: 50px;
			right: 0;
			left: 0;
			margin: auto;
			z-index: 1;
		}
		.area_in{
			width: clamp(900px, 75vw, 1200px);
			margin: 0 auto;
			padding: clamp(300px, 42.8vh, 340px) 0px 0px 0px;
			.sale_top_tit{
				&:before{
					width: 659px;
					height: 125px;
					background-image: url(/img/top/result_tit_en.webp);
				}
			}
			.area_con{
				display: flex;
				margin: 60px 0px 0px 0px;
				padding: 0px 0px 10px 0px;
				gap: 0px 20px;
				align-items: flex-start;
				.area_map{
					position: relative;
					margin: 0px 0px 0px 30px;
					&:after{
						content: "";
						display: block;
						width: clamp(194px, 14.9vw, 244px);
						height: clamp(210px, 30vh, 264px);
						background-image: url(/img/top/area_cala2.webp);
						background-repeat: no-repeat;
						background-size: contain;
						position: absolute;
						bottom: clamp(20px, 2.8vh, 30px);
						left: -35px;
					}
					>img{
						width: clamp(520px, 40vw, 653px);
					}
				}
			}
			.area_btn{
				width: clamp(350px, 26.9vw,450px);
				margin: 80px 50px 0px 0px;
				>div{
					box-shadow: 0px 0px 3px 2px rgb(0 0 0 / 8%);
					border-radius: 20px;
					position: relative;
					overflow: hidden;
					box-sizing: border-box;
					&:before{
						content: "";
						width: 100%;
						height: 13px;
						background-color: #ea3341;
						position: absolute;
						top: 0px;
						left: 0;
						right: 0;
						margin: auto;
					}
					h3{
						font-size: clamp(15px, 1.15vw, 20px);
						line-height: 1.2;
						letter-spacing: 0.1em;
						font-weight: bold;
						>span{
							font-size: clamp(21px, 1.6vw, 26px);
							color: #ea3341;
						}
					}
				}
				.area_btn_kind{
					padding: 35px 20px 30px 20px;
					ul{
						display: flex;
						gap: 0px 15px;
						margin: 20px 0px 0px 0px;
						>li{
							width: calc((100% - 30px) / 3);
							>a{
								box-shadow: 0px 0px 3px 2px rgb(0 0 0 / 8%);
								border-radius: 10px;
								text-align: center;
								aspect-ratio: 1 / 1;
								height: 100%;
								display: flex;
								flex-wrap: wrap;
								align-items: center;
								justify-content: center;
								align-content: center;
								&:hover{
									>p{
										color: #ea3341;
									}
								}
								>img{
									width: clamp(60px, 4.6vw, 82px);
								}
								>p{
									font-size: clamp(13px, 1vw, 16px);
									line-height: 1.2;
									letter-spacing: 0.05em;
									font-weight: bold;
									margin: 3px 0px 0px 0px;
									width: 100%;
									transition: all 0.2s;
								}
							}
						}
					}
				}
				.area_btn_wo{
					margin: 25px 0px 0px 0px;
					padding: 35px 20px 25px 20px;
					ul{
						display: flex;
						flex-wrap: wrap;
						margin: 20px 0px 0px 0px;
						gap: 20px;
						li{
							a{
								display: flex;
								gap: 0px 8px;
								&:hover {
									>p {
										color: #ea3341;
									}
								}
								>img {
									width: clamp(15px, 1.15vw, 20px);
								}
								>p {
									font-size: clamp(13px, 1vw, 16px);
									line-height: 1.2;
									letter-spacing: 0.05em;
									font-weight: bold;
									transition: all 0.2s;
								}
							}
						}
					}
				}
			}
		}
	}
	/*  カテゴリー別不動産売却  */
	.categoly_w{
		background-color: #fcb11e;
		position: relative;
		z-index: 0;
		overflow: hidden;
		padding: clamp(200px, 28.5vh, 250px) 0px clamp(100px, 14.2vh, 120px) 0px;
		&:before {
			content: "";
			display: block;
			width: calc(100% + 200px);
			aspect-ratio: 1 / 1;
			border-radius: 0px 0px 50% 50%;
			height: auto;
			background-color: #ffffff;
			position: absolute;
			bottom: 0px;
			left: -100px;
			z-index: -1;
		}
		.categoly_in{
			width: clamp(900px, 75vw, 1100px);
			margin: 0 auto;
			position: relative;
			padding: 0px 0px 10px 0px;
			&:after {
				content: "";
				display: block;
				width: clamp(287px, 22vw, 337px);
				height: clamp(271px, 38.7vh, 319px);
				background-image: url(/img/top/category_per.webp);
				background-repeat: no-repeat;
				background-size: contain;
				position: absolute;
				top: clamp(-155px, -19.2vh, -135px);
				right: -50px;
			}
			.sale_top_tit{
				&:before{
					width: clamp(809px, 62.2vw, 919px);
					height: clamp(110px, 15.7vh, 125px);
					background-image: url(/img/top/category_tit_en.webp);
				}
			}
			>ul{
				margin: clamp(130px, 18.5vh, 160px) 0px 0px 0px;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap: 30px;
				>li{
					width: calc((100% - 90px) / 4);
					>a{
						display: block;
						box-shadow: 5px 5px 10px 0px #dddddd;
						border-radius: 20px;
						position: relative;
						transition: all 0.2s;
						&:hover{
							box-shadow: 0px 0px 0px 0px #dddddd;
							transform: translate(5px, 5px);
							&:before{
								background-image: url(/img/top/category_arrow_h.webp);
							}
						}
						&:before{
							content: "";
							display: block;
							background-repeat: no-repeat;
							background-size: contain;
							position: absolute;
							bottom: 6px;
							right: 6px;
							width: clamp(25px, 1.9vw, 35px);
							height: auto;
							aspect-ratio: 1 / 1;
							background-image: url(/img/top/category_arrow.webp);
							transition: all 0.2s;
						}
					}
				}
			}
			.sale_con_btn{
				margin: 40px auto 0px auto;
			}
		}
	}
	/*  不動産売却実績  */
	.result_w{
		background-color: #fcb11e;
		padding: clamp(170px, 24.2vh, 200px) 0px 10px 0px;
		.result_in{
			width: clamp(900px, 75vw, 1200px);
			margin: 0 auto;
			position: relative;
			z-index: 0;
			&:before {
				content: "";
				display: block;
				width: 208px;
				height: 237px;
				background-image: url(/img/top/result_cala.webp);
				background-repeat: no-repeat;
				background-size: contain;
				position: absolute;
				bottom: 10px;
				right: 50px;
				z-index: -1;
			}
			.sale_top_tit{
				z-index: -2;
				&:before{
					width: clamp(609px, 46.8vw, 659px);
					height: clamp(116px, 16.5vh, 125px);
					background-image: url(/img/top/result_tit_en.webp);
				}
			}
			>a{
				margin: 35px 0px 0px auto;
				border: none;
				line-height: 50px;
				filter: drop-shadow(0px 3px 6px rgba(136, 94, 10, 0.8));
				&:hover {
					filter: none;
				}
			}
		}
		.result_slide{
			margin: 45px 0px 0px 0px;
			>ul{
				>li{
					width: clamp(290px, 22.3vw, 320px);
					>a{
						background-color: #ffffff;
						border-radius: 20px;
						box-sizing: border-box;
						padding: 20px;
						display: block;
						&:hover{
							.result_slide_pho {
								>img {
									transform: scale(1.1);
								}
							}
						}
						.result_slide_pho{
							border-radius: 10px;
							aspect-ratio: 7 / 5;
							overflow: hidden;
							>img{
								object-fit: cover;
								width: 100%;
								height: 100%!important;
								transition: all 0.2s;
							}
						}
						.result_slide_tit{
							font-size: clamp(15px, 1.15vw, 18px);
							line-height: 1.2;
							font-weight: bold;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							margin: 10px 0px 0px 10px;
							color: #333;
						}
						.result_tag{
							width: 80%;
							margin: 8px 0px 0px 10px;
							>p{
								display: flex;
								gap: 5px;
								flex-wrap: wrap;
								>label{
									background: linear-gradient(to right, #fc5048, #e61f1b, #e41512);
									font-size: clamp(12px, 0.92vw, 15px);
									line-height: 25px;
									font-weight: bold;
									padding: 0px 15px;
									text-align: center;
									color: #ffffff;
									display: inline-block;
									border-radius: 3px;
									cursor: pointer;
								}
							}
						}
					}	
				}
			}
		}
		.result_con {
			background-color: #ffffff;
			margin: 45px auto 0px auto;
			width: calc(100% - 20px);
			>iframe {
				height: 1500px;
				width: 100%;
			}
		}
	}
	/*  家どっとgroupの強み  */
	.ad_w {
		background-color: #534748;
		margin: 50px 0px 0px 0px;
		padding: clamp(120px, 17.1vh, 150px) 0px ;
		.ad_in {
			position: relative;
			&:before {
				content: "";
				display: block;
				width: clamp(936px, 72vw, 1036px);
				height: clamp(113px, 16.1vh, 125px);
				background-image: url(/img/top/ad_tit_en.webp);
				background-repeat: no-repeat;
				background-size: contain;
				position: absolute;
				top: 0px;
				right: 0;
				left: 0;
				margin: auto;
			}
			.ad_con {
				width: clamp(900px, 75vw, 1300px);
				margin: 0 auto;
				padding: 80px 0px 0px 0px;
				display: -webkit-flex;
				display: -moz-flex;
				display: -ms-flex;
				display: -o-flex;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				position: relative;
				gap: 0px 20px;
				.ad_l {
					background-color: #ffffff;
					border-radius: 20px;
					width: clamp(550px, 42.3vw, 700px);
					box-sizing: border-box;
					padding: clamp(55px, 7.8vh, 75px) 50px clamp(40px, 5.7vh, 60px) 50px;
					>ul {
						>li {
							position: relative;
							padding: clamp(30px, 4.2vh, 50px) 0px;
							border-bottom: 2px dotted #cccccc;
							.ad_box_l {
								.ad_point_num {
									font-size: clamp(16px, 1.2vw, 19px);
									color: #ea3341;
									font-weight: 900;
									letter-spacing: 0.05em;
									line-height: 1.2;
								}
								>h3 {
									font-size: clamp(26px, 2vw, 30px);
									font-weight: bold;
									letter-spacing: 0.05em;
									line-height: 1.3;
									margin: 15px 0px 0px 0px;
									>span {
										font-size: clamp(35px, 2.6vw, 40px);
										color: #ea3341;
										position: relative;
										z-index: 0;
										&:after {
											content: "";
											display: block;
											width: 100%;
											height: 10px;
											background-color: #f1cf21;
											position: absolute;
											bottom: 3px;
											left: 0;
											right: 0;
											margin: auto;
											z-index: -1;
										}
									}
								}
								.ad_text {
									font-size: clamp(12px, 0.92vw, 16px);
									line-height: 1.5;
									letter-spacing: 0.05em;
									font-weight: bold;
									margin: 10px 0px 0px 0px;
								}
							}
							>img {
								width: clamp(130px, 10vw, 166px);
								position: absolute;
								top: clamp(30px, 4.2vh, 60px);
								right: 0;
							}
						}
						>li:first-child {
							padding: 0px 0px clamp(30px, 4.2vh, 50px) 0px;
						}
						>li:last-child {
							padding: clamp(30px, 4.2vh, 50px) 0px 0px 0px;
							border-bottom: none;
						}
					}
				}
				.ad_r {
					width: calc(100% - clamp(550px, 42.3vw, 700px) - 40px);
					max-width: 450px;
					>div {
						position: relative;
						&:after {
							content: "";
							display: block;
							width: clamp(144px, 11vw, 164px);
							height: clamp(154px, 22vh, 176px);
							background-image: url(/img/top/ad_cala.webp);
							background-repeat: no-repeat;
							background-size: contain;
							position: absolute;
							bottom: -80px;
							right: clamp(-50px, -2.6vw, -35px);
						}
						>h2 {
							font-size: clamp(30px, 2.3vw, 40px);
							letter-spacing: 0.1em;
							color: #ffffff;
							font-weight: 900;
						}
						>p {
							font-size: clamp(13px, 1vw, 16px);
							letter-spacing: 0.05em;
							color: #ffffff;
							font-weight: bold;
							margin: 15px 0px 0px 0px;
							line-height: 1.5;
						}
						.ad_con_btn {
							margin: 40px 0px 0px 0px;
						}
					}
				}
				/*--------- sticky -----------*/
				.sticky {
					position: -webkit-sticky;
					position: sticky;
					top: 200px;
					margin: 60px 0px 0px 0px;
				}
			}
		}
	}
	/*  選べる不動産売却プラン  */
	.ad_plan_con{
		width: clamp(900px, 75vw, 1100px);
		margin: clamp(120px, 17.1vh, 150px) auto 0px auto;
		.sale_top_tit{
			color: #ffffff;
			&:before{
				width: clamp(372px, 53.1vh, 432px);
				height: clamp(103px, 14.7vh, 120px);
				background-image: url(/img/top/ad_plan_tit_en.webp);
			}
		}
		>p{
			font-size: clamp(13px, 1vw, 16px);
			font-weight: bold;
			color: #ffffff;
			letter-spacing: 0.05em;
			line-height: 1.5;
			text-align: center;
			margin: 50px 0px 0px 0px;
		}
		.ad_plan_box{
			margin: 100px 0px 0px 0px;
			background-color: #ffffff;
			border-radius: 20px;
			padding: 80px 0px 30px 0px;
			>ul{
				display: flex;
				>li{
					width: calc(100% / 4);
					border-right: 2px solid #dddddd;
					text-align: center;
					position: relative;
					.ad_plan_cir{
						width: clamp(80px, 6.1vw, 100px);
						aspect-ratio: 1 / 1;
						color: #ffffff;
						border-radius: 50%;
						font-size: clamp(19px, 1.4vw, 24px);
						font-weight: bold;
						line-height: 1.2;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-wrap: wrap;
						align-content: center;
						margin: 0 auto;
						position: absolute;
						top: -130px;
						left: 0;
						right: 0;
						margin: auto;
						>span{
							font-size: clamp(13px, 1vw, 16px);
							width: 100%;
							display: inline-block;
						}
					}
					.ad_plan_text{
						font-size: clamp(13px, 1vw, 16px);
						font-weight: bold;
						letter-spacing: 0.05em;
						line-height: 1.4;
					}
					>img{
						width: clamp(100px, 7.6vw, 130px);
						margin: 10px 0px 0px 0px;
					}
					>h3{
						font-size: clamp(19px, 1.46vw, 22px);
						font-weight: bold;
						letter-spacing: 0.05em;
						line-height: 1.4;
						margin: 10px 0px 0px 0px;
					}
				}
				>li:nth-child(1){
					.ad_plan_cir{
						background-color: #478fe4;
					}
					>h3{
						color: #478fe4;
					}
				}
				>li:nth-child(2) {
					.ad_plan_cir {
						background-color: #f1cf21;
					}
					>h3 {
						color: #f1cf21;
					}
				}
				>li:nth-child(3) {
					.ad_plan_cir {
						background-color: #83ab38;
					}
					>h3 {
						color: #83ab38;
					}
				}
				>li:nth-child(4) {
					border-right: none;
					.ad_plan_cir {
						background-color: #e988b8;
					}
					>h3 {
						color: #e988b8;
					}
				}
			}
			.ad_con_btn{
				margin: 30px auto 0px auto;
				border: 2px solid #dc3c37;
				width: clamp(350px, 26.9vw, 410px);
				&:after{
					right: clamp(60px, 4.6vw, 75px);
				}
			}
		}
	}
	/*  公式YouTubeチャンネル  */
	.youtube_w{
		margin: clamp(200px, 28.5vh, 240px) 0px 0px 0px;
		.youtube_in{
			width: clamp(900px, 75vw, 1200px);
			margin: 0 auto;
			position: relative;
			&:after{
				content: "";
				display: block;
				width: clamp(182px, 14vw, 212px);
				height: clamp(200px, 28.5vh, 229px);
				background-image: url(/img/top/mov_cala.webp);
				background-repeat: no-repeat;
				background-size: contain;
				position: absolute;
				bottom: 13px;
				right: 0px;
				z-index: -1;
			}
			.youtube_in_l{
				display: flex;
				align-items: center;
				gap: 0px 25px;
				position: relative;
				padding: 0px 0px 0px clamp(25px, 1.9vw, 30px);
				&:before{
					content: "";
					display: block;
					background-repeat: no-repeat;
					background-size: contain;
					position: absolute;
					top: -75%;
					left: 0;
					z-index: -1;
					width: clamp(446px, 34.3vw, 536px);
					height: clamp(104px, 14.8vh, 125px);
					background-image: url(/img/top/mov_tit_en.webp);
				}
				>img{
					width: clamp(50px, 3.8vw, 80px);
				}
			}
			>a{
				margin: 0px 0px 0px auto;
				border: none;
				line-height: 50px;
				filter: drop-shadow(0px 3px 3px rgba(123, 0, 0, 0.8));
				&:hover{
					filter: none;
				}
			}
		}
		.youtube_slide{
			margin: 20px 0px 0px 0px;
			>ul{
				>li{
					width: clamp(340px, 26.1vw, 390px);
					box-sizing: border-box;
					padding: 20px;
					border-radius: 20px;
					background-color: #f6f6f6;
					position: relative;
					&:hover {
						>div {
							>iframe {
								transform: scale(1.1);
							}
						}
					}
					>a{
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						width: clamp(340px, 26.1vw, 390px);
						height: 240px;
						z-index: 999;
					}
					>div {
						border-radius: 10px;
						width: 100%;
						height: auto;
						aspect-ratio: 175 / 99;
						border-radius: 10px;
						overflow: hidden;
						>iframe {
							width: 100%;
							height: 200px;
							transition: all 0.2s;
						}
					}
				}
			}
		}
	}
	/*  不動産売却コラム  */
	.column_w{
		margin: clamp(100px, 14.2vh, 120px) 0px 0px 0px;
		overflow: hidden;
		background: linear-gradient(to right, #fc5048, #e61f1b, #e41512);
		position: relative;
		&:after{
			content: "";
			display: block;
			background-repeat: no-repeat;
			background-size: contain;
			position: absolute;
			bottom: 2px;
			right: calc(50% + 90px);
			width: clamp(191px, 14.6vw, 201px);
			height: clamp(206px, 29.4vh, 218px);
			background-image: url(/img/top/column_cala.webp);
		}
		.column_in{
			width: clamp(900px, 75vw, 1200px);
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			padding: clamp(80px, 11.4vh, 100px) 0px clamp(65px, 9.2vh, 80px) 0px;
			position: relative;
			&:before{
				content: "";
				display: block;
				background-repeat: no-repeat;
				background-size: contain;
				position: absolute;
				top: 0;
				bottom: 0;
				margin: auto;
				left: clamp(-125px, -8vw, -104px);
				width: clamp(112px, 8.6vw, 125px);
				height: clamp(654px, 93.4vh, 732px);
				background-image: url(/img/top/column_tit_en.webp);
			}
			.column_l{
				margin: clamp(50px, 7.1vh, 65px) 0px 0px 0px;
				>h2{
					font-size: clamp(35px, 2.6vw, 40px);
					line-height: 1.2;
					letter-spacing: 0.1em;
					font-weight: 900;
					color: #ffffff;
				}
				>p{
					font-size: clamp(13px, 1vw, 16px);
					line-height: 1.5;
					letter-spacing: 0.05em;
					font-weight: bold;
					color: #ffffff;
					margin: 20px 0px 0px 10px;
				}
				>a{
					box-shadow: 6px 6px 0px 0px #b52e29;
					margin: 30px 0px 0px 0px;
					transition: all 0.2s;
					&:hover{
						box-shadow: 0px 0px 0px 0px #b52e29;
					}
				}
			}
			.column_r{
				width: clamp(540px, 41.5vw, 660px);
				>li{
					margin: 25px 0px 0px 0px;
					>a{
						display: flex;
						background-color: #ffffff;
						border-radius: 10px;
						box-sizing: border-box;
						padding: clamp(25px, 1.9vw, 30px);
						box-shadow: 6px 6px 0px 0px #b52e29;
						gap: 0px 30px;
						position: relative;
						transition: all 0.2s;
						&:hover{
							box-shadow: 0px 0px 0px 0px #b52e29;
							transform: translate(3px, 3px);
						}
						&:after{
							content: "";
							display: block;
							background-repeat: no-repeat;
							background-size: contain;
							position: absolute;
							bottom: 8px;
							right: 8px;
							width: clamp(25px, 1.9vw, 35px);
							height: auto;
							aspect-ratio: 1 / 1;
							background-image: url(/img/top/column_arrow.webp);
						}
						.column_box_l{
							width: clamp(150px, 11.5vw, 180px);
							border-radius: 10px;
							flex-shrink: 0;
							overflow: hidden;
							aspect-ratio: 4 / 3;
							>img{
								width: 100%;
								height: 100%!important;
								object-fit: cover;
							}
						}
						.column_box_r{
							margin: 10px 0px 0px 0px;
							width: calc(100% - clamp(150px, 11.5vw, 180px) - 30px);
							.column_box_r_tit{
								font-size: clamp(15px, 1.15vw, 18px);
								line-height: 1.2;
								font-weight: bold;
								letter-spacing: 0.05em;
								overflow: hidden;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 3;
							}
							.column_tag{
								width: 80%;
								margin: 8px 0px 0px 0px;
								>p {
									display: flex;
									gap: 5px;
									flex-wrap: wrap;
									>label {
										font-size: clamp(10px, 0.76vw, 12px);
										line-height: 17px;
										font-weight: bold;
										padding: 0px 12px;
										text-align: center;
										color: #dc3c36;
										display: inline-block;
										border-radius: 3px;
										border: 2px solid #dc3c36;
										box-sizing: border-box;
										background-color: #fff0f1;
										letter-spacing: 0.05em;
										cursor: pointer;
										&:not(:nth-of-type(-n + 10)) {
											display: none;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
	/*  スタッフ紹介  */
	.staff_w{
		margin: clamp(180px, 25.7vh, 200px) 0px 0px 0px;
		.staff_in{
			display: flex;
			width: clamp(900px, 75vw, 1200px);
			margin: 0 auto;
			justify-content: space-between;
			align-items: center;
			.sale_top_tit{
				&:before{
					width: clamp(419px, 32.2vw, 519px);
					height: clamp(100px, 14.2vh, 125px);
					background-image: url(/img/top/staff_tit_en.webp);
				}
			}
			.staff_r{
				.staff_r_b{
					font-size: clamp(25px, 1.9vw, 30px);
					line-height: 1.5;
					letter-spacing: 0.05em;
					font-weight: bold;
					>span{
						color: #dc3c36;
					}
				}
				.staff_r_s {
					font-size: clamp(13px, 1vw, 16px);
					line-height: 1.5;
					letter-spacing: 0.05em;
					font-weight: bold;
					margin: 10px 0px 0px 0px;
				}
			}
		}
		.staff_slide{
			margin: 50px 0px 0px 0px;
			>ul{
				>li{
					width: clamp(250px, 19.2vw, 300px);
					>a{
						display: block;
						position: relative;
						padding: 0pc 0pc clamp(25px, 3.5vh, 35px) 0px;
						&:hover{
							.staff_pho_box_in{
								>img{
									transform: scale(1.1);
								}
							}
						}
						&:after{
							content: "";
							display: block;
							background-repeat: no-repeat;
							background-size: contain;
							position: absolute;
							bottom: 0px;
							right: 0px;
							width: clamp(25px, 1.9vw, 35px);
							height: auto;
							aspect-ratio: 1 / 1;
							background-image: url(/img/top/column_arrow.webp);
						}
						.staff_pho_box_w{
							position: relative;
							.staff_pho_box_in {
								overflow: hidden;
								aspect-ratio: 15 / 19;
								>img {
									width: 100%;
									height: 100% !important;
									object-fit: cover;
									transition: all 0.2s;
								}
							}
							.staff_name{
								position: absolute;
								bottom: 0;
								right: -1px;
								background-color: #ffffff;
								border-radius: 20px 0px 0px 0px;
								box-sizing: border-box;
								padding: 15px 15px 5px 15px;
								width: clamp(135px, 10.3vw, 165px);
								>p{
									font-size: clamp(17px, 1.3vw, 20px);
									line-height: 1.2;
									letter-spacing: 0.05em;
									font-weight: bold;
								}
								.staff_tag{
									margin: 5px 0px 0px 0px;
									background-color: #ea3341;
									font-size: clamp(10px, 0.76vw, 12px);
									line-height: 21px;
									font-weight: bold;
									padding: 0px 7px;
									text-align: center;
									color: #ffffff;
									display: inline-block;
									border-radius: 3px;
									letter-spacing: 0.05em;
									cursor: pointer;
								}
							}
						}
						>p{
							font-size: clamp(11px, 0.84vw, 14px);
							line-height: 1.6;
							letter-spacing: 0.05em;
							font-weight: bold;
							margin: 20px 0px 0px 0px;
							>span{
								overflow: hidden;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
							}
						}
					}
				}
				>li:nth-child(2n+1){
					.staff_pho_box_in{
						border-radius: 135px;
					}
				}
				>li:nth-child(2n){
					margin: 40px 0px 0px 0px;
					.staff_pho_box_in {
						border-radius: 20px;
					}
				}
			}
		}
		.ad_con_btn{
			margin: clamp(35px, 5vh, 45px) auto 0px auto;
			border: 2px solid #dc3c37;
		}
	}
	/*  家どっとGroupについて  */
	.about_w{
		margin: clamp(150px, 21.4vh, 200px) 0px 0px 0px;
		background-color: #fff3ee;
		box-sizing: border-box;
		padding: clamp(120px, 17.1vh, 150px) 0px clamp(80px, 11.4vh, 100px) 0px;
		.about_in{
			width: clamp(900px, 75vw, 1200px);
			margin: 0 auto;
			.about_intro{
				.sale_top_tit{
					color: #ea3341;
					&:before{
						width: clamp(781px, 60vw, 881px);
						height: clamp(110px, 15.7vh, 125px);
						background-image: url(/img/top/abou_tit_en.webp);
					}
				}
				>p{
					font-size: clamp(13px, 1vw, 16px);
					line-height: 1.5;
					letter-spacing: 0.05em;
					font-weight: bold;
					margin: 25px 0px 0px 0px;
					text-align: center;
					z-index: 2;
					position: relative;
				}
			}
			.about_box_w{
				margin: clamp(40px, 5.7vh, 50px) 0px 0px 0px;
				display: flex;
				gap: 0px clamp(65px, 5vw, 80px);
				position: relative;
				z-index: 0;
				&:before{
					content: "";
					display: block;
					background-repeat: no-repeat;
					background-size: contain;
					position: absolute;
					top: clamp(-200px, -22.8vh, -160px);
					left: 20px;
					width: clamp(187px, 14.3vw, 237px);
					height: clamp(204px, 29.1vh, 258px);
					background-image: url(/img/top/about_cala1.webp);
					z-index: -1;
				}
				&:after {
					content: "";
					display: block;
					background-repeat: no-repeat;
					background-size: contain;
					position: absolute;
					top: clamp(-200px, -22.4vh, -157px);
					right: 20px;
					width: clamp(184px, 14.1vw, 234px);
					height: clamp(200px, 28.5vh, 254px);
					background-image: url(/img/top/about_cala2.webp);
					z-index: -1;
				}
				>li{
					width: calc((100% - clamp(65px, 5vw, 80px)) / 2);
					background-color: #ea3341;
					border-radius: 10px;
					box-sizing: border-box;
					padding: 20px;
					>img{
						border-radius: 10px;
					}
					.about_box_btm{
						background-color: #ffffff;
						border-radius: 10px;
						margin: 10px 0px 0px 0px;
						box-sizing: border-box;
						padding: 30px 20px 15px 20px;
						.about_box_com{
							display: flex;
							gap: 0px 40px;
							align-items: center;
							>p{
								font-size: clamp(20px, 1.5vw, 24px);
								line-height: 1.5;
								letter-spacing: 0.05em;
								font-weight: bold;
							}
							>a{
								display: block;
								font-size: clamp(10px, 0.76vw, 12px);
								line-height: 1.5;
								letter-spacing: 0.05em;
								font-weight: bold;
								color: #ffffff;
								position: relative;
								border-radius: 3px;
								line-height: 21px;
								box-sizing: border-box;
								padding: 0px 15px 0px 25px;
								transition: all 0.2s;
								&:before{
									content: "";
									display: block;
									width: 0;
									height: 0;
									border-top: 3.5px solid transparent;
									border-bottom: 3.5px solid transparent;
									border-left: 5px solid #ffffff;
									top: 0;
									bottom: 0;
									margin: auto;
									left: 15px;
									position: absolute;
								}
							}
						}
						.about_box_ad{
							font-size: clamp(13px, 1vw, 16px);
							line-height: 1.2;
							letter-spacing: 0.05em;
							font-weight: bold;
							margin: 10px 0px 0px 0px;
						}
						.about_box_info{
							font-size: clamp(13px, 1vw, 16px);
							line-height: 1.7;
							letter-spacing: 0.05em;
							font-weight: bold;
							margin: 10px 0px 0px 0px;
						}
					}
				}
				>li:nth-child(1){
					.about_box_com{
						>a{
							background-color: #f37d4f;
							&:hover{
								background-color: #a072a1;
							}
						}
					}
				}
				>li:nth-child(2) {
					.about_box_com {
						>a {
							background-color: #a072a1;
							&:hover {
								background-color: #f37d4f;
							}
						}
					}
				}
			}
			.ad_con_btn{
				margin: clamp(60px, 8.5vh, 80px) auto 0px auto;
				border: 2px solid #dc3c37;
			}
		}
	}
}


/* 1. .jcjs_sf がついた入力欄（氏名・メール・電話番号）のフォーカス時の黒枠を消す */
input.jcjs_sf:focus {
	outline: none !important;
	border-color: #ccc !important;
	/* フォーカス時も初期状態（グレーなど）の枠線をキープ */
}
/* 2. .fo_err がついた入力欄（郵便番号）のフォーカス時の黒枠を消す */
input.fo_err:focus {
	outline: none !important;
	border-color: #ccc !important;
}

.container_100{
	position: relative;
}
#jsp{
	position: absolute;
	bottom: 0;
	font-size: 12px;
	font-weight: bold;
}
footer{
	padding: 0px 0px 20px 0px;
}