@charset "utf-8";
/*=============================

法人サービス style

===============================*/
.contents *{
	font-size: 1em;
	box-sizing: border-box;
}

img{
	max-width: 100%;
	height: auto;
}

.mgn_t05{
	margin-top: 0.5em;
}

.indent1{
	text-indent: -1em;
	padding-left: 1em;
}
.indent3_25{
	text-indent: -3.25em;
	padding-left: 3.25em;
}

.section_wrap{}
.normal_section{
	margin-top: 3em;
}

.btn_normal{
	text-align: center;
}
.btn_normal a{
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	color: #fff;
	height: 100%;
	padding: 0.5em 1em 0.5em 0.5em;
	border-radius: 0.5em;
	position: relative;
}
.btn_normal a::before{
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.25em 0 0.25em 0.5em;
	border-color: transparent transparent transparent #fff;
	position: absolute;
	top: 50%;
	right: 0.25em;
	transform: translateY(-50%);
}
.btn_normal a:hover{
	opacity: 0.8;
}

.bg_contact{
	background-color: #ff3c00;
}
.bg_login{
	background-color: #ff6900;
}
.bg_down{
	background-color: #ff9905;
}

.ttl_type01{
	font-size: 1.25em;
	color: #3887bb;
	margin: 1.5em 0 0.5em 0;
}

/*****
ページヘッダー部分
*****/
.page_header{
	width: 100%;
	padding: 2em;
	background-image: url("../img/headimg.jpg");
	background-repeat: no-repeat;
}
.page_header .headlead{}
.page_header h1{
	margin-top: 10px;
}

.page_header .header_apply{}
.header_apply li{
	margin-top: 10px;
}
.header_apply li:first-of-type{
	margin-top: 0;
}

/*****
特徴
*****/
.point_area{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.point_area .point_box{
	width: 48%;
	margin-bottom: 2em;
	border: solid 2px #dddcdc;
}

.point_box .point_inner{
	padding: 0.5em 1em 1em 1em;
}

.point_inner .ttl_point{
	font-size: 1.25em;
	font-weight: bold;
	color: #ff6900;
}

/*****
簡単3ステップ
*****/
.step_area{}
.step_area .step_box{
	background-color: #ffdec7;
}
.step_box .step_text{
	padding: 0.5em 1em 1em 1em;
}

.step_text .ttl_step{
	font-size: 1.25em;
	font-weight: bold;
	color: #ff6900;
}

.step_arrow{
	font-size: 1.25em;
	text-align: center;
	color: #ff6900;
}

/*****
質問QA
*****/
.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: 2em;
	font-weight: bold;
	line-height: 1;
	color: #fff;
	padding: 0.5em;
	border-radius: 50%;
}

.icon_q{
	background-color: #0e993c;
}
.icon_a{
	background-color: #ff6900;
}

.balloon_q,
.balloon_a{
	padding: 1.5em;
	border-radius: 1em;
	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: 0;
	height: 0;
	border-style: solid;
	position: absolute;
	top: 1.5em;
}

.balloon_q::before{
	border-width: 0.5em 1.5em 0.5em 0;
	border-color: transparent #9fd7b2 transparent transparent;
	right: 100%;
}
.balloon_a::before{
	border-width: 0.5em 0 0.5em 1.5em;
	border-color: transparent transparent transparent #ffd6ba;
	left: 100%;
}

/*****
リンクボタン
*****/
.btn_area{
	font-size: 1.25em;
	padding-top: 2em;
	border-top: dashed 1px #ccc;
}

/*****
YouTube埋め込み
*****/
.in_youtube{
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
	position: relative;
}
.in_youtube iframe{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

/*-----------------------------
　PC専用スタイル
------------------------------*/
@media (min-width: 768px) {
	.section_wrap{
		width: 100%;
		margin: 0 auto 40px auto;
	}
	
	/*****
	ページヘッダー部分
	*****/
	.page_header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-position: center center;
	}
	.page_header .headlead{
		font-size: 16px;
	}
	.header_apply li a:hover img{
		filter: brightness(1.2);
	}
	
	/*****
	パンくずリスト
	*****/
	.topicpath{
		padding: 20px 20px 30px 20px;
	}
	
	/*****
	簡単3ステップ
	*****/
	.step_area{
		display: flex;
		justify-content: space-between;
	}
	.step_area .step_box{
		width: 30%;
	}
	
	.step_arrow{
		align-self: center;
		transform: rotateZ(-90deg) scaleX(2);
	}
	
	/*****
	リンクボタン
	*****/
	.btn_area{
		display: flex;
		justify-content: space-between;
	}
	.btn_area li{
		width: 32%;
	}
}


/*-----------------------------
　スマホ専用スタイル
------------------------------*/
@media screen and (max-width: 768px) {
	.section_wrap{
		width: 94%;
		margin: 0 auto 20px auto;
	}
	
	/*****
	ページヘッダー部分
	*****/
	.page_header{
		background-position: right center;
		background-size: auto 100%;
	}
	
	.page_header .headlead{
		font-size: 14px;
		text-shadow: 1px 1px 2px rgba(255,255,255,1), 1px 1px 2px rgba(255,255,255,1), 1px 1px 2px rgba(255,255,255,1), 1px 1px 2px rgba(255,255,255,1), 1px 1px 2px rgba(255,255,255,1), -1px -1px 2px rgba(255,255,255,1), -1px -1px 2px rgba(255,255,255,1), -1px -1px 2px rgba(255,255,255,1), -1px -1px 2px rgba(255,255,255,1);
	}
	.page_header h1{
		width: 80%;
	}
	
	.page_header .header_apply{
		text-align: center;
		margin-top: 20px;
	}
	
	/*****
	パンくずリスト
	*****/
	.topicpath{
		display: none;
	}
	
	/*****
	簡単3ステップ
	*****/
	.step_area{}
	
	.step_area .step_box{
		width: 80%;
		max-width: 400px;
		margin: 0 auto;
	}
	
	.step_arrow b{
		display: inline-block;
		transform: scaleX(2);
	}
	
	/*****
	質問QA
	*****/
	.faq_q,
	.faq_a{
		width: 90%;
	}
	
	/*****
	リンクボタン
	*****/
	.btn_area{}
	.btn_area li{
		margin-bottom: 1em;
	}
	
}