@charset "UTF-8";

.c_white { color: white;}
.c_aviva { color: #ca0349;}

.bg_white { background: #fff;}
.bg_aviva { background: #ca0349;}
.bg_smoke { background: #f5f5f5;}

.center { text-align: center;}
.small { font-size: 80%;}
.large { font-size: 120%;}
.ah_wrap { padding: clamp( 1em, 6vw, 4em ) .5em; font-size: clamp( 14px, 4vw, 48px );}

article { font-size: clamp( 12px, 2.5vw, 18px );}

.accbox { max-width: 100%;}
.accbox label { display: block; cursor : pointer; transition: all 0.5s; position: relative;}
.accbox label::before { color: white; content: "\f107"; font-family: FAsolid; font-weight: 900; position: absolute; right: clamp( .5em, 3vw, 1em ); top: 50%; transform: translateY(-50%);}
.accbox input { display: none;}
.accbox .accshow { height: 0; padding: 0; overflow: hidden; opacity: 0; transition: 0.8s;}
.cssacc:checked + label + .accshow { height: auto; padding: 0; opacity: 1;}
.cssacc:checked + label::before { content:"\f106";}

.list_dot > li { padding-left: 1em; position: relative;}
.list_dot > li::before { content: "\02022"; position: absolute; left: 0; top: 0;}








.payment_fv .inner { justify-content: center; align-items: center; gap: 1em clamp( 2em, 4vw, 6em );}
.payment_fv .inner .img_area { width: clamp( 100px, 30%, 250px );}
.payment_fv .inner .txt_area { width: calc( 100% - clamp( 100px, 30%, 250px ) - clamp( 2em, 4vw, 6em ) );}





.payment_course .course_wrapper { width: 100%; max-width: 800px; margin-inline: auto; font-size: 150%; border-radius: clamp( 10px, 1vw, 20px ); overflow: hidden;}
.payment_course .course_ttl { padding: .5em;}
.payment_course .course_body { padding: 1em .5em;}
.payment_course .course_body > * { width: 100%; justify-content: center;}
.payment_course .course_arrow { justify-content: center; align-content: center; padding: .5em 0 1em; background: url(../images/ico_arrow_down.png) no-repeat center center; background-size: contain;}
.payment_course .course_arrow p { border: solid 1px #ca0349; padding: .3em 1.3em; border-radius: 2em;}
.payment_course .course_body dl.flex { align-items: baseline;}

@media(max-width:599px) {
	.payment_course .course_wrapper { font-size: 120%;}
}




.payment_flow .accbox h3 { padding: .8em 2.5em; border-radius: 2em;}
.payment_flow .cssacc:checked + label h3 { border-radius: 2em 2em 0 0;}
.payment_flow .accshow .target { padding: clamp( .8em, 3vw, 2em ) clamp( .8em, 4vw, 3em ); font-size: 90%;}
.payment_flow .accshow .target h4 { align-items: baseline; column-gap: .5em; font-size: 120%; margin-bottom: .8em;}
.payment_flow .accshow .target h4 .bg_aviva { padding: .4em .3em .3em; line-height: 1;}
.payment_flow .accshow .target > div:not(:last-of-type) { padding-bottom: 1em; border-bottom: solid 2px #eee; margin-bottom: 1em;}
.payment_flow .accshow .target > div p:not(:last-child) { margin-bottom: .8em;}
.payment_flow .accshow .target .underline { background: linear-gradient(transparent 90%, yellow 0%);}
.payment_flow .accshow .target .list_dot { margin-block: .8em;}
.payment_flow .serial li { column-gap: 1em; padding: .5em; margin-block: .5em;}





.bottom-cta { padding: 50px 0; font-size: 150%;}
.bottom-cta .btn { margin-top: 1em;}
.bottom-cta .btn a { padding: .5em 1.5em; border-radius: 2em; box-shadow: 0 .5em .5em -.2em rgba(0,0,0,.2);}

@media(max-width:599px) {
	.bottom-cta { font-size: 120%;}
}




.payment_faq .accbox { box-shadow: 0 .5em .5em -.2em rgba(0,0,0,.2); margin-bottom: 1em;}
.payment_faq .accbox h3 { padding: .8em 2.5em;}
.payment_faq .accbox h3 .num { width: 2em;}
.payment_faq .accbox h3 .txt { width: calc( 100% - 3em ); margin-left: auto;}
.payment_faq .accshow .target { padding: clamp( .8em, 3vw, 2em ) clamp( .8em, 4vw, 3em ); font-size: 90%;}

@media(max-width:599px) {
	.payment_faq .accbox h3 { padding-left: .8em;}
}