@charset "UTF-8";
/*======================================================================
口座開設の流れ
/lp/common/include/account_app_flow.txt
/lp/common/include/account_app_flow_fx.txt
/lp/common/include/account_app_flow_cfd.txt
/lp/common/include/account_app_flow_margin.txt
======================================================================*/



/*======================================================================
/lp/common/include/account_app_flow.txt
======================================================================*/
.accountAppFlowArea {
  padding: 6% 2em 0;
  background-color: #f2f3f4;
}
.lp_25-or-under .accountAppFlowArea,
.fund .accountAppFlowArea,
.fund2 .accountAppFlowArea{
  padding-bottom: 15px;
}
.accountAppFlowArea .flex {
  display: block;
  width: 100%;
}
.accountAppFlowArea .flow-title {
  padding-bottom: 7%;
  font-size: 2.5rem;
  text-align: center;
  font-weight: bold;
}
.accountAppFlowArea .flow-step {
  position: relative;
  width: 100%;
  background-color: #ffffff;
  border: 2px solid #eeeeee;
  box-sizing: border-box;
  padding: 4% 0;
  min-height: 110px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.accountAppFlowArea .flow-step:not(:last-child) {
  margin: 0 0 8% 0;
}
.accountAppFlowArea .flow-step:not(:last-child)::after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto -5.21vw;
  opacity: 0.3;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 4.2vw solid transparent;
  border-left: 4.2vw solid transparent;
  border-top: 5.21vw solid #555555;
  border-bottom: 0;
}
.accountAppFlowArea .flow-step img {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.accountAppFlowArea .flow-step .box01 {
  position: absolute;
  max-width: 180px;
  width: 21%;
  height: 100px;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto 0;
}
.accountAppFlowArea .flow-step .box01 img {
  max-width: 90px;
  width: 80%;
  margin: auto 0 auto -15%;
}
.accountAppFlowArea .flow-step .box02 {
  position: relative;
  margin-left: 19%;
  max-width: 400px;
  width: 54%;
  font-size: 2.0rem;
  font-weight: 700;
}
.accountAppFlowArea .flow-step .box03 {
  display: block;
  margin: 0 auto;
  text-align: center;
  max-width: 166px;
  width: 24.1%;
  text-align: center;
}
.accountAppFlowArea .flow-step.step01 .box03 img {
  max-width: 85px;
  width: 45%;
}
.accountAppFlowArea .flow-step.step02 .box03 img {
  max-width: 85px;
  width: 68%;
}
.accountAppFlowArea .flow-step.step03 .box03 img {
  max-width: 100px;
  width: 62%;
}
.accountAppFlowArea .flow-step .box04{
  font-size: max(1.4rem, 14px);
  padding: 20px 20px 0 70px;
  line-height: 1.4;
  display: block;
}
/*---/lp/fund2/---*/
.fund2 .accountAppFlowArea{
  font-family: "Noto Sans Japanese", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "YuGothic M", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Arial, sans-serif;
}
.fund2 .accountAppFlowArea .flow-title{
  font-size: min(25px, 2.5rem);
  font-weight: 600;
}
.fund2 .accountAppFlowArea .flow-step .box02{
  font-size: min(20px, 2rem);
}
.fund2 .accountAppFlowArea .flow-step .box04 {
  font-size: min(1.4rem, 14px);
}
/*---///lp/fund2/---*/

@media screen and (min-width: 769px) {
  .accountAppFlowArea {
    padding: 40px 2em 0;
  }
  .lp_25-or-under .accountAppFlowArea,
  .fund .accountAppFlowArea,
  .fund2 .accountAppFlowArea{
    padding-bottom: 90px;
  }
  .accountAppFlowArea .flex {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    width: 100%;
  }
  .accountAppFlowArea .flow-title {
    padding-bottom: 40px;
    font-size: 36px;
    font-size: 3.09544282vw;
    font-weight: 700;
    width: 100%;
  }
  .accountAppFlowArea .flow-step {
    position: relative;
    max-width: 350px;
    width: 32%;
    box-sizing: border-box;
    padding: 0 0 20px 0;
    display: block;
  }
  .accountAppFlowArea .flow-step:not(:last-child) {
    margin: 0 6.25% 0 0;
  }
  .accountAppFlowArea .flow-step:not(:last-child)::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    top: 0;
    bottom: 0;
    right: 0;
    left: unset;
    margin: auto -30px auto 0;
    border-style: solid;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 20px solid #555555;
    border-right: 0;
  }
  .accountAppFlowArea .flow-step img {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
  }
  .accountAppFlowArea .flow-step .box01 {
    position: relative;
    display: block;
    max-width: 78px;
    width: 100%;
    height: unset;
    top: 0;
    bottom: unset;
    left: 0;
    right: 0;
    margin: -20px auto 4.5%;
  }
  .accountAppFlowArea .flow-step .box01 img {
    max-width: unset;
    width: 100%;
    margin: 0 auto;
  }
  .accountAppFlowArea .flow-step .box02 {
    display: block;
    margin: 0 0 4.5%;
    max-width: unset;
    width: 100%;
    font-size: 2.6rem;
    font-weight: 700;
    text-align: center;
  }
  .accountAppFlowArea .flow-step .box03 {
    position: relative;
    display: block;
    margin: 0 auto;
    text-align: center;
    max-width: unset;
    width: 100%;
    height: 86px;
    text-align: center;
  }
  .accountAppFlowArea .flow-step .box03 img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  .accountAppFlowArea .flow-step.step01 .box03 img {
    max-width: unset;
    max-height: 86px;
    width: 17%;
    height: 90%;
  }
  .accountAppFlowArea .flow-step.step02 .box03 img {
    max-width: unset;
    max-height: 150px;
    width: 32%;
  }
  .accountAppFlowArea .flow-step.step03 .box03 img {
    max-width: 90px;
    width: 28%;
  }
  .accountAppFlowArea .flow-step .box04{
    font-size: 1.6rem;
    padding: 20px 20px 0;
  }
  @media screen and (min-width: 1163px) {
    .accountAppFlowArea .flow-title {
      font-size: 36px;
    }
  }
  /*---/lp/fund2/---*/
  .fund2 .accountAppFlowArea .flow-title{
    font-size: min(36px, 23.6rem);
  }
  .fund2 .accountAppFlowArea .flow-step .box02{
    font-size: min(26px, 2.6rem);
  }
  .fund2 .accountAppFlowArea .flow-step .box04 {
    font-size: min(1.6rem, 16px);
  }
  /*---///lp/fund2/---*/
}



/*======================================================================
/lp/common/include/account_app_flow_fx.txt
======================================================================*/
.accountAppFlowArea.accountAppFlowArea_fx{
  
}
.fx_quorea .accountAppFlowArea.accountAppFlowArea_fx{
  padding-bottom: 15px;
}

@media screen and (min-width: 769px){
  .fx_quorea .accountAppFlowArea.accountAppFlowArea_fx{
    padding-bottom: 90px;
  }
}


/*======================================================================
/lp/common/include/account_app_flow_cfd.txt
======================================================================*/
.accountAppFlowArea.accountAppFlowArea_cfd{

}
.cfd-cp .accountAppFlowArea.accountAppFlowArea_cfd,
.cfd_quorea .accountAppFlowArea.accountAppFlowArea_cfd{
  padding-bottom: 15px;
}

@media screen and (min-width: 769px){
  .cfd-cp .accountAppFlowArea.accountAppFlowArea_cfd,
  .cfd_quorea .accountAppFlowArea.accountAppFlowArea_cfd{
    padding-bottom: 90px;
  }
}



/*======================================================================
/lp/common/include/account_app_flow_margin.txt
======================================================================*/
.accountAppFlowArea.accountAppFlowArea_margin{

}
.margin .accountAppFlowArea.accountAppFlowArea_margin{
  padding-bottom: 15px;
}

@media screen and (min-width: 769px){
  .margin .accountAppFlowArea.accountAppFlowArea_margin{
    padding-bottom: 90px;
  }
}