@charset "UTF-8";

/*
IA_CSS
 */

body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-top: 0;
}

img {
  max-width: 100%;
  height: auto;
}

.result {
  overflow-x: hidden !important;
}

.fv {
  top: 0;
  left: 0;
}

.fv video {
  width: 100%;
  height: auto;
}




.ia_inbody_offer .campaign_cta .campaigan_limit {
  /*リアルタイム*/
  position: absolute !important;
  width: 80%;
  text-align: center;
  font-size: calc(2.7rem + 2.3 * ((100vw - 320px) / 1120));
  font-weight: 700;
  background-color: #af256d !important;
  /*background: linear-gradient(180deg, #ffff33, #fff);
  background: -webkit-linear-gradient(90deg, #ffff33, #fff);*/
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  top: 0%;
  left: 10%;
}

/* ---ボタン外のリアルタイムSTART--　*/
.ia_offer .campaign_cta .campaigan_limit {
  /*リアルタイム*/
  position: absolute !important;
  width: 80%;
  text-align: center;
  font-size: calc(2.7rem + 2.3 * ((100vw - 320px) / 1120));
  font-weight: 700;
  background-color: #af256d !important;
  /*background: linear-gradient(180deg, #ffff33, #fff);
    background: -webkit-linear-gradient(90deg, #ffff33, #fff);*/
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  bottom: 30.5%;
  left: 10%;
}

.ia_offer .campaign_cta .campaign_gif {
  position: absolute;
  font-size: calc(2.8rem + 2.8 * ((100vw - 320px) / 1120));
  font-weight: 900;
  background: linear-gradient(180deg, #ffff33, #fff);
  background: -webkit-linear-gradient(90deg, #ffff33, #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  bottom: 19.5%;
  left: 8.5%;
}

/* ---ボタン外のリアルタイムEND---　*/
/* ---ボタン上のリアルタイムSTART---　*/
.cta_box .campaign_cta .campaigan_limit {
  /*リアルタイム*/
  position: absolute;
  font-size: calc(2.7rem + 2.3 * ((100vw - 320px) / 1120));
  font-weight: 700;
  background-color: #af256d !important;
  /*background: linear-gradient(180deg, #ffff33, #fff);
  background: -webkit-linear-gradient(90deg, #ffff33, #fff);*/
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  bottom: 29.5%;
  left: 9%;
}

.campaign_cta .campaigan_ltxt {
  font-size: calc(3.5rem + 2.8 * ((100vw - 320px) / 1120));
  font-weight: 900;
}


/* @keyframes junp{
  0% {
    transform: scale(0.95,0.95);
  }
  40% {
    transform: scale(1,1);
  }
  100% {
    transform: scale(0.95,0.95);
  }
} */


@media (max-width: 750px) {
  .campaign_cta .campaigan_limit {
    font-size: 2.5rem;
    font-size: calc(2.5rem + 3 * ((100vw - 320px) /1120));
    left: 20%;
  }

}

@media (max-width: 478px) {
  .campaign_cta .campaigan_limit {
    font-size: 2.5rem;
    font-size: calc(2.7rem + 4 * ((100vw - 320px) /1120));
    left: 20%;
  }
}

/* -----------------------------------------
  foreword / 手術不要
----------------------------------------- */
.foreword {
  position: relative;
}

.foreword video {
  position: absolute;
  bottom: 11%;
  width: 80%;
  left: 10%;
}

/* -----------------------------------------
  tokuten / 4大特典
----------------------------------------- */

.tokuten_ltime {
  position: relative;
  overflow: hidden;
/*   margin-top: -1.6%; */
}

.tokuten_mon {
  position: absolute;
  top: 1.7%;
  left: 38%;
}

/*--- 特典のリアルタイム --- */
.tokuten_mon_text {
  color: #fff;
  font-size: calc(5rem + 2.3 * ((100vw - 320px) / 750));
  font-weight: 900;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}


#tokuten_realtime {
  /* color: #4f3d38; */
  font-size: calc(8rem + 2.3 * ((100vw - 320px) / 750)) !important;
}

/* 特典リアルタイム */
.tokuten_cta_box {
  margin: 3%;
}

.tokuten_cta_box .campaigan_limit {
  margin-bottom: -1%;
}



/* -----------------------------------------
  cta_btn / 
----------------------------------------- */
.ia_offer .ia_cta {
  /*バナーの不透明１*/
  opacity: 1 !important;
}

.last_offer .ia_cta {
  /*バナーの不透明１*/
  opacity: 1 !important;
}

.ia_offer .ia_cta:hover {
  opacity: 1 !important;
}


.cta_box {
  position: relative;
}

.cta_box .ia_cta {
  position: absolute;
  bottom: 10% !important;
  padding: 0 2%;

}

/* CTA上のリアルタイム */
.cta_box .campaigan_limit {
  margin-bottom: -12%;
}


/*---- 光らせる ---*/
.shine {
  display: inline-block;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.shine:after {
  content: "";
  height: 100%;
  width: 30px;
  position: absolute;
  top: -180px;
  left: 0;
  background-color: #fff;
  opacity: 0;
  -webkit-transform: rotate(45deg);
  -webkit-animation: reflection 2.5s ease-in-out infinite;
}

@keyframes reflection {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0;
  }

  80% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }

  81% {
    -webkit-transform: scale(4) rotate(45deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

/*-- はねる --*/

.cta_box .ia_cta {
  animation: 1s .5s infinite alternate forwards running puyon;

  animation-play-state: running;
}


/* @keyframes puyon{
  0% {
    transform: scale(0.95,0.95);
  }
  40% {
    transform: scale(1,1);
  }
  100% {
    transform: scale(0.95,0.95);
  }
} */

/*
@keyframes puyon {
    0%    { transform:translate(0, 0); }
    16.6% { transform:translate(0, -.9rem); animation-timing-function:ease-in; }
    33.3% { transform:translate(0, 0); }
    49.8% { transform:translate(0, -.5rem); animation-timing-function:ease-in; }
    66.4% { transform:translate(0, 0); }
    100%   { transform:translate(0, -.2rem); animation-timing-function:ease-in; }
    100%  { transform:translate(0, 0); }
}*/

/* -----------------------------------------
 inter_flow / 初回問診の流れ
----------------------------------------- */
.inter_flow_box1,
.inter_flow_box2,
.inter_flow_box3 {
  position: relative;
}

.inter_flow_box1 .flow_flame,
.inter_flow_box2 .flow_flame,
.inter_flow_box3 .flow_flame {
  position: absolute;
  top: 0;
}

.inter_flow_box1 .flow_mv {
  left: 5%;
  margin-bottom: 24.5%;
}

.inter_flow_box2 .flow_mv {
  left: 5%;
  top: 5%;
  margin-bottom: 21.6%;
}

.inter_flow_box3 .flow_mv {
  left: 5%;
  top: 5.8%;
  margin-bottom: 27%;
}

.flow_mv video {
  width: 93%;
}

/* -----------------------------------------
 result / 実績満足度
----------------------------------------- */
.result_box {
  position: relative;
}

.keizoku_mannzoku {
  position: absolute;
  width: 100%;
  padding: 0 5%;
  bottom: 13%;
}

.keizoku_mannzoku>img {
  width: 50%;
  float: left;
  padding: 0 1%
}

.keizoku,
.manzoku {
  opacity: 0;
  transform: translateY(2rem);
}

/*----200,000件実績--*/
.result_japan {
  position: relative;
}

.result_japan #achievement {
  position: absolute;
  bottom: 63%;
  padding-left: 17%;
}

#result_guide {
  position: absolute;
}

#result_guide img {
  position: absolute;
  right: 0;
  bottom: -18%;
  width: 40%;
}

/*--------ランダム数字--------*/
#achievement {
  font-family: 'Times New Roman', Times, serif, 'MS P明朝', 'ヒラギノ明朝';
  margin: 0 auto;
  text-align: center;

}

.random {
  font-size: 6rem;
  font-weight: bold;
  line-height: 1.2em;
  color: #cdb277;
}

.shuffle {
  font-size: 14rem;
  font-weight: bold;
  line-height: 1.2em;
}

/*文字のグラデーション*/
.random {
  color: white;
  background: -webkit-linear-gradient(-90deg, white, #cdb277);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width:750px) {
  .random {
    font-size: 5rem;
    font-weight: bold;
    line-height: 1.2em;

  }

  .shuffle {
    font-size: calc(14rem + 10 * ((100vw - 320px) / 430));
    font-weight: bold;
    line-height: 1.2em;
  }

}

/*--全国実績動画---*/
#result_guide {
  position: absolute;
  bottom: 11.5%;
}

#result_guide video {
  width: 88%;
  padding-left: 11%;
}

/*-- 全国実績動画END-----*/


/*-------------------
  簡略アプローチスライド
  -------------------*/
/*------ スライダーの背景 ------*/
.simple_approach_slide {
  position: relative;
  width: 100%;
}

/*------ スライダーの横幅 ------*/
.simple_approach_slide .slide-items {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  top: 3%;
}

/*------ スライダー画像 ------*/
.simple_approach_slide .slide-items div {
  width: 100%;
  left: .1%;
}

/*-------- 高さ調整 ----------*/
.simple_approach_slide .slide-items .slick-slide {
  height: auto !important;
}

/*---------- 矢印 ----------*/
.simple_approach_slide .slide-items .slick-next {
  right: 1% !important;
  padding: .5rem auto;
}

.simple_approach_slide .slide-items .slick-prev {
  left: 1% !important;
  padding: .5rem auto;
}

.simple_approach_slide .slide-items .slick-arrow {
  /* width: initial!important;
 height: initial!important;*/
  width: auto;
  height: auto;
  z-index: 2 !important;
}

.simple_approach_slide .slide-items .slick-arrow:before {
  font-size: 6rem !important;
  opacity: 1 !important;
  /*color: #a3d7ff;*/
}


.slick-dots li button:before {
  font-size: 1.2rem !important;
}

.simple_approach_slide .slide-items .slick-dots {
  bottom: 2rem;
}

/* @media(max-width: 478px){
    .simple_approach_slide .slide-items .slick-arrow:before {
    font-size: 8rem !important;
    } */

/*------ スライダーの横幅 ------*/
/* .simple_approach_slide .slide-items {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  bottom:-3%;
} */

/* .simple_approach_slide .slide-items .slick-dots {
  bottom:2rem;
  } 
}  */


/* @media(max-width: 478px){
  .simple_approach_slide .slide-items .slick-arrow:before {
  font-size: 8rem !important;
  }

  ------ スライダーの横幅 ------
  .simple_approach_slide .slide-items {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  bottom:-1%;
} */
/* 
  .simple_approach_slide .slide-items .slick-dots {
  bottom:0rem;
  }
} */

/*---
.simple_approach .slick-slide:not(.slick-center) {
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
}
---*/


/* -----------------------------------------
 result / 実績満足度
----------------------------------------- */
.comparison #graph_box {
  position: relative;
  overflow: hidden;
}

.comparison #graph_box .chart-container {
  position: absolute;
  bottom: 24%;
  left: 14%;

}

/*円グラフ*/
.chart-container {
  position: relative;
  margin: 0 auto;
  width: 73%;
}

#graph_comparison {
  text-align: center;
  width: 3rem;
}

/*円グラフ数字*/
#graph {
  position: absolute;
  top: 15%;
  left: 10%;
}

.graph_random {
  font-family: 'Times New Roman', Times, serif, 'MS P明朝', 'ヒラギノ明朝';
  font-size: 12rem;
  color: #fff;
  text-shadow:
    .4rem .7rem .7rem #f171a2, -.4rem -.4rem .4rem #f171a2,
    -.4rem .7rem .7rem #f171a2, .4rem -.4rem .4rem #f171a2,
    .4rem 0 .4rem #f171a2, -.4rem -0 .4rem #f171a2,
    0 .4rem .4rem #f171a2, .4rem -.4rem .4rem #f171a2;
}

.graph_random .percent {
  margin-left: -3.8%;
}

/*@media(max-width: 800px){
  }*/

.graph_random .graph_shuffle {
  font-size: 40rem;
  color: #fff;
  text-shadow:
    .7rem .7rem .7rem #f171a2, -.7rem -.7rem .7rem #f171a2,
    -.7rem .7rem .7rem #f171a2, .7rem -.7rem .7rem #f171a2,
    .7rem 0 .7rem #f171a2, -.7rem -0 .7rem #f171a2,
    0 .7rem .7rem #f171a2, .7rem -.7rem .7rem #f171a2;
}

.graph_txt {
  /*減量成功率~~*/
  position: absolute;
  width: 58%;
  bottom: -5%;
  left: 21%;
}

/*-----------------*/

/* -----------------------------------------
tv_cm/ 信憑性
----------------------------------------- */
.tv_cm {
  position: relative;
}

.tv_cm .cm-box {
  position: absolute;
  bottom: 28%;
}

/*--- 10冠 ---*/
.ten_crowns {
  position: relative;
  top: 0;
}

.ten_crowns .crowns_box {
  margin-top: -50%;
  padding-bottom: 16%;
}

.crowns_img div {
  width: 100%;
}

.crowns_img div img {
  width: 95%;
}

/* .crowns-slider .swiper-wrapper{
  transition-timing-function: linear;
}

.swiper_box {
  margin-top:-50%; 
  padding-bottom:12% !important;
}

.ten_crowns{
  position: relative;
  top:0;
}

.ten_crowns .crowns_box{
  position: absolute;
 margin-top:-50%;
 padding-bottom: 16%;
} */

/* .crowns_img div {
  width:100%;
}
.crowns_img div img {
  width: 95%;
}  */
/*------------------------*/
/*ふわっと小→大出る*/
.fadeUp {
  -webkit-animation-name: fadeUpAnime;
  animation-name: fadeUpAnime;
  /*アニメーションの名前*/
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  /*アニメーションの実行時間*/
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  /*アニメーション後、要素が表示されたままにする*/
}

@-webkit-keyframes fadeUpAnime {

  from {
    opacity: 0;
    /*非表示*/
    transform: scale(0.9, 0.9);
  }

  to {
    opacity: 1;
    /*表示*/
    transform: scale(1, 1);
  }

  0% {
    opacity: 0;
    /*非表示*/
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    /*縦方向に100pxずらす*/
  }

  100% {
    opacity: 1;
    /*表示*/
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    /*元の位置*/
  }
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    /*非表示*/
    transform: scale(0.9, 0.9);
  }

  to {
    opacity: 1;
    /*表示*/
    transform: scale(1, 1);
  }

  0% {
    opacity: 0;
    /*非表示*/
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    /*縦方向に100pxずらす*/
  }

  100% {
    opacity: 1;
    /*表示*/
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    /*元の位置*/
  }
}

.fadeUpTrigger {
  opacity: 0;
  /*非表示*/
}


/*----------
  エビデンス動画スライド
  ------------*/
/*------ スライダーの背景 ------*/
.evidence_mov {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/*------ スライダーの横幅 ------*/
.evidence_mov .slide-items {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  bottom: 11%;
}

/*------ スライダー画像 ------*/
.evidence_mov .slide-items div {
  width: 100%;
  left: 1.5%;
}

.evidence_mov .slide-items div img {
  width: 90%;
  margin-left: 2%;
}

/* videoしているので限定 */
.evidence_mov .slide-items div video {
  width: 90%;
  margin-left: 2%;
}

/*-------- 高さ調整 ----------*/
.evidence_mov .slide-items .slick-slide {
  height: auto !important;
}

/*---------- 矢印 ----------*/
.evidence_mov .slide-items .slick-next {
  right: 3% !important;
}

.evidence_mov .slide-items .slick-prev {
  left: 3% !important;
}

.evidence_mov .slide-items .slick-arrow {
  width: initial !important;
  height: initial !important;
  z-index: 2 !important;
}

.evidence_mov .slide-items .slick-arrow:before {
  font-size: 5rem !important;
  color: #6591d1;
}

@media(max-width: 478px) {
  .evidence_mov .slide-items .slick-arrow:before {
    font-size: 8rem !important;
    color: #6591d1;
  }

  .evidence_mov .slide-items .slick-next {
    right: 1.5% !important;
  }

  .evidence_mov .slide-items .slick-prev {
    left: 1.5% !important;
  }

}

.foreword {
  position: relative;
}

/* -----------------------------------------
  インボディ計測 / 
----------------------------------------- */
.inbody {
  position: relative;
  overflow: hidden;
}

.inbody .inbody_bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.inbody .inbody_poto {
  position: absolute;
  width: 35%;
  right: 6%;
  z-index: 1;
  top: 15%;
}

/* インボディ計測動画
.inbody .inbody_mov{
  position: absolute;
  width: 35%;
  right: 6%;
  z-index: 1;
  top:15%;
}
/*


#fixed_banner p{
  padding-bottom:0 !important;
}*/

.ia_flobtn {
  z-index: 100 !important;
}

/*========
楽痩せのfqa
==========*/
#wrapper dl.accordion {
  margin-bottom: 0 !important;
}

#wrapper .rakuyase_wrapper .rakuyase_faq {
  /* background-color:#ffffff !important; */
  /* background-image: url('../../common/img/lp/bg_faq.webp'); */
  background-repeat: no-repeat;
  background-size: cover;
}

.faq-atekori-title {
  margin-bottom: 1.6rem !important;
  ;
}

.faq-inner {
  width: 90%;
  margin: 0 auto !important;
  ;
}

.faq-katekori {
  background-image: url('../../common/img/faq/rakuyase/rakuyase_qa_bg.webp');
  background-size: 100% !important;
}

.faq-other-btn {
  /*その他の質問ボタン*/
  width: 73% !important;
  margin: 0 auto !important;
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

/*-- QA矢印 --*/
#wrapper .rakuyase_faq dt:after {
  content: "";
  background-image: url('../../common/img/faq/rakuyase/qa_yajirusi.webp') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  position: absolute !important;
  width: 5.5% !important;
  padding-top: 5.5% !important;
  right: 2% !important;
  top: 50% !important;
  transform: translateY(-50%);
  transition: 0.4s !important;
}


#wrapper .rakuyase_faq dt.selected::after {
  width: 5.5% !important;
  padding-top: 5.5% !important;
  right: 2%;
  transform: translateY(-50%) rotate(180deg) !important;
  transition: 0.4s !important;
}

#wrapper .rakuyase_faq .faq-other-btn:after {
  right: 8% !important;
}

#wrapper .rakuyase_faq .faq-other-btn.selected::after {
  right: 8% !important;
}


/* ==========================================
    藤井先生アニメコンテンツ
=========================================== */
.charm-mov {
  position: relative;
}


#charm_video video {
  margin-top: 86%;
  margin-left: 35%;
  padding-bottom: 48%;
  width: 55%;
}

.charm-mov .charm-bg {
  position: absolute;
  top: 0;
}


/*-------------------
  簡略アプローチス+プログラムライド
  -------------------*/
/*------ スライダーの背景 ------*/
.ApprochPo .simple_approach_slide {
  position: relative;
  width: 100%;
}

/*------ スライダーの横幅 ------*/
.ApprochPo .simple_approach_slide .slide-items {
  /* position: absolute; */
  /* width: 100%; */
  margin: 0 auto;
  bottom: 5%;
}

/*------ スライダー画像 ------*/
/* .simple_approach_slide .slide-items div {
  width: 100%;
  left:.1%;
} */

/*-------- 高さ調整 ----------*/
/* .simple_approach_slide .slide-items .slick-slide {
  height: auto !important;
} */

/*---------- 矢印 ----------*/
.ApprochPo .simple_approach_slide .slide-items .slick-next {
  right: 2% !important;
  padding: .5rem auto;
}

.ApprochPo .simple_approach_slide .slide-items .slick-prev {
  left: 2% !important;
  padding: .5rem auto;
}

.simple_approach_slide .slide-items .slick-arrow {
  /* width: initial!important;
 height: initial!important;*/
  width: 7%;
  height: auto;
  z-index: 2 !important;
}

.simple_approach_slide .slide-items .slick-arrow:before {
  font-size: 6rem !important;
  opacity: 1 !important;
  /*color: #a3d7ff;*/
}


.slick-dots li button:before {
  font-size: 1.2rem !important;
}

.simple_approach_slide .slide-items .slick-dots {
  bottom: -4rem;
}

/* ================  
体験者のプログラム
=================== */
.apopro_program {
  position: relative;
}

.progam_line1 {
  position: absolute;
  display: flex;
  bottom: 56%;
  padding: 2% 8.5%;
  width: 100%;
  z-index: 20;
}

.progam_line2 {
  position: absolute;
  display: flex;
  bottom: 25%;
  padding: 2% 8.5%;
  width: 100%;
  z-index: 20;
}

.progam_1 {
  position: absolute;
  display: flex;
  bottom: 56%;
  padding: 2% 8.5%;
  width: 100%;
}

.prgoam {
  margin: 0 2%;
  box-shadow: 0 .8rem 1rem 0 rgba(123, 100, 100, .5);
  border-radius: 1.8rem;

}

.progam_2 {
  position: absolute;
  display: flex;
  bottom: 25%;
  padding: 2% 8.5%;
  width: 100%;
}

/* ------ 枠線 ------ */
.box {
  width: 46.1%;
  height: 25.5rem;
  margin: 0 auto;
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 1.8rem;
}

.box_line {
  position: absolute;
}

.box_line:nth-child(1),
.box_line:nth-child(3) {
  width: 100%;
  height: .7rem;
}

.box_line:nth-child(2),
.box_line:nth-child(4) {
  width: .7rem;
  height: 100%;
}

.box_line:nth-child(1) {
  top: 0;
  left: 0;
  background: linear-gradient(to right, transparent, #ffffff);
  animation: animate1 2s linear infinite;

}



.box_line:nth-child(2) {
  top: 0;
  right: 0;
  animation: animate2 2s linear infinite;
  animation-delay: 1s;
  background: linear-gradient(to bottom, transparent, #ffffff);
}


.box_line:nth-child(3) {
  bottom: 0;
  left: 0;
  background: linear-gradient(to left, transparent, #ffffff);
  animation: animate3 2s linear infinite;
}


.box_line:nth-child(4) {
  top: 0;
  left: 0;
  background: linear-gradient(to top, transparent, #ffffff);
  animation: animate4 2s linear infinite;
  animation-delay: 1s;
}


@keyframes animate1 {

  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

@keyframes animate2 {

  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(100%);
  }
}

@keyframes animate3 {


  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }

}

@keyframes animate4 {


  0% {
    transform: translateY(100%);
  }


  100% {
    transform: translateY(-100%);
  }

}

/* ======== modalモーダルウィンド　===== */
.modal_overlay.open,
.modal_content.open {
  display: block;
}

.modal_content {
  position: relative;
  width: 100%;
  height: 100%;
  /* max-width: 500px; */
  margin: 0 auto;
  top: 48%;
  left: 46%;
  transform: translate(-50%, -50%);
  z-index: 50;
}

.modal_box video {
  width: 80%;
}

.modal_overlay,
.modal_content {
  display: none;
  position: fixed;

}

.modal_box {
  position: relative;
  width: 80%;
  top: 52%;
  left: 54%;
  transform: translate(-50%, -50%);
  z-index: 55;
}

.modal_delete {
  position: absolute;
  right: -4%;
  top: 2%;
  width: 18%;
}

.modal_delete img {
  width: 6rem;
}

.modal_content video {
  width: 98%;
}

.modal_bg {
  background: rgba(0, 0, 0, 0.8);
  height: 100vh;
  position: absolute;
  width: 100%;
  z-index: 10;
}