@charset "UTF-8";
.main_title_area{
	background: url(../image/support/bg_main_title.jpg) no-repeat center top;
	background-size: cover;
}
.main_title_area .wrap{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 500px;
}
.main_title_area *{
	color: #fff !important;
}
.main_title_area .breadcrumbs{
	position: absolute;
	top: 0;
	left: 20px;
}
.main_title_area .main_title{
	font-size: 40px;
	font-weight: bold;
	text-align: center;
}

@media screen and (max-width: 1024px){
	.main_title_area{
		background: url(../image/support/bg_main_title_sp.jpg) no-repeat center top;
		background-size: cover;
	}
	.main_title_area .wrap{
		height: 60vw;
	}
	.main_title_area .main_title{
		font-size: 26px;
	}
}

#support{
	padding: 90px 0 0;
	background: #F8F8F8;
}

.page_nav{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 40px;
	width: 90%;
	margin: 0 auto 50px;
}
.page_nav li{
	width: 580px;
}
.page_nav li a{
	display: flex;
	align-items: center;
	width: 100%;
	padding: 20px;
	background: #fff;
}
.page_nav li a figure{
	max-width: 200px;
	margin-right: 40px;
}
.page_nav li a p{
	font-size: 20px;
	font-weight: bold;
}

@media screen and (max-width: 1024px){
	#support{
		padding: 54px 0 0;
	}

	.page_nav{
		gap: 10px 0;
		margin: 0 auto;
	}
	.page_nav li{
		width: 100%;
	}
	.page_nav li a{
		padding: 10px;
	}
	.page_nav li a figure{
		max-width: 115px;
		margin-right: 23px;
	}
	.page_nav li a p{
		font-size: 13px;
	}
}

#sec02{
	padding: 120px 5% 100px;
	background: #F0F0F0;
}
#support .content{
	padding: 80px 5% 100px;
	margin: auto;
}
#support .content img.icon{
	display: block;
	margin: 0 auto 40px;
}
#support .content h2{
	margin-bottom: 30px;
	font-size: 36px;
	font-weight: bold;
	text-align: center;
}
#support .content h2 + p{
	margin-bottom: 110px;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	line-height: 1.2;
}
#support .content .btn{
	max-width: 500px;
	width: 100%;
	margin: 0 auto 100px;
}
#support .content .btn.last{
	margin: 80px auto 100px;
}
#support .content .notes + .white_box + .btn{
	margin: 0 auto;
}
#support .content .btn a{
	height: 80px;
	font-size: 17px;
	font-weight: bold;
	border-radius: 0;
	border: 2px solid #232323;
}
#support .content .btn a:before{
	display: none;
}

@media screen and (max-width: 1024px){
	#support .wrap{
		width: 100%;
	}
	#support .content{
		padding: 85px 5% 50px;
	}
	#support #sec02.content{
		padding: 60px 5% 70px;
	}
	#support .content img.icon{
		max-width: 60px;
		margin: 0 auto 20px;
	}
	#support .content h2{
		font-size: 18px;
	}
	#support .content h2 + p{
		margin-bottom: 38px;
		font-size: 14px;
		font-weight: normal;
		line-height: 1.85;
	}
	#support .content .btn{
		max-width: none;
		margin: 0 auto 64px;
	}
	#support .content .btn.last{
		margin: 30px auto 64px;
	}
	#support .content .btn a{
		height: 54px;
		font-size: 14px;
	}
}

.flex_area{
	max-width: 1800px;
	width: 100%;
	margin: 0 auto 100px;
	background: #fff;
}
.flex_area figure{
	width: 50%;
}
.flex_area .in{
	flex-direction: column;
	justify-content: center;
	width: 50%;
	padding: 0 100px;
}
.flex_area .in p.en{
	margin-bottom: 30px;
	font-size: 20px;  
	color: #A28B5F;
	font-weight: bold;
}
.flex_area .in h3{
	margin-bottom: 30px;
	font-size: 27px;
	font-weight: bold;
	line-height: 1.7;
}
.flex_area .in p{
	max-width: 548px;
	font-size: 14px;
	line-height: 1.85;
}
.flex_area .in p.mb1em{
	margin-bottom: 1.5em;
}
.flex_area .in .fwb{
	font-weight: bold;
}

@media screen and (max-width: 1024px){
	.flex_area.flex{
		display: block;
	}
	.flex_area figure{
		width: 100%;
	}
	.flex_area .in{
		width: 100%;
		padding: 37px 16px;
	}
	.flex_area .in p.en{
		margin-bottom: 20px;
		font-size: 18px;
	}
	.flex_area .in h3{
		margin-bottom: 20px;
		font-size: 15px;
		line-height: 1.86;
	}
	.flex_area .in p{
		max-width: none;
	}
}

.white_box{
	margin-bottom: 80px;
	padding: 70px 50px 60px;
	background: #fff;
}
.notes + .white_box{
	margin-top: 140px;
}
.white_box h3{
	margin-bottom: 60px;
	font-size: 27px;
	font-weight: bold;
	text-align: center;
}
.white_box p{
	font-size: 15px;
	line-height: 2.13;
}
.white_box .flex{
	flex-wrap: wrap;
	gap: 0 28px;
	margin: 40px 0 20px;
}
.white_box .flex img{
	max-width: 536px;
	width: calc((100% - 28px) / 2);
}
.notes + .white_box{
	background: #F8F8F8;
}
.notes + .white_box .flex{
	gap: 0 100px;
	margin: 60px 0 0;
}
.white_box .flex .in{
	max-width: 500px;
	width: 46%;
}
.white_box .flex .in h4{
	margin-bottom: 20px;
	font-size: 18px;
	font-weight: bold;
}
.white_box .flex .in .box{
	position: relative;
	padding: 30px;
	background: #EFEFEF;
	border: 1px solid #EFEFEF;
}
.white_box .flex .in .box h5{
	margin-bottom: 14px;
	font-size: 20px;
	font-weight: bold;
}
.white_box .flex .in .box p{
	font-size: 16px;
	font-weight: bold;
	line-height: 1.75;
}
.white_box .flex .in .box p a{
	display: inline-block;
}
.white_box .flex .in + .in .box{
	background: #fff;
	border: 1px solid #E5E2E2;
}
.white_box .flex .in + .in .box:before{
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: -66px;
	width: 20px;
	height: 20px;
	margin: auto;
	border-bottom: 2px solid #333;
	border-right: 2px solid #333;
	transform: rotate(-45deg);
}
.white_box .flex .in + .in .box p a{
	text-decoration: underline;
}

@media screen and (max-width: 1024px){
	.white_box{
		margin-bottom: 30px;
		padding: 45px 16px 24px;
	}
	.notes + .white_box{
		margin-top: 40px;
	}
	.white_box h3{
		margin-bottom: 20px;
		font-size: 15px;
	}
	.white_box p{
		font-size: 14px;
		line-height: 1.85;
	}
	.white_box .flex{
		gap: 12px 0;
		margin: 20px 0;
	}
  .repair_banner {
    justify-content: space-around;
  }
	.notes + .white_box .flex{
		gap: 47px 0;
		margin: 40px 0 0;
	}
	.white_box .flex .in{
		max-width: none;
		width: 100%;
	}
	.white_box .flex .in h4{
		font-size: 15px;
	}
	.white_box .flex .in .box{
		padding: 15px 20px;
	}
	.white_box .flex .in .box h5{
		font-size: 13px;
	}
	.white_box .flex .in .box p{
		font-size: 10px;
		line-height: 1.8;
	}
	.white_box .flex .in + .in .box:before{
		top: -70px;
		bottom: auto;
		left: 0;
		right: 0;
		width: 15px;
		height: 15px;
		margin: auto;
		transform: rotate(45deg);
	}
	.white_box .flex .in + .in .box p a{
		text-decoration: underline;
	}
}

.flow{
	max-width: 1100px;
	margin: 0 auto 100px;
}
.flow h3{
	margin-bottom: 50px;
	font-size: 35px;
	font-weight: bold;
	text-align: center;
}
.flow h4{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-bottom: 60px;
	font-size: 22px;
  line-height: 1.5;
	color: #fff;
	font-weight: bold;
	background: #333;
	border-radius: 5px;
  padding: 15px;
}
.flow ol + h4{
	margin-top: 100px;
}
.flow ol{
	display: flex;
	flex-wrap: wrap;
	gap: 76px 0;
}
.flow ol li{
	position: relative;
	width: 100%;
	padding: 40px;
	background: #fff;
}
.flow ol li + li:before{
	content: "";
	display: inline-block;
	position: absolute;
	top: -58px;
	left: 0;
	right: 0;
	width: 20px;
	height: 20px;
	margin: auto;
	border-bottom: 2px solid #333;
	border-right: 2px solid #333;
	transform: rotate(45deg) translateY(0);
}
.flow ol li h5{
	margin-bottom: 30px;
	font-size: 18px;
	font-weight: bold;
	;line-height: 2.1;
}
.flow ol li p{
	font-size: 14px;
	line-height: 2.07;
}
.flow ol li p .fwb{
	font-weight: bold;
}
.flow ol li p.mb2em{
	margin-bottom: 2em;
}
.flow ol li p a{
	display: inline-block;
	text-decoration: underline;
}
#support .content .flow ol + .btn{
	margin-top: 70px;
}

@media screen and (max-width: 1024px){
	.flow{
		margin: 0 auto 48px;
	}
	.flow h3{
		margin-bottom: 45px;
		font-size: 20px;
	}
	.flow h4{
		margin-bottom: 30px;
		font-size: 16px;
		border-radius: 0;
	}
	.flow ol + h4{
		margin-top: 60px;
	}
	.flow ol{
		gap: 56px 0;
	}
	.flow ol li{
		padding: 30px 16px;
	}
	.flow ol li + li:before{
		top: -46px;
	}
	.flow ol li h5{
		margin-bottom: 20px;
		font-size: 15px;
		line-height: 1.73;
	}
	.flow ol li p{
		line-height: 1.85;
	}
	.flow ol li p .fwb{
		font-weight: bold;
	}
	.flow ol li p a{
		display: inline-block;
		text-decoration: underline;
	}
	#support .content .flow ol + .btn{
		margin-top: 70px;
	}
	.flow ol li p .sp{
		display: inline-block !important;
	}
	.flow ol li p a{
		text-decoration: none;
	}
}

.notes{
	max-width: 1100px;
	margin: auto;
}
.notes h3{
	margin-bottom: 30px;
	font-size: 18px;
	font-weight: bold;
}
.notes ul li,
.notes p{
	font-size: 14px;
	line-height: 2.07;
}
.notes ul li{
	margin-left: 1em;
	text-indent: -1em;
}
.notes table{
	width: 1000px;
	margin-bottom: 80px;
}
.notes table th{
	width: 350px;
	padding: 2em 3em;
	font-size: 15px;
	font-weight: bold;
	background: #F8F8F8;
	border: 1px solid #EFEFEF;
}
.notes table td{
	padding: 2em 3em;
	font-size: 15px;
	background: #fff;
	border: 1px solid #EFEFEF;
}
.notes ul + h3{
	margin-top: 70px;
	padding-top: 70px;
	border-top: 1px solid #DDD;
}
.notes ul + p{
	margin-top: 1.5em;
}
#sec02 .notes h3{
	font-size: 22px;
}
#sec02 .notes .flex{
	justify-content: space-between;
	max-width: 1000px;
}

@media screen and (max-width: 1100px){
	.notes table{
		width: 100%;
	}
}

@media screen and (max-width: 1024px){
	.notes h3{
		margin-bottom: 28px;
		font-size: 15px;
	}
	.notes ul li,
	.notes p{
		font-size: 13px;
		line-height: 2;
	}
	.notes table{
		margin-bottom: 50px;
	}
	.notes table th{
		width: 120px;
		padding: 1.5em 1em;
		font-size: 12px;
	}
	.notes table td{
		padding: 1.5em 1em;
		font-size: 12px;
	}
	.notes ul + h3{
		margin-top: 40px;
		padding-top: 40px;
	}
	.notes ul + p{
		margin-top: 1.5em;
	}
	#sec02 .notes h3{
		font-size: 15px;
	}
	#sec02 .notes .flex{
		display: block;
		margin-bottom: 20px;
	}
	#sec02 .notes .flex p{
		letter-spacing: 1px;
	}
}