@charset "utf-8";
.main_ttl_container h2 {
    background-color: hsla(0, 0%, 100%, 0.9);
    text-align: center;
    width: calc(40% + 2em);
    max-width: 90%;
    margin: -2.5em auto 0;
    padding: 2em 1em 0;
    position: relative;
    z-index: 0;
    color: #008e72;
}
.family_table_wrap,.family_container_sp,.sp_br{
	display: none;
}
.family_container a {
	color: #008E72;
	text-decoration: underline;
}
.family_container a:hover {
	text-decoration: none;
}
.subpage_main_container{
	max-width: 1170px;
	margin: 0 auto;
}
.family_container{
	margin: 40px auto 40px auto;
}
.family_cnt_ttl{
	display: flex;
	justify-content: center;
	padding-bottom: 14px;
	border-bottom: #008E72 3px solid;
	margin-bottom: 30px;
}
.family_cnt_ttl h3{
	color: #008E72;
	font-size: 24px;
}
.family_container .family_inner_cnt,
.family_container .family_inner_wrap,
.family_container .bnr_support{
	margin: 0 20px;
}
.family_container .family_inner_cnt02{
	margin: 0 20px 30px;
}
.family_container .caption{
	margin: 20px 20px 0;
	list-style: none;
	line-height: 1.7;
}
.family_container .caption li::before{
	content: "※";
	margin-right: 0.5em;
}
.support_cnt h4 span{
	color: #59A0A6;
	font-weight: bold;
	background-color: #fff;
	font-size: .9em;
	padding: 5px 8px;
	margin-right: 10px;
}
.family_subwrap_ttl{
	display: flex;
	margin: 0 auto 14px auto;
	padding-bottom: 14px;
	border-bottom: 1px solid #008E72;
}
.family_container .family_subwrap_ttl img{
	width: 40px;
	height: 100%;
	margin-right: 10px;
}
.family_subwrap_ttl .family_ttl{
	font-weight: bold;
}
.sougi_quest_btn_area{
	padding: 0 10%;
	height: 126px;
}
.sougi_flow_btn{
	height: 126px;
    border-radius: 10px;
}
.sougi_flow_btn_inner{
	width: 99%;
    border-radius: 8px;
	height: 116px;
	border: #fff 1px solid;
	position: relative;
	top: 5px;
	left: 5px;
}
.sougi_flow_btn a{
	height: 100%;
    width: 100%;
    color: #fff;
    align-items: center;
    justify-content: center;
	text-decoration: none;
	display: flex;
}
.sougi_flow_btn_inner a img{
	width: 20%;
	border-radius: 6px 0 0 6px;
	position: absolute;
	left: 0px;
}
.sougi_flow_btn a p{
	color: #fff;
	margin-left: 100px;
	text-align: center;
}
.sougi_flow_btn a p span.large{
	font-size: 1.4rem;
	font-weight: bold;
}
.sougi_flow_btn a::after{
	content: "";
    position: absolute;
    right: 42px;
    box-sizing: border-box;
    border: 5px solid transparent;
    border-left: 8px solid #fff;
    z-index: 2;
}
.sougi_flow_btn a:before{
	position: absolute;
    right: 4%;
    content: "";
    width: 30px;
    height: 30px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
    z-index: 1;
}
.sougi_quest_btn_area .bg_green{
	background-color:#9EC48E;
}
/* 電話番号・LINEボタン表示 */
.sp_buttons_wrap{
	display: none;
}
.endding_wrap h3,.endding_wrap .subtitle{
	color: #008E72;
	font-weight: bold;
	text-align: center;
}
.endding_wrap h3 span{
	background: linear-gradient(transparent 50%, rgb(255, 249, 129) 50%);
}
.endding_wrap h3{
	padding-bottom: 30px;
	border-bottom: #707070 dotted 1px;
}
/* タイトル左右に斜め線 */
.endding_txt_wrap .subtitle{
position: relative;
text-align: center;
padding-bottom: 10px;
}
.endding_txt_wrap .subtitle:before,
.endding_txt_wrap .subtitle:after {
	position: relative;
	display: inline-block;
	content: "";
	background: #008E72;
	width: 2px;
	height: 2em;
	margin: 0 1em;
	margin-top: -.2em;
	vertical-align: middle;
}
.endding_txt_wrap .subtitle:before{
	transform: rotate(-35deg);
}
.endding_txt_wrap .subtitle:after{
	transform: rotate(35deg);
}
.family_cnt_set02 .btn_area{
	color: #008E72;
	font-weight: bold;
	text-align: center;
	border: #008E72 2px solid;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.family_cnt_set02 .btn_area a{
	text-decoration: none;
}
.arrow::before,
.arrow::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
.arrow::before {
	left: 3px;
	width: 10px;
	height: 10px;
	border-top: 2px solid #008E72;
	border-right: 2px solid #008E72;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/*------------------------ TBサイズ------------------------*/
@media screen and (max-width:1240px){
	
}
/*------------------------ SPサイズ------------------------*/
@media screen and (max-width:768px){

.family_table_wrap,.family_container_sp{
	display: block;
}
.subpage_main_container{
	margin: 0 auto;
}
.family_wrap{
	display: none;
}
.family_cnt_set .thumb_img{
	margin: 30px 20px 20px;
}
.subpage_main_container .family_table_wrap{
	text-align: center;
	margin: 0 auto;
	padding: 0 20px;
}
.subpage_main_container table {
	width: 100%;
	text-align: left;
	border: #008E72 1px solid;
	border-spacing: 0;
}
.subpage_main_container th {
	width: 36%;
    background-color: #008E72;
	border-bottom: #fff 1px solid;
	font-weight: normal;
	color: #fff;
	padding: 10px 10px;
}
.subpage_main_container td {
	padding: 10px 10px;
	border-bottom: #008E72 1px solid;
}
.family_table_wrap a{
	height: 100%;
    width: 100%;
    display: flex;
    position: relative;
	text-decoration: none;
}
.family_table_wrap a::after{
	content: "";
    position: absolute;
    top: 38%;
    right: 2.8%;	
    z-index: 2;
	display: inline-block;
	vertical-align: middle;
	color: #fff;
	line-height: 1;
	width: 0.5em;
	height: 0.5em;
	border: 0.15em solid currentColor;
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: translateY(-25%) rotate(135deg);
}
.family_table_wrap a:before{
	position: absolute;
    top: 10%;
    right: 3px;
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #008E72;
    z-index: 1;
}
.family_container_sp{
	margin: 60px 20px 40px;
}
.family_cnt_ttl{
	display: flex;
	justify-content: center;
	padding-bottom: 2%;
	border-bottom: #008E72 3px solid;
}
.family_cnt_ttl h3{
	color: #008E72;
	padding-left: 14px;
}
.family_cnt_ttl img{
	width: 40px;
	height: 100%;
}
.support_sp_bg{
	position: relative;
	height: 200px;
	border:#E9F5F3 10px solid;
}
.support_set{
	margin-top: 20px;
}
.support_wrap{
	position: absolute;
	width: 88%;
	margin: -40px 20px 40px 20px;
}
.support_cnt h4{
	text-align: center;
	position: relative;
	padding: 1rem 1rem;
	color: #fff;
	background: #59A0A6;
}
.support_cnt h4::after{
	position: absolute;
	bottom: -10px;
	left: 8em;
	width: 0;
	height: 0;
	content: '';
	border-width: 14px 10px 0 10px;
	border-style: solid;
	border-color: #59A0A6 transparent transparent transparent;
}
p.caption{
	font-size: 0.9rem;
	background-color: #E9F5F3;
	margin-top: 20px;
	padding: 20px 20px;
}
.family_subwrap_ttl{
	display: flex;
	margin: 40px auto 14px auto;
	padding-bottom: 14px;
	border-bottom: 1px solid #008E72;
}
/* btn_外部リンク */
.sougi_quest_btn_area{
	padding: 0;
	margin: 40px 20px;
	height: 126px;
}
.sougi_flow_btn{
	height: 126px;
    border-radius: 10px;
}
.sougi_flow_btn_inner{
	width: 97%;
    border-radius: 8px;
	height: 116px;
	border: #fff 1px solid;
	position: relative;
	top: 5px;
	left: 5px;
}
.sougi_flow_btn a{
	height: 100%;
    width: 100%;
    color: #fff;
    align-items: center;
    justify-content: center;
	text-decoration: none;
	display: flex;
}
.sougi_flow_btn_inner a img{
	width: 24%;
	border-radius: 100%;
	position: absolute;
	left: 12px;
}
.sougi_flow_btn a p{
	color: #fff;
	text-align: left;
}
.sougi_flow_btn a p span.large{
	font-size: 1.4rem;
	font-weight: bold;
}
.sougi_flow_btn a::after{
	content: "";
    position: absolute;
    right: 19px;
    box-sizing: border-box;
    border: 5px solid transparent;
    border-left: 8px solid #fff;
    z-index: 2;
}
.sougi_flow_btn a:before{
	position: absolute;
    right: 4%;
    content: "";
    width: 30px;
    height: 30px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
    z-index: 1;
}
.sougi_flow_btn a p{
	color: #fff;
	margin-left: 48px;
}
.bg_green{
	background-color:#9EC48E;
}
.sp_buttons_wrap{
	display: block;
	text-align: center;
}
.flow_img img{
	margin-top: 40px;
}
.bnr_support{
	margin: 0 20px;
}
.em-call {
	margin: 40px 5%;
}
.endding_wrap{
	background-image: url(../images/img_notebook_sp.jpg);
	width: calc(100% - 40px);
	background-size: cover;
	background-position: top center; 
	background-repeat: no-repeat;
	margin: 0 20px;
	display: flex;
	justify-content: center;
}
.endding_wrap h3{
	font-size: 20px;
}
.endding_txt_wrap h3{
	margin-top: -10px!important;
}
.endding_txt_wrap{
	padding: 80px 50px 0;
	height:  840px;
}
.bnr_gojokai{
	width: 100%;
	padding: 0 20px;
}
.family_cnt_set02{
	display: flex;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin: 40px auto 0;
	padding: 0 20px;
}
.endding_txt{
	width: 90%;
	display: flex;
	justify-content: center;
	margin: 0 auto;
}
.family_cnt_set02 .btn_area{
	width: 48%;
	margin-bottom: 5px;
}
.family_cnt_set02 .btn_area p{
	padding: 12px 0 12px 20px;
	line-height: 1.4;
}	
.arrow{
	position: relative;
	display: inline-block;
	padding: 0 10px 0 0;
	color: #008E72;
	vertical-align: middle;
	text-decoration: none;
	font-size: 15px;
}
.arrow::before {
	left: 25px;
	width: 10px;
	height: 10px;
	border-top: 2px solid #008E72;
	border-right: 2px solid #008E72;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.support_bg{
	position: relative;
	height: 160px;
	border:#E9F5F3 10px solid;
	margin: 80px auto 0;
}
.main_ttl_container h2 {
    background-color: hsla(0, 0%, 100%, 0.9);
    text-align: center;
    width: calc(40% + 6em);
    max-width: 90%;
    margin: -2.5em auto 0;
    padding: 2em 1em 0;
    position: relative;
    z-index: 0;
    color: #008e72;
}
}
/*------------------------ PCサイズ------------------------*/
@media screen and (min-width:769px){
	.subpage_main_container .family_wrap{
		margin: 0 auto;
		width: 823px;
		border: #F2F4F4 10px solid;
		padding: 30px 0;
		display: flex;
		justify-content: center;
		gap: 120px;
	}	
	.subpage_main_container .family_wrap li{
		list-style: disc;
	}
	.family_inner_wrap{
		text-align: center;
	}
	.family_container{
		margin: 80px auto 60px auto;
	}
	.family_container:last-of-type{
		margin: 80px auto 120px auto;
	}
	.family_cnt_set{
		max-width: 1110px;
		display: flex;
		justify-content: center;
		gap: 20px;
		margin: 40px auto 0;
	}
	.family_cnt_set02{
		max-width: 1110px;
		display: flex;
		justify-content: flex-start;
		gap: 20px;
		flex-wrap: wrap;
		margin: 40px auto 0;
	}
	.family_cnt_set02 .btn_area{
		width: 18.5%;
	}
	.family_cnt_set02 .btn_area p{
		line-height: 1.4;
		padding: 12px 10px 12px 40px;
	}	
	.family_cnt_set .thumb_img{
		width: 400px;
	}
	.family_inner_cnt{
		width: 670px;
	}
	.flow_img img{
		width: 823px;
		margin-top: 60px;
	}
	.support_set{
		text-align: center;
		margin-top: 20px;
	}
	.family_container .family_inner_cnt02{
		margin: 0 20px 40px;
	}
	.endding_wrap{
		background-image: url(../images/img_notebook.jpg);
		width: 100%;
		background-size: cover;
		background-position: center; 
		background-repeat: no-repeat;
		margin: 60px 0 0;
	}
	.endding_txt_wrap{
		width: 550px;
		padding: 110px 0;
		margin: 0 120px;
	}
	.endding_wrap h3{
		font-size: 40px;
	}
	.bnr_gojokai{
		margin-top: -50px;
	}
	.arrow{
		position: relative;
		display: inline-block;
		padding: 0 0 0 16px;
		color: #008E72;
		vertical-align: middle;
		text-decoration: none;
		font-size: 15px;
	}
	.family_container .support_cnt h4::after{
		position: absolute;
		bottom: -10px;
		left: 25em;
		width: 0;
		height: 0;
		content: '';
		border-width: 14px 10px 0 10px;
		border-style: solid;
		border-color: #59A0A6 transparent transparent transparent;
	}
	.family_container .support_cnt h4{
		text-align: center;
		position: relative;
		padding: 1rem 2rem;
		color: #fff;
		background: #59A0A6;
	}
	.family_container .support_wrap{
		position: absolute;
		width: 93%;
		margin: -40px 40px 40px 40px;
	}
	.support_bg{
		position: relative;
		height: 160px;
		border:#E9F5F3 10px solid;
		margin: 80px auto;
	}
	
}