@charset "UTF-8";

/* pc resize */
/*
通常
  max-width: 750px;
80%
  max-width: 600px;
75%
  max-width: 562.5px;
70%
  max-width: 525px;

変更時は以下のpxも変更
html[data-browse-mode="P"] #jyure_fb .fb_bnr {
  left: calc(50% + 393px);
}
*/
html[data-browse-mode="P"] #aojiru_jyure {
  max-width: 525px;
}
/* pc resize */

/* mv */
.mv_box img {
  display: block;
  width: 100%;
}

.mv_box {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}

.mv_box::before {
  content: '';
  display: block;
  padding-top: 529%;
}

.mv_bg {
  width: 100%;
  bottom: 0;
  position: absolute;
}

.kantan {
  width: 100%;
  top: 0.5%;
  left: 0;
  position: absolute;
  overflow: hidden;
}

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

.mv_cup {
  width: 100%;
  top: -2%;
  left: 0;
  position: absolute;
}

.kagayaki {
  width: 150%;
  top: 6%;
  left: -20%;
  mix-blend-mode: screen;
  position: absolute;
  opacity: 1;
  animation: rotation 40s linear infinite;
}

.sokuippon {
  width: 100%;
  top: 3.3%;
  left: 0;
  position: absolute;
}

.mv_hand {
  width: 73.2%;
  top: 19.7%;
  left: 27%;
  position: absolute;
}

.mv_txt {
  width: 96%;
  top: 22%;
  left: 2%;
  position: absolute;
}

.mv_campaign {
  width: 89%;
  bottom: 1.3%;
  left: 5.5%;
  position: absolute;
}

.mv_buy_btn {
  bottom: 2.15%;
  left: 0%;
  position: absolute;
  animation: move_btn 3s ease-in-out infinite;
}

/* no1 yasai */
.no1_box img {
  display: block;
  width: 100%;
  margin: auto;
}

.no1_box {
  width: 100%;
  height: auto;
  margin-top: 42%;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.no1_box::before {
  content: '';
  display: block;
  padding-top: 318.576%;
}

.okagesama {
  width: 93%;
  top: 0;
  left: 4%;
  position: absolute;
}

.no1 {
  width: 95%;
  top: 36.5%;
  position: absolute;
}

.gyu_txt {
  width: 90%;
  bottom: 8%;
  left: 5%;
  position: absolute;
}

.yasai {
  position: absolute;
  bottom: 3%;
  width: 185%;
  left: -35%;
  opacity: 0.8;
}

.yasai img {
  width: 100%;
}

.yasai_mask {
  position: absolute;
  bottom: 0%;
  width: 101%;
  left: -0.5%;
}

.yasai_mask img {
  width: 100%;
}

.no1_bottom {
  position: absolute;
  width: 100%;
  left: 0%;
  bottom: -0.15%;
}

/* drop */
.drop_box img {
  display: block;
  margin: auto;
  width: 100%;
}

.drop_box {
  margin: 0%;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.drop_box::before {
  content: '';
  display: block;
  padding-top: 331.2%;
}

.hamon {
  top: 0%;
  width: 100%;
  position: absolute;
}

.pac_jyure {
  bottom: 0;
  left: 0;
  width: 100%;
  position: absolute;
}

.dot_line_b {
  bottom: 0;
  left: 1%;
  width: 100%;
  position: absolute;
}

.drop {
  top: 0%;
  width: 30%;
  margin: -4% 35%;
  position: absolute;
}

.dot_line {
  top: 0;
  margin-top: 47%;
  left: 10%;
  width: 20%;
  position: absolute;
}

.kore_hand {
  width: 100%;
  top: 0%;
  margin-top: 63%;
  left: 19%;
  position: absolute;
}

.big_jyure {
  top: 0;
  margin-top: 122%;
  left: 3%;
  width: 96%;
  opacity: 0;
  position: absolute;
}

.eee {
  top: 0;
  margin-top: -2%;
  left: 5%;
  width: 44%;
  position: absolute;
}

.korega {
  top: 25%;
  left: 0%;
  width: 80%;
  margin: 0% 10%;
  position: absolute;
}

.sounandesu {
  bottom: 25%;
  left: 7%;
  width: 85%;
  position: absolute;
}

.imasugu {
  bottom: -2%;
  left: 14%;
  width: 75%;
  position: absolute;
}

/* mix soku*/
.ss_box img {
  display: block;
  margin: auto;
  width: 100%;
}

.ss_box {
  width: 100%;
  height: auto;
  margin-top: -5%;
  position: relative;
  overflow: hidden;
  display: flex;
}

.ss_box::before {
  content: '';
  display: block;
  padding-top: 625.13%;
}

/* 1s 60s mix */
.sec_box {
  width: 100%;
  height: auto;
  position: absolute;
  overflow: hidden;
  display: flex;
  z-index: 9;
}


.sec_box::before {
  content: '';
  display: block;
  padding-top: 135%;
}

/*
.sec_box::before {
  content: '';
  display: block;
  padding-top: 131%;
}
*/

.rl_box {
  width: 100%;
  top: 0;
  position: absolute;
  -webkit-clip-path: polygon(0 0, 50% 9.5%, 100% 0%, 100% 87%, 50% 100%, 0% 87%);
  clip-path: polygon(0 0, 50% 9.5%, 100% 0%, 100% 87%, 50% 100%, 0% 87%);
}

.rl_box::before {
  content: '';
  display: block;
  padding-top: 125%;
}

.sec1_bg {
  position: absolute;
  bottom: 2.5%;
}
/*
.sec1_bg {
  position: absolute;
  bottom: 0;
}

.sec1_bg {
  position: absolute;
  bottom: 0;
}
*/

.sec_left {
  position: absolute;
  width: 57%;
  top: 0;
  left: -3%;
}

.sec1 {
  top: 0;
  margin-top: 8%;
  position: absolute;
}

/*
.sec1 video{
  width: 89%;
  top: 0;
  left: 5%;
  margin-top: -2.5%;
  position: absolute;
}
*/

/**/
.pi {
  -webkit-filter: drop-shadow(-3px -3px 35px white);
  filter: drop-shadow(-3px -3px 35px white);
}

.sec_right img {
  position: absolute;
  width: 50%;
  top: 0;
  right: 0;
}

/*
.sec_right video {
  position: absolute;
  width: 51%;
  top: -3%;
  right: -1%;
}
*/

/* 即一本 */
.soku_box {
  width: 100%;
  bottom: 0;
  position: absolute;
}

.soku_box::before {
  content: '';
  display: block;
  padding-top: 506.8%;
}

.soku_bg {
  width: 100%;
  top: 0%;
  margin-top: -23%;
  position: absolute;
}

.soku_hand {
  width: 189%;
  top: 20.5%;
  left: -26.5%;
  position: absolute;
}

.soku_hand img {
  position: absolute;
}

.soku_jinbutu {
  width: 90%;
  bottom: 0%;
  left: 5%;
  position: absolute;
}

.soku_txt {
  width: 96%;
  top: 25%;
  left: 2%;
  position: absolute;
}

/* campaign */
.cpn_box img {
  display: block;
  margin: auto;
  width: 100%;
}

.cpn_box {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}

.cpn_box::before {
  content: '';
  display: block;
  padding-top: 366%;
}

.cpn_bg {
  width: 100%;
  top: 0;
  position: absolute;
}

.cpn {
  top: 3.4%;
  width: 89%;
  left: 5.5%;
  position: absolute;
}

.cp_buy_btn {
  top: 67%;
  position: absolute;
  animation: move_btn 3s ease-in-out infinite;
}

/* */
.jyure_v_box {
  width: 100%;
  margin: 0%;
  position: relative;
}

.purun {
  width: 15%;
  top: 0;
  left: 19%;
  position: absolute;
}

.jyure_v {
  width: 35%;
  top: 0;
  left: 32%;
  transform: rotate(-5deg);
  position: absolute;
}

/*
.jyure_v video {
  width: 35%;
  top: 0;
  left: 32%;
  transform: rotate(-5deg);
  position: absolute;
}
*/

.jyure_v_box img {
  display: block;
  margin: auto;
  width: 100%;
}

.kazoku img{
  width: 100%;
}
.kazoku {
  position: relative;
}

.h_stick {
  bottom: 10%;
  width: 74%;
  margin: 0 10%;
  position: absolute;
}
/*
.h_stick video{
  bottom: 9.8%;
  width: 70%;
  margin: 0 11%;
  position: absolute;
}
*/

.buy_btn {
  display: block;
  position: relative;
  animation: move_btn 3s ease-in-out infinite;
}

.to_info {
  width: 28%;
  left: 35%;
  bottom: 3.5%;
  position: absolute;
}

.eiyou img {
  width: 100%;
  vertical-align: bottom;
}

/* popup */
.btn-buy {
  position: absolute;
  bottom: 3%;
  animation: move_btn 3s ease-in-out infinite;
}

/* floating banner & button */
html[data-browse-mode="P"] #jyure_fb .fb_bnr {
  display: none;
  width: 250px;
  height: 310px;
  position: fixed;
  left: calc(50% + 393px);
  bottom: 30%;
  transform: translateX(-50%);
  z-index: 9;
  border: solid 3px #d9d9d9;
  box-shadow: 0 5px 10px 0 rgb(0 0 0 / 50%);
  background-color: #fff;
  background-attachment: fixed;
  background-position: center;
}

html[data-browse-mode="P"] #jyure_fb .bnr_btn {
  position: absolute;
  display: block;
  width: 85%;
  bottom: 4%;
  margin: 0 8%;
  animation: move_btn 3s ease-in-out infinite;
}

/**/
html[data-browse-mode="P"] #jyure_fb .fb_btn {
  display: none;
  position: fixed;
  text-align: center;
  width: 100%;
  max-width: 750px;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  margin: auto;
  z-index: 9;
  animation: move_btn_fb 3s ease-in-out infinite;
}
/**/
html[data-browse-mode="S"] #jyure_fb .fb_btn {
  position: fixed;
  text-align: center;
  width: 90%;
  max-width: 750px;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  margin: auto;
  z-index: 9;
  animation: move_btn_fb 3s ease-in-out infinite;
}

@keyframes move_btn {
  30% {
    transform: translateX(-2%);
  }

  40% {
    transform: translateX(2%);
  }

  50% {
    transform: translateX(-1.5%);
  }

  60% {
    transform: translateX(0.5%);
  }

  70% {
    transform: translateX(-0.5%);
  }

  80% {
    transform: translateX(0.25%);
  }

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

@keyframes move_btn_fb {
  30% {
    transform: translateX(-52%);
  }

  40% {
    transform: translateX(-48%);
  }

  50% {
    transform: translateX(-51.5%);
  }

  60% {
    transform: translateX(-49.5%);
  }

  70% {
    transform: translateX(-50.5%);
  }

  80% {
    transform: translateX(-49.75%);
  }

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

@keyframes rotation {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

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

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

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

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