@charset "utf-8";
/* CSS Document */

/* reset *************************************************************/
body {line-height:1; margin:0; font-family:arial,sans-serif;}
h1, h2, h3, h4, h5, h6, p {margin:0; font-size:100%; font-weight:normal; ;display:block;}
article,footer,header {display:block;}
ul,li {list-style:none; padding:0;margin:0;}
dl,dt,dd {padding:0; margin:0;}
table,tr,td {border:0;padding:0;margin:0;}
a {display:block;color: #fff; text-decoration:none;}
img {vertical-align:baseline; border:0; padding:0; margin:0;}
div {margin:0;padding:0;}
/* //reset *************************************************************/

*, *::before, *::after {
  box-sizing: border-box;
}
body {
  font-family:"ヒラギノ角ゴ Pro W","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
  font-size: 1.6rem;
  background-color: #fff;
  position: relative;

}

body::before{
  background: url(../img/background.webp);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 750px auto;
    content: "";
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

img,video{
  max-width: 100%;
  width: auto;
  height: auto;
  margin:0 auto;
  vertical-align: bottom;
}
video{
 max-width: 100%;
 /* 白線消す*/
 filter: drop-shadow(0px 0px rgba(0,0,0,0));
 outline: none;
 border: none;
}
#wrapper { 
 overflow: hidden;
}


/******************************/
/*ヘッダー*/
/******************************/
.header{
  position: relative;
}
.fv{
 position: relative;
  width: 100%; 
  padding-bottom: 140%;
  height: 0; 
  overflow: hidden; 
}
.fv iframe {
  position: absolute; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
}
.header_logo{
  position: absolute;
  top:3%;
  right:58%;
  width: 40%;
}
.fv_title{
  position: absolute;
  width:95%;
  left: 0;
  right: 0;
  margin: 0 auto;
  top:24%;
}
.button{
  position: absolute;
  width: 92%;
  top: 77%;
  left: 0;
  right: 0;
  margin: 0 auto;
}
/******************************/
/*section2*/
/******************************/
.section2_wrappe{
  text-align: center;
}
.section02_about{
  width: 90%;
  padding-top: 10%;
  padding-bottom: 10%;
  margin: 0 auto;
}
.women_img{
  width: 95%;
  margin: 0 auto;
}
.section02_text01_img{
  width: 95%;
  padding-top: 10%;
  padding-bottom: 3%;
  margin: 0 auto;
}

/******************************/
/*section3*/
/******************************/
.section3_wrappe{
  text-align: center;
}
.section03_text01{
  width: 90%;
  padding-top: 10%;
  padding-bottom: 10%;
  margin: 0 auto;
}
.section03_smartphone{
  position:absolute;
  width: 52.26%;
  right:0;
  left:0;
  margin:0 auto;
  text-align: center;
  z-index: 3;
}
.sec3_video02{
  position: relative;
  z-index:-1;
  width:50%;
  top: 0%;
  left:0%;
  right: 0;
  clip-path: inset(1% 1% 1% 1% round 10.9%);
  z-index:2;
}
/******************************/
/*section4*/
/******************************/
.section4_wrappe{
  text-align: center;
}
.button02{
 position: absolute;
  width: 80%;
  top: 55%;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.section04_logo2{
 position: relative;
 padding-top: 10%
}


/******************************/
/*footer*/
/******************************/
.footer-wrapper {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  text-align: center;
  background-color: #000;
  color: #fff;
  line-height: 1.6;
  font-weight: bold;
  padding: 30px 10px 30px;
  font-family:"ヒラギノ角ゴ Pro W","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}

.footer-contents {
  font-size: 1.2rem;
  margin-bottom: 3%;
}
.footer-text{
  font-size: 1.2rem;
}
.footer-column {
  display: flex;
  justify-content: center;
}
.footer-column a{
  display: inline-block;
}

@media screen and (max-width: 768px) {
  .footer-contents {
    font-size: 2.8vw;
  }
  .footer-text {
    font-size: 2.6vw;
  }
  .footer-wrapper {
    padding: 3% 5% 3%;
  }
}

/*-------------------------------------------
.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 300ms;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

/******************************/
/*ボタンアニメーション*/
/******************************/
.dokidoki{   
  animation-name:dokidoki;	/* アニメーション名の指定 */
  animation-delay:0s;		/* アニメーションの開始時間指定 */
  animation-duration: 1s;	/* アニメーション動作時間の指定 */
  animation-timing-function: ease-in-out;
  /* アニメーションの動き（徐々に早く徐々に遅く）*/
  animation-iteration-count: infinite; /* アニメーションをループさせる */
  }
  @keyframes dokidoki {
  0% {
  transform: scale(1);
  }
  40% {
  transform: scale(1);
  }
  50% {
  transform: scale(1.1);
  }
  60% {
  transform: scale(1);
  }
  100% {
  transform: scale(1);
  }
  }

/******************************/
/*フェードイン*/
/******************************/
.fadein {
  opacity: 0;
  transform: translate(0, 50px);
  transition: all 300ms;
}
.fadein.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

/*---------
スクロール上下
-------------*/
@keyframes updown {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -30px);
  }
  100% {
    transform: translate(0, 0);
  }
}

/*---------
ブルブル
-------------*/
.buruburu {
  animation: hurueru .1s  infinite;
}

.buruburu2 {
  display: inline-block;
  animation: hurueru2 .1s  infinite;
}
@keyframes hurueru {
  0% {transform: translate(0px, 0px) rotateZ(0deg)}
  25% {transform: translate(2px, 2px) rotateZ(1deg)}
  50% {transform: translate(0px, 2px) rotateZ(0deg)}
  75% {transform: translate(2px, 0px) rotateZ(-1deg)}
  100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

@keyframes hurueru2 {
  0% {transform: translate(0px, 0px) rotateZ(0deg)}
  25% {transform: translate(1px, 30px) rotateZ(1deg)}
  50% {transform: translate(1px, 30px) rotateZ(0deg)}
  75% {transform: translate(1px, 30px) rotateZ(-1deg)}
  100% {transform: translate(1px, 0px) rotateZ(0deg)}
}

/*---------
回転
-------------*/
@keyframes rotate {
  0% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}

@keyframes rotate2 {
  0% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(-4deg);
  }
}


/*---------
sp
-------------*/

@media screen and (min-width: 721px) {
  body {font-size:2rem;}
  #wrapper {width:750px;margin:auto;}
  body::before {
    display: block;
    background-size: auto;
}

}
@media screen and (max-width: 750px) {
  #wrapper {width:100%;}
  .section1_text_wrapper{
  font-size: 4.4vw;
  line-height: 7vw;
}
.step-description{
font-size: 1rem;
}
h3 {
  font-size: 1.6rem;
}
.text{
   font-size: 1rem;
   line-height: 1.4rem;
}
  body::before {
    display: block;
    background-size: 100% auto;
}
.text.text2{
  font-size: 0.9rem;
  line-height: 1.5rem;
}
}

@media screen and (max-width: 510px) {
.text{
   line-height: 1rem;
}
h3 {
  font-size: 1.2rem;
}
.text{
   font-size: 0.9rem;
   line-height: 1.2rem;
}
}

@media screen and (max-width: 320px) {
  .step-title{
    font-size:1.0rem;
  }
.step-description{
  font-size:0.65rem;
}
}