@import url(swiper-bundle.min.css);
#contents_wrapper .campaign {
  background: url(../img/common/bg_contents.png) 0 0 repeat, linear-gradient(0deg, #ffe33f 0%, #ffed83 100%) 0 0 no-repeat;
  background-size: 72.5em auto, contain;
}
@media screen and (max-width: 767.9px) {
  #contents_wrapper .campaign {
    background-image: url(../img/common/bg_contents-sp.png), linear-gradient(0deg, #ffe33f 0%, #ffed83 100%);
    background-size: 100% auto, contain;
  }
}

/* ------------------------------------------------
 KV
------------------------------------------------ */
#kv {
  background-color: #ffe33f;
  height: 43.125em;
  position: relative;
  overflow: hidden;
}
#kv > .inner {
  width: 100%;
  height: 100%;
}
#kv .logo {
  width: 33.75em;
  aspect-ratio: 540/131;
  position: absolute;
  left: 20.625em;
  top: 15.9375em;
  z-index: 2;
}
#kv .pokemon {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  opacity: 0;
  animation: 0.6s ease 1s fadeIn forwards;
}
@media screen and (max-width: 767.9px) {
  #kv {
    height: 39.1333333333em;
  }
  #kv .logo {
    width: 18em;
    left: 3.6em;
    top: 16.2em;
  }
  #kv .btn_ctrl {
    width: 2.7333333333em;
    right: 1.6666666667em;
    bottom: 2.3333333333em;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* ------------------------------------------------
 bottles
------------------------------------------------ */
#bottles {
  opacity: 0;
  transition: opacity 0.6s ease;
}
#bottles.show {
  opacity: 1;
}
#bottles > .inner {
  padding-top: 5em;
}
#bottles .sheader {
  position: relative;
  z-index: 1;
}
#bottles .sheader .title {
  margin-left: 21.875em;
  width: 32.125em;
}
#bottles .note {
  color: #ed1c24;
  font-size: 0.75em;
  font-weight: 500;
  margin-top: 2.5em;
  margin-left: 29.1666666667em;
  transform: rotateZ(0.03deg);
}
@media screen and (max-width: 767.9px) {
  #bottles > .inner {
    padding-top: 3.3333333333em;
  }
  #bottles .sheader .title {
    margin-left: 1.4em;
    width: 22.8em;
  }
  #bottles .note {
    font-size: 0.7333333333em;
    margin-top: 2.4545454545em;
    margin-left: 1.5909090909em;
  }
}

/* ----------------------------
 slider
------------------------------*/
#bottles_slider {
  margin-top: -4.0625em;
  padding-top: 5em;
}
#bottles_slider li {
  width: 31.625em;
}
#bottles_slider li .box {
  background-color: #ccc;
  border-radius: 1.875em;
  width: 100%;
  height: 32.75em;
  position: relative;
  overflow: hidden;
  box-shadow: 4px 2px 1.875em 0px rgba(138, 114, 2, 0.71);
}
#bottles_slider li .box::before,
#bottles_slider li .box .bottle {
  position: absolute;
}
#bottles_slider li .box::before {
  content: "";
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
#bottles_slider li .box .bottle.a {
  width: 11.4375em;
}
#bottles_slider li .box .bottle.b {
  width: 12.0625em;
}
#bottles_slider li .box .bottle.c {
  width: 13.1875em;
}
#bottles_slider li .box .label {
  color: #fff;
  font-size: 1.3125em;
  font-weight: 900;
  text-align: center;
  line-height: 1;
  width: 100%;
  height: 2.380952381em;
  align-content: center;
  position: absolute;
  left: 0;
  bottom: 0;
}
#bottles_slider li.lemon .box {
  background-image: linear-gradient(0deg, rgb(249, 190, 0) 0%, rgb(255, 231, 51) 100%);
}
#bottles_slider li.lemon .box::before {
  background-image: url(../img/top/bottles/lemon_bg.webp);
}
#bottles_slider li.lemon .box .label {
  background-color: #f29900;
}
#bottles_slider li.lemon .box .bottle.a {
  width: 11.125em;
  left: 1.25em;
  top: 4.5em;
}
#bottles_slider li.lemon .box .bottle.b {
  width: 12.5em;
  left: 7.125em;
  top: 2.625em;
}
#bottles_slider li.lemon .box .bottle.c {
  width: 12.6875em;
  left: 16.625em;
  top: 2.5em;
}
#bottles_slider li.melon .box {
  background-image: linear-gradient(0deg, rgb(30, 170, 57) 0%, rgb(141, 194, 31) 100%);
}
#bottles_slider li.melon .box::before {
  background-image: url(../img/top/bottles/melon_bg.webp);
}
#bottles_slider li.melon .box .label {
  background-color: #008236;
}
#bottles_slider li.melon .box .bottle.a {
  left: 1.125em;
  top: 4.5em;
}
#bottles_slider li.melon .box .bottle.b {
  width: 12.5em;
  left: 7.125em;
  top: 1.25em;
}
#bottles_slider li.melon .box .bottle.c {
  width: 13.125em;
  left: 16.875em;
  top: 1.25em;
}
#bottles_slider li.pepsi .box {
  background-image: linear-gradient(0deg, rgb(209, 0, 17) 0%, rgb(235, 97, 59) 100%);
}
#bottles_slider li.pepsi .box::before {
  background-image: url(../img/top/bottles/pepsi_bg.webp);
}
#bottles_slider li.pepsi .box .label {
  background-color: #821e03;
}
#bottles_slider li.pepsi .box .bottle.a {
  left: 1.125em;
  top: 4.5em;
}
#bottles_slider li.pepsi .box .bottle.b {
  left: 7.5em;
  top: 1.25em;
}
#bottles_slider li.pepsi .box .bottle.c {
  left: 16.5625em;
  top: 2.1875em;
}
#bottles_slider li.pepsi_l .box {
  background-image: linear-gradient(0deg, rgb(0, 133, 178) 0%, rgb(70, 178, 214) 100%);
}
#bottles_slider li.pepsi_l .box::before {
  background-image: url(../img/top/bottles/pepsi_l_bg.webp);
}
#bottles_slider li.pepsi_l .box .label {
  background-color: #056193;
}
#bottles_slider li.pepsi_l .box .bottle.a {
  left: 1.25em;
  top: 4.25em;
}
#bottles_slider li.pepsi_l .box .bottle.b {
  left: 7.8125em;
  top: 0.9375em;
}
#bottles_slider li.pepsi_l .box .bottle.c {
  left: 16.875em;
  top: 2.1875em;
}
#bottles_slider li.orange .box {
  background-image: linear-gradient(0deg, rgb(255, 187, 51) 31%, rgb(254, 165, 26) 68%, rgb(252, 143, 0) 100%);
}
#bottles_slider li.orange .box::before {
  background-image: url(../img/top/bottles/orange_bg.webp);
}
#bottles_slider li.orange .box .label {
  background-color: #eb6817;
}
#bottles_slider li.orange .box .bottle.a {
  width: 10.375em;
  left: 2em;
  top: 4em;
}
#bottles_slider li.orange .box .bottle.b {
  width: 12.125em;
  left: 7.25em;
  top: 0.9375em;
}
#bottles_slider li.orange .box .bottle.c {
  width: 12.5625em;
  left: 16.875em;
  top: 1.875em;
}
#bottles_slider li.apple .box {
  background-image: linear-gradient(0deg, rgb(234, 107, 163) 0%, rgb(255, 177, 210) 72%);
}
#bottles_slider li.apple .box::before {
  background-image: url(../img/top/bottles/apple_bg.webp);
}
#bottles_slider li.apple .box .label {
  background-color: #c3000a;
}
#bottles_slider li.apple .box .bottle.a {
  width: 11.625em;
  left: 1em;
  top: 4.375em;
}
#bottles_slider li.apple .box .bottle.b {
  width: 12.125em;
  left: 7.25em;
  top: 0.625em;
}
#bottles_slider li.apple .box .bottle.c {
  width: 12.5625em;
  left: 16.625em;
  top: 1.875em;
}
#bottles_slider .ctrl {
  margin-top: 2.1875em;
  display: flex;
  align-items: center;
  justify-content: center;
  -moz-column-gap: 1.375em;
       column-gap: 1.375em;
}
#bottles_slider .btn_toggle {
  font-size: 1em;
  border: none;
  background: transparent url(../img/top/bottles/btn_slider_toggle.svg) 0 0 no-repeat;
  background-size: auto 100%;
  padding: 0;
  width: 1.4375em;
  aspect-ratio: 1/1;
  outline: none;
  cursor: pointer;
}
#bottles_slider .btn_toggle.stop {
  background-position: 100% 0;
}
@media screen and (max-width: 767.9px) {
  #bottles_slider {
    margin-top: -1.875em;
    padding-top: 2.5em;
  }
  #bottles_slider li {
    width: 100vw;
  }
  #bottles_slider li .box {
    border-radius: 1em;
    margin: 0 auto;
    width: 22.6666666667em;
    height: 28.5em;
    box-shadow: 2px 1px 1.1666666667em 0px rgba(138, 114, 2, 0.71);
  }
  #bottles_slider li .box .label {
    font-size: 1.2em;
  }
  #bottles_slider li.lemon .box::before {
    background-image: url(../img/top/bottles/lemon_bg-sp.webp);
  }
  #bottles_slider li.lemon .box .bottle.a {
    width: 8.6333333333em;
    left: 0em;
    top: 4.8em;
  }
  #bottles_slider li.lemon .box .bottle.b {
    width: 10.2em;
    left: 4.2em;
    top: 1.6666666667em;
  }
  #bottles_slider li.lemon .box .bottle.c {
    width: 10.4333333333em;
    left: 12.0666666667em;
    top: 2.6666666667em;
  }
  #bottles_slider li.melon .box::before {
    background-image: url(../img/top/bottles/melon_bg-sp.webp);
  }
  #bottles_slider li.melon .box .bottle.a {
    width: 8.3em;
    left: 0.3333333333em;
    top: 4.4em;
  }
  #bottles_slider li.melon .box .bottle.b {
    width: 9.9666666667em;
    left: 4.4666666667em;
    top: 1.1333333333em;
  }
  #bottles_slider li.melon .box .bottle.c {
    width: 10.4em;
    left: 12em;
    top: 2.4666666667em;
  }
  #bottles_slider li.pepsi .box::before {
    background-image: url(../img/top/bottles/pepsi_bg-sp.webp);
  }
  #bottles_slider li.pepsi .box .bottle.a {
    width: 7.9666666667em;
    left: 0.6666666667em;
    top: 4.2666666667em;
  }
  #bottles_slider li.pepsi .box .bottle.b {
    width: 9.9666666667em;
    left: 4.6em;
    top: 1.1333333333em;
  }
  #bottles_slider li.pepsi .box .bottle.c {
    width: 10.4em;
    left: 12.3333333333em;
    top: 2.4666666667em;
  }
  #bottles_slider li.pepsi_l .box::before {
    background-image: url(../img/top/bottles/pepsi_l_bg-sp.webp);
  }
  #bottles_slider li.pepsi_l .box .bottle.a {
    width: 7.9666666667em;
    left: 0.6666666667em;
    top: 4.2666666667em;
  }
  #bottles_slider li.pepsi_l .box .bottle.b {
    width: 9.9666666667em;
    left: 4.6em;
    top: 1.1333333333em;
  }
  #bottles_slider li.pepsi_l .box .bottle.c {
    width: 10.4em;
    left: 12.1666666667em;
    top: 2.4666666667em;
  }
  #bottles_slider li.orange .box::before {
    background-image: url(../img/top/bottles/orange_bg-sp.webp);
  }
  #bottles_slider li.orange .box .bottle.a {
    width: 7.7666666667em;
    left: 1em;
    top: 4.2666666667em;
  }
  #bottles_slider li.orange .box .bottle.b {
    width: 9.1333333333em;
    left: 4.9333333333em;
    top: 1.1333333333em;
  }
  #bottles_slider li.orange .box .bottle.c {
    width: 10.3em;
    left: 11.8333333333em;
    top: 2.4666666667em;
  }
  #bottles_slider li.apple .box::before {
    background-image: url(../img/top/bottles/apple_bg-sp.webp);
  }
  #bottles_slider li.apple .box .bottle.a {
    width: 8.4em;
    left: 0.6666666667em;
    top: 4.5333333333em;
  }
  #bottles_slider li.apple .box .bottle.b {
    width: 9.4em;
    left: 4.6666666667em;
    top: 1.1333333333em;
  }
  #bottles_slider li.apple .box .bottle.c {
    width: 10.3em;
    left: 11.8333333333em;
    top: 2.8em;
  }
  #bottles_slider .ctrl {
    margin-top: 2em;
  }
  #bottles_slider .btn_toggle {
    width: 1.1333333333em;
  }
}

/* ----------------------------
 slide
------------------------------*/
.swiper-slide .box {
  opacity: 0;
  transition: all 0.5s var(--easeOutQuad);
}
.swiper-slide .box::before,
.swiper-slide .box .bottle {
  transition: opacity 0.2s ease;
  opacity: 1;
}
.swiper-slide-active .box {
  opacity: 1;
}
.swiper-slide-active .box::before {
  opacity: 0;
  animation: 1s linear fadeIn forwards;
  animation-delay: 0.6s;
}
.swiper-slide-active .box .bottle {
  opacity: 0;
  animation: 0.6s ease fadeIn forwards;
}
.swiper-slide-active .box .bottle.a {
  animation-delay: 0.6s;
}
.swiper-slide-active .box .bottle.b {
  animation-delay: 1s;
}
.swiper-slide-active .box .bottle.c {
  animation-delay: 1.4s;
}
@media screen and (min-width: 768.1px) {
  .swiper-slide .box {
    opacity: 0.5;
    transform: scale(0.74);
  }
  .swiper-slide-active .box {
    opacity: 1;
    transform: scale(1);
  }
}
/* ----------------------------
 pagination
------------------------------*/
.swiper-pagination {
  position: static;
  width: auto !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 1em;
       column-gap: 1em;
}
.swiper-pagination-bullet {
  border: 0.3125em solid #e73828;
  background-color: #fff;
  margin: 0 !important;
  width: 1.375em;
  height: 1.375em;
  display: block;
  box-sizing: border-box;
  transition: background-color 0.4s ease;
  opacity: 1;
  outline: none;
}
.swiper-pagination-bullet-active {
  background-color: #e73828;
}
@media screen and (max-width: 767.9px) {
  .swiper-pagination {
    -moz-column-gap: 1.2em;
         column-gap: 1.2em;
  }
  .swiper-pagination-bullet {
    border-width: 0.2em;
    width: 1.2em;
    height: 1.2em;
  }
}

/* ------------------------------------------------
 soon
------------------------------------------------ */
#soon > .inner {
  padding-top: 5.625em;
  padding-bottom: 6.25em;
}
#soon .sbody .txt {
  margin: 0 auto;
  width: 31.0625em;
}
@media screen and (max-width: 767.9px) {
  #soon > .inner {
    padding-top: 3.3333333333em;
    padding-bottom: 4.3333333333em;
  }
  #soon .sbody .txt {
    width: 22.8em;
  }
}

/* ------------------------------------------------
 contact
------------------------------------------------ */
@media screen and (min-width: 768.1px) {
  #contact .contact:nth-child(2) {
    grid-column: 2/span 1;
  }
}