/*
  Bankme専用 top.css
*/

/*------------------------------------------
  CTA
------------------------------------------*/
.section-cta {
  text-align: center;
  background: url(../images/top/cta_bg_sp.png) no-repeat center / cover;
  height: 323px;
  position: relative;
  overflow: hidden;
}
.section-cta:before {
  content: "";
  width: 75px;
  height: 80px;
  display: block;
  background: url(../images/top/cta_left_m@2x.png) no-repeat center / cover;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  mix-blend-mode: overlay;
}
.section-cta:after {
  content: "";
  width: 75px;
  height: 70px;
  display: block;
  background: url(../images/top/cta_right_m@2x.png) no-repeat center / cover;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  mix-blend-mode: overlay;
}
.section-cta .inner {
  width: 95%;
  height: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 3;
}
.section-cta .title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}
.section-cta .img {
  max-width: 247px;
  width: 100%;
  margin: 1rem auto .5rem;
}
@media (min-width: 600px) {
}
@media (min-width: 1024px) {
  .section-cta {
    height: 486px;
  }
  .section-cta:before {
    width: 183px;
    height: 195px;
  }
  .section-cta:after {
    width: 200px;
    height: 187px;
  }
  .section-cta .title {
    font-size: 36px;
  }
  .section-cta .img {
    max-width: 397px;
    margin: 3rem auto 1rem;
  }
}

/*------------------------------------------
  First View
------------------------------------------*/
.section-first-view {
  background-image: url(../images/top/fv_bg_square.png);
  background-repeat: repeat;
/*
  background-color: rgba(255,255,255,0.7);
  background-blend-mode: lighten;
*/
}
.section-first-view .inner {
  width: 95%;
  margin: auto;
}
.section-first-view .flex {
  display: flex;
  flex-direction: column; 
}
.section-first-view .text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem 0;
  text-align: center;
  padding: 1.5rem 0 30px;
}
.section-first-view .text h1 {
  border-bottom: 3px double #004796;
  font-weight: 500;
}
.section-first-view .text h2 {
  max-width: 365px;
  width: 100%;
  margin: auto;
  padding-left: 2.5rem;
}
.section-first-view .text h2 .pc {
  display: none;
}
.section-first-view .text h3 {
  font-size: 18px;
  font-weight: 500;
}
.section-first-view .text .img {
  width: 300px;
}
.section-first-view .cta {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: #E9F0F9;
  text-align: center;
  padding: 3.5rem 1rem 2rem;
  position: relative;
}
.section-first-view .cta .ribbon {
  position: absolute;
  left: 0;
  right: 0;
  top: -30px;
  margin: auto;
  max-width: 310px;
  width: 100%;
}
.section-first-view .cta ul {
  display: inline-flex;
  flex-direction: column;
  gap: .5rem 0;
  font-weight: 500;
  margin-bottom: 1.5rem;
}
.section-first-view .cta li {
  text-align: left;
  padding-left: 3rem;
  position: relative;
}
.section-first-view .cta li:before {
  content: "";
  width: 24px;
  height: 24px;
  display: block;
  background: url(../images/common/icon_check@2x.png) no-repeat center / cover;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
@media (min-width: 600px) {
}
@media (min-width: 1024px) {
  .section-first-view {
    padding: 5rem 0 0;
  }
  .section-first-view .inner {
    max-width: 1200px;
  }
  .section-first-view .flex {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .section-first-view .text {
    width: calc(100% - 550px);
    padding: 0;
    gap: 2rem 0;
  }
  .section-first-view .text .img {
    width: auto;
  } 
  .section-first-view .cta {
    width: 500px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    font-size: 22px;
    padding: 5rem 1rem 3rem;
  }
  .section-first-view .cta .ribbon {
    max-width: 353px;
  }
  .section-first-view .cta ul {
    margin-bottom: 3rem;
    gap: 1rem 0;
  }
}
@media (min-width: 1200px) {
  .section-first-view .text h1 {
    font-size: 24px;
  }
  .section-first-view .text h2 {
    max-width: 695px;
    padding: 0;
  }
  .section-first-view .text h2 .pc {
    display: block;
  }
  .section-first-view .text h2 .sp {
    display: none;
  }
  .section-first-view .text h3 {
    font-size: 22px;
  }
}

/*------------------------------------------
  About
------------------------------------------*/
.section-about {
  background-image: url(../images/top/about_bg.png) no-repeat top left / contain, linear-gradient(#F1FEFF, #fff);
  text-align: center;
  padding: 3rem 0 0;
}
.section-about .inner {
  width: 95%;
  margin: auto;
}
.section-about .txt01 {
  font-weight: 600;
}
.section-about .txt02 {
  font-size: 20px;
  font-weight: 600;
}
.section-about .txt03 {
  max-width: 360px;
  width: 100%;
  margin: 2rem auto 1rem;
}
.section-about .txt04 {
  font-weight: 400;
  margin-bottom: 3rem;
}
@media (min-width: 600px) {
  .section-about {
    background: url(../images/top/about_bg.png) no-repeat center / contain, linear-gradient(#F1FEFF, #fff);
    padding: 8rem 0 0;
  }
  .section-about .inner {
    max-width: 612px;
  }
  .section-about .txt01 {
    font-size: 28px;
    margin-bottom: 1rem;
  }
  .section-about .txt02 {
    font-size: 36px;
  }
  .section-about .txt03 {
    max-width: 612px;
    margin: 2rem auto 3rem;
  }
  .section-about .txt04 {
    font-size: 22px;
    margin-bottom: 5rem;
  }
}
@media (min-width: 1024px) {
}

/*------------------------------------------
  Feature
------------------------------------------*/
.section-feature {
  text-align: center;
  padding: 7rem 0 5rem;
}
.section-feature .inner {
  width: 90%;
  margin: auto;
}
.section-feature .title {
  font-weight: 600;
  font-size: 24px;
}
.section-feature .flex {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 3rem 0;
  margin-top: 2rem;
}
.section-feature .flex .col {
  background: #fff;
  box-shadow: 2px 2px 15px rgba(0, 0, 0, .25);
  border-radius: 5px;
  padding: 2rem;
}
.section-feature .flex .img {
  margin: 2rem auto;
}
.section-feature .flex p {
  font-weight: 400;
  font-size: 14px;
}
@media (min-width: 600px) {
}
@media (min-width: 1024px) {
  .section-feature {
    padding: 10rem 0;
  }
  .section-feature .inner {
    max-width: 1200px;
  }
  .section-feature .title {
    font-size: 36px;
  }
  .section-feature .flex {
    flex-direction: row;
    justify-content: space-between;
    margin-top: 5rem;
  }
  .section-feature .flex .col {
    width: 48%;
    padding: 2rem 1rem;
  }
}
@media (min-width: 1200px) {
  .section-feature .flex .col {
    width: 24%;
  }
}

/*------------------------------------------
  Support
------------------------------------------*/
.section-support {
  padding: 5rem 0;
  text-align: center;
}
.section-support .inner {
  width: 90%;
  margin: auto;
}
.section-support .title {
  font-size: 24px;
  font-weight: 600;
}
.section-support .flex {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 3rem 0;
  margin-top: 3rem;
}
.section-support .flex .col {
  background: #fff;
  box-shadow: 2px 2px 15px rgba(0, 0, 0, .25);
  border-radius: 5px;
  padding: 2rem 1rem;
}
.section-support .flex h3 {
  font-size: 18px;
}
.section-support .flex .img {
  margin: 1.5rem 0;
}
.section-support .flex p {
  font-weight: 500;
}
@media (min-width: 600px) {
  .section-support .inner {
    width: 95%;
  }
  .section-support .title {
    font-size: 36px;
  }
  .section-support .flex {
    flex-direction: row;
    justify-content: space-between;
  }
  .section-support .flex .col {
    width: 49%;
  }
}
@media (min-width: 1024px) {
  .section-support  {
    padding: 7rem 0 15rem;
  }
  .section-support .inner {
    max-width: 1080px;
  }
  .section-support .flex {
    margin-top: 5rem;
  }
  .section-support .flex .col {
    width: 32%;
  }
}

/*------------------------------------------
  Catch
------------------------------------------*/
.section-catch {
  text-align: center;
  background: url(../images/top/catch_bg_sp.png) no-repeat center / cover;
  height: 268px;
  padding-top: 40px;
  position: relative;
  overflow: hidden;
}
.section-catch:after {
  content: "";
  width: 124px;
  height: 34px;
  display: block;
  background: url(../images/top/catch_arrow_sp.png) no-repeat center / cover;
  position: absolute;
  top: -5px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 2;
}
.section-catch .title {
  font-size: 24px;
  font-weight: 500;
}
.section-catch .img {
  width: 232px;
  margin: auto;
  position: absolute;
  bottom: -15px;
  left: 0;
  right: 0;
}
@media (min-width: 600px) {
}
@media (min-width: 1024px) {
  .section-catch {
    background: url(../images/top/catch_bg.png) no-repeat center / cover;
    height: 442px;
    padding-top: 130px;
  }
  .section-catch:after {
    background: url(../images/top/catch_arrow.png) no-repeat center / cover;
    width: 676px;
    height: 86px;
    top: -30px;
  }
  .section-catch .title {
    font-size: 36px;
  }
  .section-catch .img {
    width: 338px;
    bottom: -40px;
  }
}

/*------------------------------------------
  Flow
------------------------------------------*/
.section-flow {
  background: #F5F5F5;
  padding: 5rem 0 10rem;
}
.section-flow .inner {
  width: 95%;
  margin: auto;
}
.section-flow .title {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
}
.section-flow .flex {
  display: flex;
  flex-direction: column;
  gap: 3rem 0;
  margin-top: 3rem;
}
.section-flow .flex .col {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section-flow .img {
  width: 38%;
}
.section-flow .text {
  width: 60%;
}
.section-flow .text h3 {
  font-size: 14px;
  margin-bottom: 1.5rem;
}
.section-flow .text p {
  font-size: 12px;
  font-weight: 500;
}
@media (min-width: 600px) {
  .section-flow .inner {
    max-width: 850px;
  }
  .section-flow .title {
    font-size: 36px;
  }
  .section-flow .flex {
    flex-direction: row;
    justify-content: space-between;
    margin-top: 5rem;
  }
  .section-flow .flex .col {
    flex-direction: column;
    justify-content: flex-start;
    gap: 2rem 0;
    text-align: center;
    width: 32%;
  }
  .section-flow .img,
  .section-flow .text {
    width: auto;
  }
  .section-flow .text .mb {
    line-height: 45px;
  }
}
@media (min-width: 1024px) {
  .section-flow  {
    padding: 7rem 0 10rem;
  }
  .section-flow .text h3 {
    font-size: 18px;
  }
  .section-flow .text .mb {
    line-height: 54px;
  }
  .section-flow .text p {
    font-size: 16px;
  }
  .section-flow .text p span {
    color: #FF0066;
  }
}

/*------------------------------------------
  Merit
------------------------------------------*/
.section-merit {
  padding: 5rem 0;
}
.section-merit .inner {
  width: 95%;
  margin: auto;
}
/* Common */
.section-merit .box-title {
  text-align: center;
  font-size: 20px;
  font-weight: 500;
}
.section-merit .box-title img {
  width: 132px;
  margin: auto;
}
.section-merit .box-title span {
  position: relative;
}
.section-merit .box-title span:before {
  content: "・";
  color: #FF0066;
  font-weight: 600;
  position: absolute;
  left: 0;
  right: 0;
  top: -15px;
  margin: auto;
}

/* Box01 */
.section-merit .box01 {
  text-align: center;
}
.section-merit .box01 .title {
  font-size: 24px;
  font-weight: 600;
}
.section-merit .box01 .subtitle {
  font-size: 18px;
  font-weight: 500;
}
.section-merit .box01 h4 {
  position: relative;
  background: url(../images/top/merit_box01_bg.png) no-repeat center / contain;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 3rem;
}
.section-merit .box01 h4:before {
  content: "";
  width: 86px;
  height: 106px;
  display: block;
  background: url(../images/top/merit_box01_char01@2x.png) no-repeat center / cover;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.section-merit .box01 h4:after {
  content: "";
  width: 85px;
  height: 106px;
  display: block;
  background: url(../images/top/merit_box01_char02@2x.png) no-repeat center / cover;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

/* Box02 */
.section-merit .box02 {
  margin-top: 5rem;
}
.section-merit .box02 .flex {
  display: flex;
  flex-direction: column;
  gap: 5rem 0;
  margin-top: 2rem;
}
.section-merit .box02 .col {
  text-align: center;
}
.section-merit .box02 .col h3 {
  font-size: 22px;
  margin-bottom: 1rem;
}
.section-merit .box02 .col .merit,
.section-merit .box02 .col .demerit {
  border: 1px solid #000;
  border-radius: 5px;
  margin-bottom: 1.5rem;
}
.section-merit .box02 .col p {
  border-bottom: 1px solid #000;
  padding: .5rem 0;
}
.section-merit .box02 .col ul {
  display: flex;
  flex-direction: column;
  gap: .5rem 0;
  text-align: left;
  font-size: 20px;
  padding: 1.5rem 1rem 1.5rem 6rem;
}
.section-merit .box02 .col li {
  position: relative;
}
.section-merit .box02 .col li:before {
  content: "";
  width: 24px;
  height: 24px;
  display: block;
  position: absolute;
  left: -28px;
  top: 3px;
}
.section-merit .box02 .col li span {
  font-weight: 400;
}
.section-merit .box02 .col .merit p {
  background: #F2BB23;
}
.section-merit .box02 .col .demerit p {
  background: #002D5C;
  color: #fff;
}
.section-merit .box02 .col .merit li:before {
  background: url(../images/common/icon_check@2x.png) no-repeat center / cover;
}
.section-merit .box02 .col .demerit li:before {
  background: url(../images/common/icon_check_navy@2x.png) no-repeat center / cover;
}

/* Box03 */
.section-merit .box03 {
  margin-top: 7rem;
}
.section-merit .box03 .flex {
  display: flex;
  flex-direction: column;
  gap: 3rem 0;
  margin-top: 2rem;
}
.section-merit .box03 .col h3 {
  border-bottom: 1px solid #000;
  margin-bottom: 1rem;
  font-size: 20px;
  position: relative;
  padding-left: 5.5rem;
  padding-bottom: .5rem;
}
.section-merit .box03 .col h3:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}
.section-merit .box03 .col01 h3:before {
  background: url(../images/top/merit_box03_icon01@2x.png) no-repeat center / cover;
  width: 43px;
  height: 30px;
}
.section-merit .box03 .col02 h3:before {
  background: url(../images/top/merit_box03_icon02@2x.png) no-repeat center / cover;
  width: 43px;
  height: 33px;
  top: -3px;
}
.section-merit .box03 .col03 h3:before {
  background: url(../images/top/merit_box03_icon03@2x.png) no-repeat center / cover;
  width: 30px;
  height: 30px;
  top: -1px;
}
.section-merit .box03 .col04 h3:before {
  background: url(../images/top/merit_box03_icon04@2x.png) no-repeat center / cover;
  width: 43px;
  height: 27px;
}
.section-merit .box03 .col05 h3:before {
  background: url(../images/top/merit_box03_icon05@2x.png) no-repeat center / cover;
  width: 43px;
  height: 30px;
}
.section-merit .box03 .col06 h3:before {
  background: url(../images/top/merit_box03_icon06@2x.png) no-repeat center / cover;
  width: 32px;
  height: 30px;
}
.section-merit .box03 .dl-box {
  font-size: 18px;
  display: flex;
  flex-direction: column;
  gap: 1rem 0;
}
.section-merit .box03 .dl-box dl {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.section-merit .box03 .dl-box dt {
  width: 155px;
  font-weight: 500;
  position: relative;
}
.section-merit .box03 .dl-box dt:after {
  content: "：";
  position: absolute;
  right: 0;
  top: 0;
}
.section-merit .box03 .dl-box dd {
  width: calc(100% - 155px);
  font-weight: 400;
  padding-left: .5rem;
}

/* Box04 */
.section-merit .box04 {
  margin-top: 7rem;
}
.section-merit .box04 .flex {
  display: flex;
  flex-direction: column;
  gap: 2rem 0;
  margin-top: 1rem;
}
.section-merit .box04 .col {
  background: #fff;
  border-radius: 5px;
  box-shadow: 2px 2px 15px rgba(0, 0, 0, .25);
  padding: 2rem 1rem;
  text-align: center;
}
.section-merit .box04 .col img {
  width: 100%;
}
.section-merit .box04 .col h3 {
  font-size: 18px;
  margin-bottom: 2rem;
}
.section-merit .box04 .col ul {
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: .5rem 0;
  text-align: left;
  padding-left: 4rem;
  font-weight: 500;
  margin-top: 1.5rem;
}
@media (min-width: 600px) {
  .section-merit .box-title {
    font-size: 28px;
  }
  .section-merit .box-title img {
    width: 160px;
  }
  .section-merit .box-title span:before {
    top: -20px;
  }
  .section-merit .box01 .title {
    font-size: 36px;
  }
  .section-merit .box01 .subtitle {
    font-size: 28px;
  }
  .section-merit .box01 h4 {
    font-size: 36px;
    max-width: 1000px;
    width: 100%;
    margin: 5rem auto 0;
  }
  .section-merit .box01 h4:before {
    width: 162px;
    height: 200px;
  }
  .section-merit .box01 h4:after {
    width: 161px;
    height: 200px;
  }
  .section-merit .box02 .flex {
    max-width: 500px;
    width: 100%;
    margin: 5rem auto 0;
  }
  .section-merit .box03 .flex {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .section-merit .box03 .col {
    width: 49%;
  }
  .section-merit .box04 {
    margin-top: 10rem;
  }
  .section-merit .box04 .flex {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-top: 5rem;
  }
  .section-merit .box04 .col {
    width: calc(100% / 2 - 2rem);
    padding: 3rem 2rem 2rem;
  }
}
@media (min-width: 1024px) {
  .section-merit .box02 {
    max-width: 1120px;
    margin: 10rem auto;
  }
  .section-merit .box02 .flex {
    flex-direction: row;
    justify-content: space-between;
    max-width: 100%;
  }
  .section-merit .box02 .col {
    width: 32.144%;
  }
  .section-merit .box02 .col ul {
    padding: 1.5rem 1rem 0 6rem;
  }
  .section-merit .box02 .col .merit ul {
    height: 126px;
  }
  .section-merit .box02 .col .demerit ul {
    height: 161px;
  }
  .section-merit .box03 {
    max-width: 1185px;
    margin: 10rem auto;
  }
  .section-merit .box03 .flex {
    margin-top: 5rem;
    gap: 5rem 0;
  }
  .section-merit .box03 .col {
    width: 30.803%;
  }
  .section-merit .box04 {
    max-width: 1080px;
    margin: 10rem auto;
  }
  .section-merit .box04 .flex {
    gap: 5rem 4%;
  }
  .section-merit .box04 .col {
    width: calc((100% - 8%) / 3);
  }
}

/*------------------------------------------
  Faq
------------------------------------------*/
.section-faq {
  padding: 7rem 0;
}
.section-faq .inner {
  width: 95%;
  margin: auto;
}
.section-faq .title {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
}
.section-faq .dl-box {
  display: flex;
  flex-direction: column;
  gap: 5rem 0;
  margin-top: 3rem;
}
.section-faq .dl-box dt,
.section-faq .dl-box dd {
  position: relative;
  padding-left: 4.5rem;
}
.section-faq .dl-box dt:before,
.section-faq .dl-box dd:before {
  content: "";
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  line-height: 33px;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  text-align: center;
  position: absolute;
  left: 0;
  top: -5px;
}
.section-faq .dl-box dt:before {
  content: "Q.";
  color: #fff;
  background: #004796;
}
.section-faq .dl-box dd:before {
  content: "A.";
  background: #F2BB23;
}
.section-faq .dl-box dt {
  font-weight: 500;
  margin-bottom: 2rem;
}
.section-faq .dl-box dd {
  font-weight: 400;
  font-size: 14px;
}
@media (min-width: 600px) {
  .section-faq .inner {
    max-width: 800px;
  }
  .section-faq .title {
    font-size: 36px;
  }
  .section-faq .dl-box {
    margin-top: 5rem;
  }
}
@media (min-width: 1024px) {
  .section-faq {
    padding: 7rem 0 10rem;
  }
  .section-faq .dl-box {
    gap: 7rem 0;
  }
  .section-faq .dl-box dt,
  .section-faq .dl-box dd {
    padding-left: 5rem;
  }
  .section-faq .dl-box dt {
    font-size: 18px;
  }
  .section-faq .dl-box dd {
    font-size: 16px;
  }
}


/*------------------------------------------
  
------------------------------------------*/
@media (min-width: 600px) {
}
@media (min-width: 1024px) {
}