@charset "utf-8";
/*======================================
法人サービス
========================================*/
/*------------------------------
ページヘッダー
------------------------------*/
.page_header_wrap{
	background-image: url("../img/page_header.jpg");
}

/*------------------------------
概要
------------------------------*/
/*****
法人サービスの特徴
*****/
.point_area{
	display: flex;
	justify-content: space-between;
 flex-wrap: wrap;
}
.point_box{
	border: solid 2px #dddcdc;
}
.point_inner{
	padding: 0.5em 1em 1em 1em;
}
.ttl_point{
	font-size: 1.1em;
	font-weight: bold;
	color: var(--sub_color);
}

/*****
請求書の発行者と注意点
*****/
.tbl_attent{
	width: 100%;
	margin: 1em 0;
}

.tbl_attent th,
.tbl_attent td{}
.tbl_attent th{
	font-weight: bold;
	color: var(--red_color);
	padding: 0.5em 0;
	white-space: nowrap;
}
.tbl_attent td{
	padding: 0.5em 0 0.5em 0.5em;
}

/*------------------------------
簡単3ステップ
------------------------------*/
.step_area{}
.step_box{
	background-color: var(--base_color);
}
.step_img{
	text-align: center;
	background-color: #fff;
}
.step_text{
	padding: 0.5em 1em 1em 1em;
}
.ttl_step{
	font-size: 1.25em;
	font-weight: bold;
	color: var(--sub_color);
}

.step_arrow{
	display: block;
	background-color: var(--sub02_color);
}

/*------------------------------
よくあるご質問
------------------------------*/
.faq_set{
	margin-bottom: 3em;
}

.faq_q,
.faq_a{
	display: flex;
	align-items: flex-start;
	width: 80%;
}
.faq_q{}
.faq_a{
	justify-content: flex-end;
	margin: 1em 0 0 auto;
}

.icon_q,
.icon_a{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1;
	color: #fff;
	aspect-ratio: 1 / 1;
	width: 2em;
	padding: 0.5em;
	border-radius: 50%;
}
.icon_q{
	background-color: #0e993c;
}
.icon_a{
	background-color: #ff6900;
}

.balloon_q,
.balloon_a{
	padding: 1em;
	border-radius: 0.5em;
	position: relative;
}
.balloon_q{
	margin-left: 2em;
	background-color: #9fd7b2;
}
.balloon_a{
	margin-right: 2em;
	background-color: #ffd6ba;
}

.balloon_q::before,
.balloon_a::before{
	content: '';
	display: block;
	width: 1.5em;
	height: 1.2em;
	position: absolute;
	top: 1em;
}
.balloon_q::before{
	background-color: #9fd7b2;
	clip-path: polygon(0 50%,100% 0,100% 100%);
	right: 100%;
}
.balloon_a::before{
	background-color: #ffd6ba;
	clip-path: polygon(0 0,100% 50%,0 100%);
	left: 100%;
}


/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media (min-width: 768px){
	/*------------------------------
	ページヘッダー
	------------------------------*/
	.header_apply_nav .btn_header_apply{
		width: 50%;
	}
	
	/*------------------------------
	概要
	------------------------------*/
	/*****
	法人サービスの特徴
	*****/
	.point_box{
		width: 30%;
		margin-bottom: 3em;
	}
	
	/*------------------------------
	簡単3ステップ
	------------------------------*/
	.step_area{
		display: flex;
		justify-content: space-between;
	}
	.step_box{
		flex-shrink: 0;
		width: 30%;
	}
	.step_img{}
	.step_text{}
	.ttl_step{}
	.step_text .btn_pdf{
		font-size: 0.85em;
	}
	
	.step_arrow{
		align-self: center;
		aspect-ratio: 1 / 1.5;
		width: 3%;
		margin: 0 auto;
		clip-path: polygon(0 0,100% 50%,0 100%);
	}
	
	/*------------------------------
	よくあるご質問
	------------------------------*/
}

/* スマホ----------------------------- */
@media (max-width: 767px){
	/*------------------------------
	概要
	------------------------------*/
	/*****
	法人サービスの特徴
	*****/
	.point_box{
		width: 48%;
		margin-bottom: 2em;
	}
	
	/*------------------------------
	簡単3ステップ
	------------------------------*/
	.step_area{}
	.step_box{
		max-width: 400px;
		margin: 0 auto;
	}
	.step_img{}
	.step_text{}
	.ttl_step{}
	
	.step_arrow{
		width: 2em;
		height: 1.5em;
		margin: 1em auto;
		clip-path: polygon(0 0,100% 0,50% 100%);
	}
	
	/*------------------------------
	よくあるご質問
	------------------------------*/
}