@charset "utf-8";

.step_wrap .step_cont2{
  width:100%;
  margin: 0 auto;
  padding: 0 24px;
  color:rgba(0, 20, 100, 1);
  text-align: center;
  border-radius: 16px;
  /* border:1px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); */
  background: rgba(255, 255, 255, 1);
}
/*アイコン*/
.step_wrap .step_cont2 .ic{
  display: block;
  width: 32px;
  margin:0 auto 12px;
}
.step_wrap .step_cont2 .ic img{
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;  
}
/*タイトル*/
.step_wrap .step_cont2 h1{
  color:rgba(0, 20, 100, 1);
  font-size: 24px;
  margin:0 0 16px;
}
/*txt*/
.step_wrap .step_cont2 .txt{
  color:rgba(0, 20, 100, 1);
  font-size: 16px;
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
STEP2：氏名入力
===============================*/
.step2 .step_cont2.namewrap {
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; */
  display: block;
  overflow-y: auto;
}

/* .step2 .step_cont  */

/*スクロールバー*/
.step2 .step_cont2.namewrap::-webkit-scrollbar {
  width: 8px;
  background-color: rgba(0,0,0,0); 
}

.step2 .step_cont2.namewrap::-webkit-scrollbar-thumb {
  background: rgba(124, 124, 124, 0.7);
  width: 8px;
  border-radius: 5px;
}

.step2 .step2_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-height: calc(100dvh - 128px);
  /* max-height: 100dvh; */
  border-radius: 16px;
  padding: 40px 0;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  border:1px solid #fff;
}

.step2 .txt{
  width: 100%;
  font-size: 16px;
  margin:0;
}
.step2 .txt.tc{
  font-size: 18px;
  font-weight: 500;
  text-align: left;
  margin:0 0 8px;
}
.step2 .txt.tc span{
  font-size: 14px;
  font-weight: 400;
  padding: 2px 12px;
}
.step2 .txt.tc .required {
  background-color: rgb(221, 90, 90);
  color: #fff;
}

.step2 .txt.tc .optional {
  background-color: #dedede;
  color: #333;
}
.step2 .voice_form{
  padding:0;
  /* margin:32px auto 0; */
  margin: 0 auto;
}
.step2 .voice_form .wrap{
  margin:0 0 24px;
}
.step2 .voice_form .wrap .name.w100{
  width: 100%;
  margin:0;
}
.step2 .voice_form .wrap .name{
  width: 46%;
  margin:0;
}
/*次へボタン*/
.namewrap .voice_form .next_step {
  margin-top: 32px;
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
  ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
  ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
  PC
  ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
  ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
  ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

  @media only screen and (min-width: 641px) {

    .step_wrap .step_cont2{
      margin: 0 auto;
      padding: 0 24px;
      color:rgba(0, 20, 100, 1);
      text-align: center;
      border-radius: 16px;
      /* border:1px solid #fff;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); */
      background: rgba(255, 255, 255, 1);
    }
    /*アイコン*/
    .step_wrap .step_cont2 .ic{
      display: block;
      width: 32px;
      margin:0 auto 12px;
    }
    .step_wrap .step_cont2 .ic img{
      width: 100%;
      max-width: 100%;
      height: 100%;
      max-height: 100%;  
    }
    /*タイトル*/
    .step_wrap .step_cont2 h1{
      color:rgba(0, 20, 100, 1);
      font-size: 28px;
      margin:0 0 16px;
    }
    /*txt*/
    .step_wrap .step_cont2 .txt{
      color:rgba(0, 20, 100, 1);
      font-size: 16px;
    }

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
  STEP2：氏名入力
  ===============================*/
  .step2 .step_cont2.namewrap {
    /* display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; */
    width: 632px;
  }
  .step2 .txt{
    width: 100%;
    font-size: 16px;
    margin:0;
  }
  .step2 .txt.tc{
    font-size: 20px;
    font-weight: 500;
    text-align: left;
    margin:0 0 8px;
  }

  .step2 .txt.tc span{
    font-size: 16px;
    font-weight: 400;
  }
  .step2 .voice_form{
    width: 440px;
    padding:0;
    /* margin:56px auto 0; */
  }
  .step2 .voice_form .wrap{
    display: flex;
    margin:0 0 24px;
  }

  .step2 .voice_form .wrap .name.w100{
    width: 100%;
    margin:0;
  }

  .step2 .voice_form .wrap .name{
    width: 48%;
    margin:0;
  }
  /*次へボタン*/
  .namewrap .voice_form .next_step {
    margin-top: 48px;
  }

  }