@charset "UTF-8";
html {
    width: 100%;
    height: 100%;
    margin:  0 auto;
    text-align: center;
    animation: loading 1s;
    scroll-behavior: smooth;
    font-family: 'Arial',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif;
}
img {
    width: 100%;
    vertical-align: bottom;
}
.pc {display: block;}
.sp {display: none;}
@media screen and (max-width: 769px) {
    .pc { display: none;}
    .sp { display: block;}
}

.wrapper{
    width:100%;
    margin:0 auto;
    background:url(../img/back.jpg);
    animation: bgiLoop 5s linear infinite;
}
@keyframes bgiLoop {
    0% { background-position: 0 0;}
  100% { background-position: -100px 200px;}
}
.fv_content{
    max-width:900px;
    margin:0 auto;
    background:url(../img/fv_back.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.fv{
    width:90%;
    margin:0 auto;
}
.fv_column{
    display: flex;
    margin:-70px 0 5% 0;
}
.fv_a_child,.fv_b_child,.fv_c_child{
    flex:1;
}
.fv_b_child{
 margin:0 20px;
}
.box{
    width:100%;
    margin:0 0 10% 0;
    background:#fff;
    border:solid 5px #ff4d4d;
    padding:5% 0;
}
.line_btn{
    width:90%;
    margin:5% 5% 0 5%;
}
.btn_txt{
    width:70%;
    margin:0 15%;
}
.box p{
    margin:15px 0 0 0;
    font-size:21px;
}

@media screen and (max-width: 769px) {
  .box p{
    font-size:15px;
}
}
/*check box**/
/*リセット */
input[type="checkbox"]  {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
  }

/* チェックボックスデザイン */
input[type="checkbox"] {
    cursor: pointer;
    padding-left: 30px;
    vertical-align: middle;
    position: relative;    
  }
  input[type="checkbox"]::before,
  input[type="checkbox"]::after {
    content: "";
    display: block; 
    position: absolute;
  }
  input[type="checkbox"]::before {
    background-color: #fff;
    border-radius: 0%;
    border: 1px solid #666464;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    top: 50%;
    left: 5px;
  }
  input[type="checkbox"]::after {
    border-bottom: 3px solid #666464;
    border-left: 3px solid #666464;
    opacity: 0;
    height: 6px;
    width: 11px;
    transform: rotate(-45deg);
    top: -7px;
    left: 10px;
  }
  @media screen and (max-width: 769px) {
    input[type="checkbox"]::after {
      top:0;
    }
  }
  input[type="checkbox"]:checked::after {
    opacity: 1;
  }
  .join_box{
    max-width:900px;
    margin:0 auto;
    background:url(../img/dot_back.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding:5% 0 0 0;
  }
  @media screen and (max-width: 769px) {
    .join_box{
        padding:10% 0 0 0;
    }
  }
  .join_zone{
    width:80%;
    margin:0 auto;
  }
  .join_midasi{
    margin:0 0 8% 0;
  }
  .tape{
    margin:8% 0 0 0;
  }
  @media screen and (max-width: 769px) {
    .tape{
        margin:15% 0 0 0;
      }
  }
  .howto{
    width:100%;
    margin:0 auto;
    background:#ffc555;
    padding:10% 0;
  }
  .howto_midasi{
    width:80%;
    margin:0 auto;
  }
  .howto_midasi img{
    margin:0 0 5% 0;
}

  .step{
    width:80%;
    margin:0 auto;
  }
  .step_last{
    width:80%;
    margin:0 auto;
  }
  .jisseki_box{
    max-width:900px;
    margin:0 auto;
    background:url(../img/dot_back.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding:5% 0;
  }
  @media screen and (max-width: 769px) {
    .jisseki_box{
        padding:10% 0;
    }
  }
  .jisseki_midasi{
    width:70%;
    margin:0 auto;
  }
  .voice_case{
    width:80%;
    margin:0 auto;
  }
  .voice_case img{
    margin:7% 0 0 0;
  }

  
/* 拡大 */
.zoomIn{
  animation-name:zoomInAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
  transform: scale(0.6);
  }
  to {
      transform: scale(1);
  }
}

.js-scroll {
	transition: all .6s ease;
	transform: translateY(30px);
	opacity: 0;
}
  
.js-scroll.is-show {
	transform: translateY(0);
	opacity: 1;
}