@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');

/* COMMON ==================== */

#wrapper{
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 100%;
	overflow: hidden;
  background-image:url(../img/bg_x2.png);
  background-size:cover;
  background-position: 0 70%;
  background-repeat:no-repeat;
}
.wrapper-bg-pattern{
  background-image:url(../img/bg-pattern_x2.png);
  background-size:100%;
  background-repeat:repeat-y;
  
}

.margin-top3{margin-top:3%;}
.margin-top10{margin-top:10%;}
.margin-top15{margin-top:15%;}

.margin-top-4{margin-top:-4%;}
.margin-top-5{margin-top:-5%;}
.margin-top-10{margin-top:-10%;}

.content{
  width:100%;
}
.content img{
  width:100%;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
  .content{
   max-width:1920px;
   margin:0 auto;
 }
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .content{
    width:100%;
    margin:0 auto;
  }
}

.movie{
  width:80%;
  margin:5% auto 0;
  position: relative;
}
.movie iframe{
  position:absolute;
  width:80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  aspect-ratio: 16 / 9;
}

.tit_robot{
  margin-top: -30%;
}
.bg-animalskin-robt,
.bg-animalskin-beast{
  width: 80%;
  margin: -10% auto 0;
  background-image:url(../img/bg-animalskin_x2.png);
  background-size:100%;
  background-repeat:no-repeat;
}
.bg-animalskin-beast{
  background-size:100% 90%;
}
.content-block{
  width: 100vw;
  margin: 0 calc(50% - 50vw);
}
.tit_beast{
  margin-top: -30%;
}
.pic_product{
  width:80%;
  margin: 0 auto;
}


@media screen and ( min-width:768px ) { /* PC ==================== */
  .btn_ttm{
    width:500px;
    text-align: center;
    margin:0 auto;
    padding: 50px 0 100px 0;
  }
  .btn_ttm img{
    width:100%;
  }
}
@media (orientation: portrait) and ( max-width:768px ) { /* SP ==================== */
  .btn_ttm{
    width:80%;
    text-align: center;
    margin:0 auto;
    padding: 20px 0 50px 0;
  }
  .btn_ttm img{
    width:100%;
  }
}