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

/******************************************************

PC設定 1200px以上の場合に適用

*******************************************************/

/* fv */
.fv{
	position:relative;
	margin-top:72px;
	background:var(--color-primary-deep);
	overflow:hidden;
}

.fv__ph{
	position:absolute;
	inset:0;
	background:url("/img/index/bg_hero.jpg") center center / cover no-repeat;
}

.fv__overlay{
	position:absolute;
	inset:0;
	background:linear-gradient(90deg,rgba(13,42,47,.92) 0%,rgba(13,42,47,.72) 45%,rgba(13,42,47,.15) 100%);
}

.fv__in{
	position:relative;
	max-width:1120px;
	margin:0 auto;
	padding:96px 32px 104px;
	text-align:left;
}

.fv__badge{
	display:inline-block;
	background:var(--color-primary);
	color:var(--color-white);
	font-size:13px;
	font-weight:700;
	padding:6px 16px;
	border-radius:2px;
	margin-bottom:20px;
}

.fv__title{
	color:var(--color-white);
	font-family:'Hiragino Mincho ProN','Noto Serif JP',serif;
	font-size:44px;
	font-weight:700;
	line-height:1.4;
}

.fv__title-em{
	color:var(--color-cta);
}

.fv__title-br--sp{
	display:none;
}

.fv__sub{
	margin-top:20px;
	color:var(--color-white);
	font-size:14px;
	font-weight:500;
}

.fv__sub-item{
	display:inline-block;
	padding:0 10px;
}

.fv__sub-item + .fv__sub-item{
	border-left:1px solid rgba(255,255,255,.45);
}

.fv__cta{
	margin-top:28px;
	display:flex;
	flex-direction:row;
	gap:12px;
}

.fv__cta .btn{
	min-width:260px;
}


/* trust */
.trust{
	border-bottom:1px solid var(--color-border);
}

.trust__grid{
	display:grid;
	grid-template-columns:repeat(5,1fr);
	max-width:1120px;
	margin:0 auto;
}

.trust__item{
	padding:28px 12px;
	text-align:center;
	border-right:1px solid var(--color-border);
}

.trust__item:last-child{
	border-right:none;
}

.trust__icon{
	color:var(--color-primary);
	display:flex;
	justify-content:center;
	margin-bottom:6px;
}

.trust__label{
	font-size:12px;
	color:var(--color-text-sub);
	margin-bottom:5px;
}

.trust__value{
	font-size:16px;
	font-weight:700;
	line-height:1.4;
}


/* pain */
.pain__grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:24px;
}

.pain__card{
	background:var(--color-white);
	border:1px solid var(--color-border);
	border-top:3px solid var(--color-primary);
	padding:24px;
}

.pain__card-h3{
	font-size:18px;
	font-weight:600;
	margin-bottom:8px;
}

.pain__card-txt{
	font-size:14px;
	color:var(--color-text-sub);
}


/* compare */
.compare__wrap{
	overflow-x:auto;
}

.compare__table{
	width:100%;
	min-width:640px;
	border-collapse:collapse;
	background:var(--color-white);
}

.compare__table th,
.compare__table td{
	border:1px solid var(--color-border);
	padding:16px 12px;
	text-align:center;
	font-size:14px;
	line-height:1.6;
}

.compare__table thead th{
	font-size:15px;
	vertical-align:middle;
}

.compare__h--label{
	background:var(--color-bg-alt);
	width:30%;
}

.compare__h--broker{
	background:var(--color-text-sub);
	color:var(--color-white);
	width:35%;
}

/* 当社列（us）：上下左右すべて太い緑線で囲む。
   ※ .compare__table th/td（詳細度0,1,1）に勝つよう th./td. で詳細度を上げる */
.compare__table th.compare__h--us{
	background:var(--color-primary);
	color:var(--color-white);
	width:35%;
	border:3px solid var(--color-primary);
}

/* 見出しの補足（本体15pxより2px小さく） */
.compare__h-sub{
	font-size:13px;
}

.compare__table tbody th{
	background:var(--color-bg-alt);
	font-weight:700;
	font-family:'Noto Sans JP',sans-serif;
}

.compare__table td.compare__td--us{
	color:var(--color-primary-dark);
	font-weight:700;
	background:var(--color-primary-pale);
	border-left:3px solid var(--color-primary);
	border-right:3px solid var(--color-primary);
}

.compare__table tbody tr:last-child td.compare__td--us{
	border-bottom:3px solid var(--color-primary);
}


/* reason */
.reason__grid{
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:16px;
}

.reason__card{
	background:var(--color-white);
	border:1px solid var(--color-border);
	padding:24px 14px;
	text-align:center;
}

.reason__num{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:44px;
	height:44px;
	border-radius:50%;
	background:var(--color-primary);
	color:var(--color-white);
	font-weight:700;
	font-size:18px;
	margin-bottom:12px;
}

.reason__card-h3{
	font-size:15px;
	font-weight:600;
	margin-bottom:8px;
	line-height:1.5;
}

.reason__card-txt{
	font-size:13px;
	color:var(--color-text-sub);
}


/* akiya（寝屋川市で空き家をお持ちの方へ） */
.akiya__body{
	display:flex;
	align-items:stretch;
	gap:40px;
	max-width:1000px;
	margin:0 auto;
}

.akiya__photo{
	flex:1;
	min-height:100%;
}

.akiya__photo-img{
	width:100%;
	height:100%;
	object-fit:cover;
}

.akiya__text{
	flex:1.05;
}

.akiya__txt{
	font-size:15px;
	line-height:2;
	color:var(--color-text);
}

.akiya__txt + .akiya__txt{
	margin-top:1.4em;
}


/* flow */
.flow__list{
	display:flex;
	flex-direction:row;
	align-items:stretch;
}

.flow__step{
	flex:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	background:var(--color-white);
	border:1px solid var(--color-border);
	padding:24px 12px;
	text-align:center;
}

.flow__arrow{
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0 4px;
	color:var(--color-primary);
}

.flow__num{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	border-radius:50%;
	background:var(--color-primary-deep);
	color:var(--color-white);
	font-weight:700;
	font-size:17px;
}

.flow__label{
	font-size:12px;
	color:var(--color-primary-dark);
	font-weight:700;
	letter-spacing:.08em;
	margin-bottom:10px;
}

.flow__num{
	margin-bottom:10px;
}

.flow__step-h3{
	font-size:17px;
	font-weight:600;
	margin:0 0 8px;
}

.flow__step-txt{
	font-size:13px;
	color:var(--color-text-sub);
	margin-bottom:12px;
}

.flow__badge{
	display:inline-block;
	margin-top:auto;
	font-size:12px;
	font-weight:700;
	color:var(--color-primary-dark);
	background:var(--color-primary-pale);
	border:1px solid var(--color-primary);
	padding:4px 12px;
	border-radius:999px;
}


/* target */
.target__grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:16px;
}

.target__item{
	display:flex;
	align-items:flex-start;
	gap:10px;
	background:var(--color-white);
	border:1px solid var(--color-border);
	padding:16px 18px;
	font-weight:500;
	font-size:15px;
	line-height:1.7;
}

.target__item-icon{
	flex:none;
	color:var(--color-primary);
	margin-top:4px;
}


/* voice */
.voice__grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:24px;
}

.voice__card{
	background:var(--color-white);
	border:1px solid var(--color-border);
	padding:24px;
}

.voice__head{
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:12px;
}

.voice__avatar{
	width:48px;
	height:48px;
	border-radius:50%;
	background:var(--color-primary-pale);
	color:var(--color-primary-dark);
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:700;
	font-size:18px;
	flex:none;
	border:1px solid var(--color-primary);
}

.voice__attr{
	font-size:13px;
	font-weight:700;
}

.voice__stars{
	color:var(--color-cta);
	font-size:14px;
	line-height:1;
}

.voice__txt{
	font-size:14px;
	color:var(--color-text-sub);
}


/* faq */
.faq__grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:16px;
	align-items:start;
}

.faq__item{
	background:var(--color-white);
	border:1px solid var(--color-border);
}

.faq__question{
	display:flex;
	align-items:flex-start;
	gap:10px;
	width:100%;
	background:none;
	border:none;
	text-align:left;
	padding:18px 20px;
	cursor:pointer;
	font-weight:700;
	font-size:15px;
	line-height:1.7;
	color:var(--color-text);
}

.faq__q{
	color:var(--color-primary-dark);
	flex:none;
}

.faq__toggle{
	margin-left:auto;
	flex:none;
	color:var(--color-primary);
	font-size:20px;
	line-height:1.4;
}

.faq__item.is-open .faq__toggle .plus{
	display:none;
}

.faq__item:not(.is-open) .faq__toggle .minus{
	display:none;
}

.faq__answer{
	display:none;
	gap:10px;
	padding:0 20px 18px;
	font-size:14px;
	color:var(--color-text-sub);
	line-height:1.9;
}

.faq__item.is-open .faq__answer{
	display:flex;
}

.faq__mark{
	color:var(--color-cta-dark);
	font-weight:700;
	flex:none;
}


/* form */
.form__box{
	background:var(--color-white);
	border:1px solid var(--color-border);
	padding:40px 48px;
	max-width:860px;
	margin:0 auto;
}

.form__field{
	margin-bottom:22px;
}

.form__label{
	display:flex;
	align-items:center;
	gap:8px;
	font-weight:700;
	font-size:14px;
	margin-bottom:8px;
}

.form__req{
	background:var(--color-primary);
	color:var(--color-white);
	font-size:11px;
	font-weight:700;
	padding:1px 8px;
	border-radius:2px;
}

.form__input{
	width:100%;
	border:1px solid var(--color-border);
	background:var(--color-bg-alt);
	padding:14px;
	border-radius:4px;
	font-size:16px;
}

.form__input:focus-visible{
	outline:2px solid var(--color-primary);
	outline-offset:0;
	background:var(--color-white);
}

.form__seg{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}

.form__seg-item{
	border:1px solid var(--color-border);
	border-radius:4px;
	padding:10px 16px;
	font-size:14px;
	cursor:pointer;
	background:var(--color-bg-alt);
	display:flex;
	align-items:center;
	gap:6px;
}

.form__seg-item:hover{
	border-color:var(--color-primary);
}

.form__seg-item input{
	accent-color:var(--color-primary);
	margin:0;
}

.form__seg-item input:checked + span{
	color:var(--color-primary-dark);
	font-weight:700;
}

.form__agree{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	font-size:14px;
	margin:26px 0 18px;
}

.form__agree input{
	width:18px;
	height:18px;
	accent-color:var(--color-primary);
	margin:0;
}

.form__submit{
	width:100%;
}

.form__or{
	display:flex;
	align-items:center;
	gap:16px;
	max-width:860px;
	margin:28px auto;
	color:var(--color-text-sub);
	font-size:14px;
}

.form__or::before,
.form__or::after{
	content:"";
	flex:1;
	height:1px;
	background:var(--color-border);
}

.form__line{
	max-width:860px;
	margin:0 auto;
}

.form__line .btn{
	width:100%;
}

.form__tel{
	text-align:center;
	margin-top:28px;
}

.form__tel-num{
	font-size:26px;
	font-weight:700;
	color:var(--color-text);
	display:inline-flex;
	align-items:center;
	gap:8px;
}

.form__tel-num svg{
	color:var(--color-primary);
}

.form__tel-hours{
	font-size:13px;
	color:var(--color-text-sub);
	margin-top:4px;
}


/* company */
.company__wrap{
	display:flex;
	flex-direction:row;
	align-items:flex-start;
	gap:40px;
	max-width:1000px;
	margin:0 auto;
}

.company__table{
	flex:1.4;
	width:100%;
	border-collapse:collapse;
	background:var(--color-white);
}

.company__table th,
.company__table td{
	border:1px solid var(--color-border);
	padding:16px 18px;
	font-size:14px;
	text-align:left;
	line-height:1.7;
}

.company__table th{
	background:var(--color-bg-alt);
	font-weight:700;
	width:30%;
	white-space:nowrap;
}

.company__photo{
	flex:1;
}

.company__photo-img{
	width:100%;
	aspect-ratio:4/3;
	object-fit:cover;
}

.company__photo-note{
	font-size:12px;
	color:var(--color-text-sub);
	margin-top:8px;
	text-align:center;
}




/******************************************************

タブレットの設定 960px~1199pxの場合に適用

*******************************************************/
@media screen and (max-width: 1199px){

	.fv__title{ font-size:40px; }

}




/******************************************************

タブレットの設定 768px~959pxの場合に適用

*******************************************************/
@media screen and (max-width: 959px){

	/* fv */
	.fv{ margin-top:64px; }

	.fv__overlay{
		background:linear-gradient(90deg,rgba(13,42,47,.92) 0%,rgba(13,42,47,.75) 55%,rgba(13,42,47,.35) 100%);
	}

	.fv__in{
		padding:72px 32px 80px;
		text-align:center;
	}

	.fv__title{ font-size:34px; }

	.fv__cta{
		flex-direction:column;
		max-width:420px;
		margin-left:auto;
		margin-right:auto;
	}

	.fv__cta .btn{ min-width:0; }

	/* trust */
	.trust__grid{ grid-template-columns:repeat(3,1fr); }

	.trust__item{
		border-bottom:1px solid var(--color-border);
	}

	.trust__item:nth-child(3n){ border-right:none; }

	/* pain */
	.pain__grid{ grid-template-columns:1fr 1fr; }

	/* reason */
	.reason__grid{ grid-template-columns:1fr 1fr; }

	.reason__card:last-child{
		grid-column:1/-1;
		max-width:calc(50% - 8px);
		margin:0 auto;
		width:100%;
	}

	.reason__card-h3{ font-size:17px; }

	.reason__card-txt{ font-size:14px; }

	/* flow：縦積み＋矢印を下向きに */
	.flow__list{ flex-direction:column; }

	.flow__step{ padding:24px 20px; }

	.flow__arrow{ padding:8px 0; }

	.flow__arrow svg{ transform:rotate(90deg); }

	/* target */
	.target__grid{ grid-template-columns:1fr; }

	/* voice */
	.voice__grid{ grid-template-columns:1fr 1fr; }

	.voice__card:last-child{
		grid-column:1/-1;
		max-width:calc(50% - 8px);
		margin:0 auto;
		width:100%;
	}

	/* faq */
	.faq__grid{ grid-template-columns:1fr; }

	/* form */
	.form__box{ padding:32px 24px; }

	/* company：縦積み */
	.company__wrap{ flex-direction:column; gap:24px; }

	.company__table th{ width:32%; }

}




/******************************************************

SPの設定 767px以下の場合に適用

*******************************************************/
@media screen and (max-width: 767px){

	/* fv */
	.fv__in{ padding:56px 20px 64px; }

	.fv__title{ font-size:26px; }

	.fv__title-br--sp{ display:inline; }

	.fv__sub{ font-size:13px; }

	/* trust */
	.trust__grid{ grid-template-columns:1fr 1fr; }

	.trust__item{ padding:20px 12px; }

	.trust__label{ margin-bottom:3px; }

	.trust__value{ font-size:14px; }

	.trust__item:nth-child(odd){ border-right:1px solid var(--color-border); }

	.trust__item:nth-child(even){ border-right:none; }

	.trust__item:nth-child(3n){ border-right:1px solid var(--color-border); }

	.trust__item:last-child{
		grid-column:1/-1;
		border-right:none;
	}

	/* pain */
	.pain__grid{ grid-template-columns:1fr; gap:16px; }

	/* reason */
	.reason__grid{ grid-template-columns:1fr; }

	.reason__card:last-child{
		grid-column:auto;
		max-width:none;
	}

	/* voice */
	.voice__grid{ grid-template-columns:1fr; }

	.voice__card:last-child{
		grid-column:auto;
		max-width:none;
	}

	/* form */
	.form__box{ padding:28px 18px; }

	.form__tel-num{ font-size:23px; }

	/* company */
	.company__table th{
		display:block;
		width:100%;
		border-bottom:none;
		padding-bottom:8px;
	}

	.company__table td{
		display:block;
		border-top:none;
	}


	/* akiya：SPは縦積み（画像→本文）、画像は横長バンドに */
	.akiya__body{
		flex-direction:column;
		gap:24px;
	}

	.akiya__photo-img{
		height:auto;
		aspect-ratio:16/9;
	}

	.akiya__txt{ font-size:14px; }

}

/* ── 問い合わせフォーム：インライン検証エラー ── */
.form__input.is-error{
	border-color:#d64545;
	background:#fdf4f4;
}
.form__input.is-error:focus-visible{
	outline-color:#d64545;
}
.form__error{
	color:#d64545;
	font-size:13px;
	font-weight:600;
	margin-top:6px;
}
.form__error--center{
	text-align:center;
	margin:0 0 4px;
}
.form__agree.is-error{
	color:#d64545;
}
.form__agree.is-error input{
	outline:2px solid #d64545;
	outline-offset:1px;
}