@charset "utf-8";
/* CSS Document */

.tcRed {
    color: #d01;
}

#attention{
	border: 1px solid #152c81;
	padding: 1em;
	margin-top: 20px;
}
#attention .attentionTitle{
	color: #152c81;
	font-size: 1.1em;
	font-weight: 700;
	margin-bottom: 1rem;
}

/* 2507 SPWM */

/* .repair_button{
  display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 10px;
  background: #e3ebfa;
  border-radius: 4px;
  color: #152c81;
  font-weight: 700;
  letter-spacing: 0;
  padding: 16px 20px;
	max-width: 360px;
}
.repair_button::after{
	display: block;
  content: url("../assets/images/icon-pdf.svg");
  margin-top: 5px;
} */

#konpou{
	margin: 50px auto;
}
#konpou p, li{
	line-height: 1.6;
}
#konpou small{
	font-size: 90%;
}
#konpou img{
	margin: 0 auto;
}

.konpouTitle{
	background-color: #152c81;
	color: #FFF;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	padding: 10px;
	margin-bottom: 1em;
}
.konpouHeading{
	font-size: 18px;
	font-weight: bold;
	margin: 20px auto;
}
.konpouHeading span{
  background: -webkit-linear-gradient(transparent 60%, #FFEC7F 60%);
  background: -o-linear-gradient(transparent 60%, #FFEC7F 60%);
  background: linear-gradient(transparent 60%, #FFEC7F 60%);
}
/* .konpouAtt{
	margin: 30px auto 50px;
	padding-left: 1em;
}
.konpouAtt li{
	text-indent: -1em;
	padding-left: 1px;
} */
.konpouStepbox{
	margin: 0 auto;
	border: 1px solid #152c81;
	border-radius: 26px;
}
.konpouStepbox .title{
	background-color: #152c81;
	color: #FFF;
	font-size: 20px;
	font-weight: 500;
	text-align: center;
	padding: 10px;
	margin: 0;
	border-radius: 24px 24px 0 0;
}
.konpouStepbox .innerbox{
	display: flex;
	flex-wrap: wrap;
	margin: 20px;
}
.konpouStepbox .innerbox > div{
	flex-basis: calc( (100% ) / 2 );
}
.konpouStepbox .innerbox > div:nth-of-type(odd){
	border-right: 1px solid #000;
}
.konpouStepbox .innerbox > div:nth-of-type(-n+4){
	border-bottom: 1px solid #000;
}

.konpouStepbox .flexbox{
	display: flex;
	column-gap: 15px;
}
.konpouStepbox .flexbox .colL{
	width: calc(100% - 225px);
}
.konpouStepbox .flexbox .colR{
	flex-basis: 200px;
}

.konpouStepbox .step{
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}
.konpouStepbox .step .text{
	display: block;
	color: #152c81;
	font-size: 20px;
	font-weight: 700;
	line-height: 32px;
}
.konpouStepbox .step .num{
	display: block;
	background-color: #152c81;
	border-radius: 16px;
	width: 32px;
	height: 32px;
	color: #FFF;
	font-size: 26px;
	font-weight: 500;
	line-height: 30px;
	text-align: center;
	margin-left: 4px;
}


.konpouMore{
	background-color: #e3ebfa;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	grid-column-gap: 20px;
	padding: 20px;
	margin: 30px auto;
	max-width: 658px;
}
.konpouMore ul{
	padding-left: 1em;
	font-size: 16px;
}

@media screen and (max-width: 767px){
	.konpouStepbox .innerbox{
		flex-direction: column;
	}
	.konpouStepbox .innerbox > div:first-of-type{
		padding-top: 10px;
		padding-bottom: 30px;
	}
	.konpouStepbox .innerbox > div:nth-of-type(n+2):nth-of-type(-n+5){
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.konpouStepbox .innerbox > div:last-of-type{
		padding-top: 30px;
		padding-bottom: 10px;
	}
	.konpouStepbox .innerbox > div:not(:last-of-type){
		border-right: 0;
		border-bottom: 1px solid #152c81;
	}
	.konpouMore{
		flex-direction: column;
	}
	.konpouMore ul{
		margin-bottom: 20px;
	}
}
@media screen and (min-width: 768px){
	.konpouStepbox .innerbox > div:nth-of-type(-n+2){
		padding-bottom: 20px;
	}
	.konpouStepbox .innerbox > div:nth-of-type(n+3):nth-of-type(-n+4){
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.konpouStepbox .innerbox > div:nth-of-type(n+5):nth-of-type(-n+6){
		padding-top: 20px;
	}
	.konpouStepbox .innerbox > div:nth-of-type(odd){
		padding-right: 20px;
	}
	.konpouStepbox .innerbox > div:nth-of-type(even){
		padding-left: 20px;
	}
	.konpouStepbox .flexbox .colR{
		margin-top: 10px;
	}
	.konpouMore ul li{
		max-width: 340px;
	}
}


