html {
  scroll-behavior: smooth;
}

.top { background: #f8f8f8; padding: 1.5rem; padding-bottom:3rem;}
.top .info { display: flex; justify-content: space-around; align-items: center;}
.top .info p { width: 70%; font-family: 'ONE-Mobile-Title'; font-size: 2.4rem; line-height: 1.1; padding-left: 1.5rem;}
.top .info p span { font-family: 'ONE-Mobile-Title';font-size: 2.4rem; color: #004586;}
.top .info img { width: 28%;}
.top .btn_wrap { display: flex; margin: 1.5rem 0; background: #fff; padding: 1.5rem; border-radius: 3rem; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; position: relative;}
.top .btn_wrap:after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 1px; height: 50%; background: #d0d0d0;}
.top .btn_wrap a { width: 50%; text-align: center;}
.top .btn_wrap a .img_wrap { width: 5rem; height: 5rem; display: flex; align-items: center; justify-content: center;margin: 0 auto;}
.top .btn_wrap a .img_wrap img { width: 100%;}
.top .btn_wrap a:nth-child(2) .img_wrap img { width: 85%;}
.top .btn_wrap a p { font-family: 'ONE-Mobile-Regular';font-size: 1.8rem; font-weight: 600; margin-top: 1rem; line-height: 1.1;}

.bottom { margin-top: -1.5rem; background: #fff; border-radius: 3rem 3rem 0 0;box-shadow: rgba(99, 99, 99, 0.2) 0px -6px 8px 0px; padding: 3rem 1.5rem; position: relative;}
.bottom:before { content: ''; position: absolute;left: 50%; transform: translateX(-50%); top: 2rem; height: 4px; width: 3rem; background: #004284;} 
.bottom .btn_wrap { margin: 1.5rem 0;box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 3px; background: #fff; display: flex; align-items: center; justify-content: space-around; padding: 2rem 1.5rem; border-radius: 1.5rem; }
.bottom .btn_wrap p { font-size: 2rem; font-family: 'ONE-Mobile-Title'; width: 70%; }
.bottom .btn_wrap p span { display: block;font-size: 1.8rem; color:#4f4f4f; margin-bottom: .5rem;}
.bottom .btn_wrap img { width: 24%; }
.bottom .btn_wrap:nth-child(2) img { width: 19%;}
.bottom .btn_wrap:nth-child(4) img { width: 21%;}
.bottom .info { background: #f3faff; border-radius: 1.5rem; padding: 3.5rem 0 2rem; text-align: center;box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 3px; }
.bottom .info h2 { font-size: 2.2rem; color: #004586;font-family: 'ONE-Mobile-Title'; position: relative; width: fit-content; margin: 0 auto 1.5rem; }
.bottom .info h2 img { width: 5rem; position: absolute; top: -2rem; left: -5rem;}
.bottom .info p { font-size: 1.6rem; color: #3c3c3c; line-height:1.3;}
.bottom .table_wrap .title { border-radius: 1.5rem;display: flex; align-items: center;justify-content: space-between; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 3px; padding: 2rem 1.5rem; position: relative;}
.bottom .table_wrap .title p { display: flex; align-items: center;font-size: 2rem; gap: 1rem;font-family: 'ONE-Mobile-Title';}
.bottom .table_wrap .title p img { width: 2.4rem; }
.bottom .table_wrap .title:after { content: '';width: 2.2rem; height:1.3rem; background: url(../img/con2_arrow.png) center / contain; position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%); }
.bottom .table_wrap.on .title:after { background: url(../img/con2_arrow_on.png) center / contain; }
.bottom .table_wrap > img { display: none;}
.bottom .table_wrap.on > img { display: block; width: 100%; margin-top: 1.5rem;}