@charset "UTF-8";
a{
  text-decoration: none;
}
img{
  width:100%;
  margin:0 auto;
  vertical-align: middle;
}
body{
  width:100%;
  margin:0 auto;
  background:#fb31b9;
}
.pc{display: block;}
.sp{display: none;}

 @media screen and (max-width: 700px) {
  .pc{display: none;}
  .sp{display: block;}

  .top_bar{
    width:100%;
    margin:0 auto;
    padding:15px 0;
    background:#9c03ff;
  }
.top_bar h1{
  font-size:23px;
  text-align:center;
  color:#fff000;
  font-family: 'Kaisei Decol', serif;
}
 }
.wrapper{
  width:100%;
  margin:0 auto;
  overflow:hidden;
}
.float_btn{
  position:fixed;
  z-index:10000;
  right:3%;
  bottom:3%;
}
.float_btn img{
  width:300px;
}
@media screen and (max-width: 700px) {
  .float_btn img{
    width:90%;
  }
}
	@keyframes infinity-scroll-left {
    from {
      transform: translateX(0);
    }
      to {
      transform: translateX(-100%);
    }
    }
    .scroll-infinity__wrap {
      display: flex;
      overflow: hidden;
    }
    .scroll-infinity__list {
      display: flex;
      list-style: none;
      padding: 0
    }
    .scroll-infinity__list--left {
      animation: infinity-scroll-left 80s infinite linear 0.5s both;
    }
    .scroll-infinity__item {
      width: calc(100vw / 10);
      height:180px;
      overflow: hidden;
    }
    @media screen and (max-width: 768px) {
      .scroll-infinity__item {
        width: calc(100vw / 5);
        height:100px;
      }
    }
    .scroll-infinity__item>img {
      width: 100%;
    }
    @keyframes infinity-scroll-right {
      from {
        transform: translateX(-100%);
      }
        to {
        transform: translateX(0%);
      }
      }
      .scroll-infinity__list--right{
        animation :infinity-scroll-right 80s infinite linear 0.5s both;
      }
      /*****ここまで****/

.fv{
  max-width:1500px;
  margin:0 auto;
  position:relative;
}
.fv_title{
  max-width:500px;
  position:absolute;
  z-index:2;
  margin:0 auto;
  right:0;
  left:0;
  bottom:10px;
}
@media screen and (max-width: 700px) {
  .fv_title{
    width:90%;
    right:5%;
  }
}
.si-ru{
  position:absolute;
  z-index:1;
  right:28%;
  bottom:20%;
}
.si-ru img{
  width:150px;
}
.obi_zone{
  width:100%;
  margin:0 0 5% 0;
  padding:15px 0;
  background:#9c03ff;
}
@media screen and (max-width: 700px) {
  .obi_zone{
    margin:0 auto;
    padding:7% 0;
  }
}
.defo{
  max-width:1000px;
  margin:0 auto;
}

.myrow{display:-webkit-flex;display:flex;}
.mycol-1{
    flex:1;
    border-right:solid 1px #fff;
}
.mycol-1 p{
    font-size:21px;
    color:#fff;
    text-align:center;
    font-family: 'Kaisei Decol', serif;
}
@media screen and (max-width: 700px) {
  .mycol-1 p{
    font-size:10px;
  }
}
@media screen and (max-width: 700px) {
  .twice{
    display:-webkit-flex;
    display:flex;
    font-family: 'Kaisei Decol', serif;
  }
  .ttwice{
    display:-webkit-flex;
    display:flex;
    margin:5% 0 0 0;
    font-family: 'Kaisei Decol', serif;
  }
.t_column{
  flex:1;
}

.t_column p{
  color:#fff;
  text-align: center;
}
}
.zentai{
  width:100%;
    margin:0 auto;
    position: fixed;
    z-index: -1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
    animation: flash 5s linear infinite;
  }
.zentai img{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    min-height: 100%;
    min-width: 100%;
    object-fit: cover;
  }
  #backup{
    max-width:800px;
    margin:0 auto;
    padding:0 0 5% 0;
  }
  @media screen and (max-width: 700px) {
    #backup{
      margin:10% 0 0 0;
    }
  }
  .backup_title{
    width:100%;
    margin:0 auto;
  }
  .backup_title img{
    width:70%;
    margin:0 15% 3% 15%;
  }
  @media screen and (max-width: 700px) {
    .backup_title img{
      width:80%;
      margin:0 10% 5% 10%;
    }
  }
  .paper{
    max-width:800px;
    margin:0 auto;
    padding:5% 0;
    background:#fff;
  }
  @media screen and (max-width: 700px) {
    .paper{
      width:80%;
    }
  }
  .akira{
    width:30%;
    margin:0 auto;
  }
  .akira_box{
    max-width:700px;
    margin:0 auto;
    text-align: center;
  }
  .akira_box h3{
    color:#fb31b9;
    font-size:21px;
    font-weight:bold;
    display: block;
    margin:5px 0;
  }
  .akira_box p{
    font-size:15px;
    line-height:31px;
    text-align: left;
    margin:20px 0;
  }
  @media screen and (max-width: 700px) {
    .akira_box p{
      font-size:12px;
    line-height:18px;
      width:90%;
      margin:0 5%;
    }
    .disko{
      width:90%;
      margin:5%;
    }
  }
  .pinkmark{
    background:#fb31b9;
    padding:2px 5px;
    color:#fff;
  }
  /*#sikaku*/
  #sikaku{
    width:100%;
    margin:0 auto;
    text-align: center;
  }
  .sikaku_title{
    max-width:400px;
    margin:0 auto;
  }
  @media screen and (max-width: 700px) {
    .sikaku_title{
      width:80%;
      margin:0 10%;
    }
  }
  #sikaku h3{
    font-size:21px;
    line-height:31px;
    font-weight:bold;
    margin:15px 0;
    font-family: 'Kaisei Decol', serif;
  }
  @media screen and (max-width: 700px) {
    #sikaku h3{
      font-size:17px;
      line-height:25px;
    }
  }
  p.chibi{
    font-size:15px;
  }
  @media screen and (max-width: 700px) {
  p.chibi{
    font-size:10px;
  }
  }
  .caution_box{
    width:80%;
    margin:5% 10% 0 10%;
    border:solid 1px #cdcdcd;
    padding:3% 10%;
  }
  @media screen and (max-width: 700px) {
    .caution_box{
      width:90%;
      margin:5% 5% 0 5%;
    }
  }
  p.caution_title{
    font-size:21px;
    text-align: center;
  }
  p.caution_mini{
    width:80%;
    margin:0 auto;
    font-size:12px;
    line-height:21px;
    text-align: left;
  }
  @media screen and (max-width: 700px) {
    p.caution_mini{
      width:100%;
    }
  }
  .btn{
    max-width:300px;
    margin:0 auto;
  }
  @media screen and (max-width: 700px) {
    .btn{
      width:90%;
      margin:0 5%;
    }
  }
  .btn img{
    margin:10% 0 0 0;
  }

  /*flow**/
  #flow{
    width:100%;
    margin:5% 0;
  }

.flow_title{
max-width:500px;
margin:0 auto;
}
@media screen and (max-width: 700px) {
  .flow_title{
    width:80%;
    margin:0 10%;
  }
}
#flow h3{
  font-size:21px;
  line-height:31px;
  font-weight:bold;
  text-align: center;
  margin:15px 0;
  font-family: 'Kaisei Decol', serif;
}
@media screen and (max-width: 700px) {
  #flow h3{
    font-size:17px;
    line-height:25px;
  }
}

.step{
  width:80%;
  margin:0 auto;
}

/*plan**/
  #plan{
    width:100%;
    margin:5% 0;
  }
#plan h3{
    font-size:21px;
    line-height:31px;
    font-weight:bold;
    text-align: center;
    margin:15px 0;
    font-family: 'Kaisei Decol', serif;
  }
  @media screen and (max-width: 700px) {
    #plan h3{
      font-size:17px;
      line-height:25px;
    }
  }
.plan_title{
  max-width:500px;
margin:0 auto;
}
@media screen and (max-width: 700px) {
  .plan_title{
    width:80%;
    margin:0 10%;
  }
}
.plan_box{
  max-width:700px;
  margin:0 auto;
  display:-webkit-flex;
  display:flex;
}

.plan_child{
    flex:1;
    margin:10px;
}
.plan_child p{
  font-size:15px;
  font-weight:bold;
  text-align: center;
  margin:10px 0 0 0;
  background:#9c03ff;
  border-radius: 100px;
  padding:10px 0;
  color:#fff;
  font-family: 'Kaisei Decol', serif;
}
@media screen and (max-width: 700px) {
  .plan_child p{
    font-size:10px;
    padding:10px;
  }
}
.bottom{
  max-width:800px;
  margin:0 auto;
  padding:0 0 5% 0;
}
@media screen and (max-width: 700px) {
  .bottom{
    padding:0 0 40% 0;
  }
}
.bottom h3{
  font-size:21px;
  line-height:31px;
  font-weight:bold;
  text-align: center;
  margin:15px 0;
  color:#fff;
  font-family: 'Kaisei Decol', serif;
}
@media screen and (max-width: 700px) {
  .bottom h3{
    font-size:18px;
  line-height:25px;
  }
}
.bottom_title{
  max-width:600px;
  margin:0 auto;
}
@media screen and (max-width: 700px) {
  .bottom_title{
    width:90%;
    margin:0 10% 0 0;
  }
}
.bottom_btn{
  width:100%;
  margin:0 auto;
}
.bottom_btn img{
  width:50%;
  margin:0 25%;
}
@media screen and (max-width: 700px) {
.bottom_btn img{
  width:80%;
  margin:0 10%;
}
}
/*footer**/
footer{
  width:100%;
  margin:0 auto;
  background:#000;
  padding:10px 0;
}
footer p{
  font-size:12px;
  text-align: center;
  color:#fff;
}
/*アニメーション**/
.text__bound {
  animation:key 0.3s ease infinite alternate;
}
@keyframes key {
  0% {transform: translateY(0px);}
  100% {transform: translateY(-10px);}
}

/* ぼかしから出現 */
.blur{
  animation-name:blurAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
  filter: blur(20px);
  transform: scale(1.02);
  }

  to {
  filter: blur(0);
  transform: scale(1);
  }
}
@keyframes flash {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}
}