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

section {
	padding-block: 0px 8vh;
}

.inner_wrap {
	max-width: 1000px;
	padding-block: 6vh;
}

/* ---------------------------------------------
ヒーロー
--------------------------------------------- */
.hero {
	background: url("../images/urgent/fv_back.jpg");
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: right center;
	max-height: 80vh;
	height: auto;
	padding-block: 0px;
	display: flex;
	align-items: center;
	position: relative;
	&::before {
		content: '';
		background: linear-gradient(to right,#FFFFFF 50%,#E4E1EDcc 60%,#FFFFFF00 100%);
		display: inline-block;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
		position: absolute;
		
	}
}

.hero_inner {
	max-width: 1300px;
	width: 90%;
	margin: 0px auto;
	z-index: 1;
}

.hero_catch {
	max-width: 730px;
	width: auto;
	padding: 6vh 1rem;
}

.about_sougi {
	background: #3B4983;
	padding-block: 6vh;
}

.about_sougi_inner {
	max-width: 1000px;
	width: 90%;
	margin: 0px auto;
	& > * {
		color: #FFF;
		text-align: center;
	}
}

.about_ttl {
	font-size: clamp(40px,5vw,56px);
	font-weight: 600;
}

.about_txt {
	font-size: clamp(16px,2vw,20px);
	margin-block: 3vh;
}

.about_tel {
	font-size: clamp(20px,3vw,32px);
	font-weight: 500;
	& > span {
		color: #FFEB00;
	}
}


/* ---------------------------------------------
ご依頼の流れ
--------------------------------------------- */
.urgent_txt {
	font-size: clamp(16px,2vw,20px);
	text-align: center;
	line-height: 160%;
	span {
		color: #FC3D3D;
	}
}

.flow_ttl {
	background: var(--bg-gradient-purple-moz);
	background: var(--bg-gradient-purple-webkit);
	background: var(--bg-gradient-purple);
	color: #FFF;
	font-size: clamp(24px,3vw,32px);
	padding: 8px 10px;
	text-align: center;
	width: 100%;
}

.flow_wrap {
	background: #FFF;
	border: 1px solid #DBDBDB;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	position: relative;
	margin-bottom: 10vh;
	&:last-of-type {
		margin-bottom: 0px;
		&:after {
			display: none;
		}
	}
	&::after {
		content: '';
		background: url("../images/common/arrow_big_bottom.svg");
		background-repeat: no-repeat;
		background-size: contain;
		display: inline-block;
		width: 43px;
		height: 48px;
		bottom: -8vh;
		position: absolute;
	}
}

.flow_inner {
	padding: 2rem;
	&.half_box {
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
		align-items: center;
		gap: 1rem 2rem;
		width: 100%;
	}
}

.flow_tel {
	max-width: 580px;
	width: 100%;
	margin: 4vh auto 3vh;
	font-size: clamp(16px,2vw,20px);
	dt {
		background: #FFF471;
		color: #C73A3A;
		font-weight: 500;
		text-align: center;
		padding: 6px 10px;
	}
	dd {
		padding: 1rem 2rem;
		background: #F4F2F2;
		.flow_tel_list {
			max-width: 350px;
			width: 100%;
			margin: 0px auto;
		}
	}
}

.flow_cta {
	max-width: 900px;
	width: 90%;
	margin: 0px auto;
}

.sougi_flow {
	margin-block: 8vh 0px;
}

.sougi_inner {
	position: relative;
	&::after {
		content: '';
		background: url("../images/urgent/arrow_flow.svg");
		background-repeat: no-repeat;
		background-size: contain;
		display: inline-block;
		width: 26px;
		height: 23px;
		left: 50%;
		transform: translateX(-50%);
		position: relative;
		margin-block: 1vh;
	}
	.step_num {
		color: var(--primary-dark);
		font-size: clamp(24px,3vw,32px);
		font-weight: 600;
	}
	& > dl {
		display: grid;
		grid-template-columns: 40% 60%;
		align-items: stretch;
		overflow: hidden;
		border-radius: 10px;
		position: relative;
		& > * {
			padding: 3vh;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			min-height: 140px;
		}
		& > dt {
			background: var(--bg-gradient-purple-moz);
			background: var(--bg-gradient-purple-webkit);
			background: var(--bg-gradient-purple);
			font-size: clamp(20px,2vw,26px);
			font-weight: 600;
			justify-content: center;
			color: #FFF;
		}
		& > dd {
			font-size: clamp(15px,1.8vw,18px);
			font-weight: 500;
			background: #F8F8F8;
			line-height: 160%;
			.sougi_note {
				background: var(--primary-light);
				color: #FFF;
				border-radius: 30px;
				display: flex;
				justify-content: center;
				padding: 4px 2rem;
				font-size: clamp(14px,1.6vw,16px);
			}
		}
	}
}

section#pay .flow_wrap {
	margin-bottom: 0px;
	&::after {
		display: none;
	}
}

.pay_method {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5px 1em;
	li {
		font-size: clamp(15px,1.8vw,18px);
		font-weight: 500;
		display: flex;
		align-items: center;
		&::before {
			content: '●';
			font-size: 10px;
			margin-right: 5px;
		}
	}
}

.pay_img {
	max-width: 500px;
	width: 90%;
	margin: 1rem auto;
}

.pay_memo {
	font-size: clamp(15px,1.8vw,18px);
	font-weight: 500;
	text-indent: -1em;
	margin-left: 1em;
}


.faq {
	display: grid;
	row-gap: 3vh;
}

.faq-question {
	background: #765393;
	border: 3px solid #9F79BF;
	color: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50px;
	font-size: clamp(16px,2.2vw,22px);
	font-weight: 500;
	padding: 1rem 1rem;
	position: relative;
	width: 100%;
	cursor: pointer;
	&::after {
		content: '';
		background: url("../images/urgent/acd-open.svg") #FFF;
		background-repeat: no-repeat !important;
		background-size: 11px 6px,contain !important;
		background-position: left 52% center;
		display: inline-block;
		border-radius: 50px;
		width: 27px;
		height: 27px !important;
		right: 20px;
		position: absolute;
	}
}

.faq-item.is-open .faq-question {
	&::after {
		background: url("../images/urgent/acd-close.svg") #FFF;
		background-position: left 52% top 53%;
		height: 2px;
	}
}

.faq-answer[hidden] {
    display: none;
}

.faq-item.is-open .faq-answer {
	display: flex;
	padding: 2rem;
	margin-top: 2vh;
	border: 1px solid #B9B9B9;
	border-radius: 10px;
	font-size: clamp(15px,1.8vw,18px);
	font-weight: 500;
}

.faq-answer {
    overflow: hidden;
    height: 0;
    transition: height .3s ease;
}

.faq_list {
	display: grid;
	row-gap: 5px;
	margin-top: 1rem;
	li {
		text-indent: -16px;
		margin-left: 16px;
		&::before {
			content: '●';
			font-size: 10px;
			top: -2px;
			position: relative;
			margin-right: 5px;
		}
	}
}

.document_list {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 1em;
}