@charset "utf-8";
.event-wrap img {
  max-width: 100%;
  height: auto;
}

.event-wrap * {
  color: #481B02;
}
.event-wrap .bg-brw {
  background: #452C1B !important;
}
.event-wrap .swiper-navigation-icon{
  display: none;
}
.event-wrap .swiper-button-next, .swiper-button-prev{
    width: 27px;
    height: 44px;
}
.event-wrap .swiper-button-next{
    right: 10px;
}
.event-wrap .swiper-button-prev{
    left: 10px;
}
.inner {
	row-gap:20px;
}

.event-wrap .btn-detail {
  background: #eaa5c3;
  border-radius: 20px;
  height: 38px;
  line-height: 38px;
  display: block;
}

@media screen and (max-width: 767px) {
  .event-wrap .btn-detail {
    height: 30px;
    line-height: 30px;
  }
}

.event-wrap .btn-detail span {
  color: #fff !important;
}

.event-wrap .btn-cart {
  background: #452C1B;
  height: 40px;
  line-height: 40px;
  display: block;
  position: relative;
  padding-left: 5%;
}

@media screen and (max-width: 767px) {
  .event-wrap .btn-cart {
    height: 36px;
    line-height: 36px;
  }
}

.event-wrap .btn-cart span {
  color: #fff !important;
}

.event-wrap .btn-cart:before {
  content: '';
  width: 24px;
  height: 26px;
  background: url(/contents/common/img/cart.png) no-repeat center center/contain;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5%;
  margin: auto;
}

@media screen and (max-width: 767px) {
  .event-wrap .btn-cart:before {
    width: 19px;
    height: 21px;
  }
}

.event-wrap .top-mv {
	background-image: url(https://www.suzette-shop.jp/contents/c3spvw/img/C3_spring25_2412mv_sp.png);
	width: 100%;
	height: 95vw;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
}
@media (min-width: 768px) {
	.event-wrap .top-mv {
		background-image: url(https://www.suzette-shop.jp/contents/c3spvw/img/C3_spring25_2412mv_pc.png);
		width: 100%;
		height: 38vw;
		background-repeat: no-repeat;
		background-position: center top;
		background-size: 100% auto;
	}
	#event-wrap .c3spvw_nav {
		max-width: 800px;
		flex-wrap: nowrap !important;
		margin: auto;
	}
	.max-w-md-1024px {
		max-width: 1024px;
	}
}

/* ranking -------------*/
.event-wrap .ranking__tab {
  position: relative;
}
.event-wrap .ranking__tab:before {
  content: "";
  width: 100%;
  height: 1px;
  background: #707070;
  position: absolute;
  bottom: 0;
  left: 0;
}
@media screen and (min-width: 768px) {
  .event-wrap .ranking__btn {
    width: 450px;
    height: 60px;
    line-height: 60px;
    cursor: pointer;
    background: #CCA7A7;
  }
  .event-wrap .ranking__btn.active {
    background: #fff;
    border: 1px solid #707070;
    border-bottom: none;
    position: relative;
    z-index: 1;
  }
  .event-wrap .ranking__btn.active:after {
    content: "";
    width: 100%;
    height: 3px;
    background: #fff;
    position: absolute;
    bottom: -1px;
    left: 0;
  }
}
@media screen and (max-width: 799px) {
  .event-wrap .ranking__btn {
    padding: 12px 0;
  }
}
.event-wrap .h1_top {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  .event-wrap .h1_top {
    font-size: 20px;
  }
}
@media screen and (max-width: 799px) {
  .event-wrap .h1_top {
    font-size: 15px;
  }
}
.event-wrap .ranking-wrap .ranking-navi-swiper {
  margin-bottom: 100px;
  line-height: 1.2;
  border-top: 1px solid #230e02;
  border-bottom: 1px solid #230e02;
  padding: 0 50px;
}
@media screen and (max-width: 799px) {
  .event-wrap .ranking-wrap .ranking-navi-swiper {
    margin: 0 0 30px;
    padding: 0 10px;
    line-height: 1;
  }
}
@media screen and (min-width: 768px) {
  .event-wrap .ranking-wrap .ranking-navi-swiper .swiper {
    opacity: 1;
    padding-top: 0;
  }
}
@media screen and (max-width: 799px) {
  .event-wrap .ranking-wrap .ranking-navi-swiper .swiper {
    overflow: hidden;
  }
}
@media screen and (max-width: 799px) {
  .event-wrap .ranking-wrap .ranking-navi-swiper .swiper-wrapper {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
}
.event-wrap .ranking-wrap .ranking-navi-swiper .swiper-button-prev,
.event-wrap .ranking-wrap .ranking-navi-swiper .swiper-button-next {
  display: none;
}
@media screen and (max-width: 799px) {
  .event-wrap .ranking-wrap .ranking-navi-swiper .swiper-button-prev,
  .event-wrap .ranking-wrap .ranking-navi-swiper .swiper-button-next {
    display: block !important;
    top: 15px;
  }
  .event-wrap .ranking-wrap .ranking-navi-swiper .swiper-button-prev:after,
  .event-wrap .ranking-wrap .ranking-navi-swiper .swiper-button-next:after {
    width: 10px;
    height: 10px;
  }
}
@media screen and (max-width: 799px) {
  .event-wrap .ranking-wrap .ranking-navi-swiper .swiper-button-next {
    right: 10px;
  }
}
@media screen and (max-width: 799px) {
  .event-wrap .ranking-wrap .ranking-navi-swiper .swiper-button-prev {
    left: 10px;
  }
}
@media screen and (max-width: 799px) {
  .event-wrap .ranking-wrap .ranking-navi-swiper .swiper-slide-active .ranking-navi-swiper__btn {
    color: #230e02;
  }
  .event-wrap .ranking-wrap .ranking-navi-swiper .swiper-slide-active .ranking-navi-swiper__btn:after {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
.event-wrap .ranking-wrap .ranking-navi-swiper__btn {
  padding: 15px 30px;
  font-size: 15px;
  cursor: pointer;
  position: relative;
  text-align: center;
  white-space: nowrap;
  color: #cecccb;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 799px) {
  .event-wrap .ranking-wrap .ranking-navi-swiper__btn {
    font-size: 13px;
  }
}
@media screen and (min-width: 768px) {
  .event-wrap .ranking-wrap .ranking-navi-swiper__btn.active {
    color: #230e02;
  }
}
.event-wrap .ranking-wrap .ranking-navi-swiper__btn:after {
  content: "";
  display: block;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  width: 60%;
  height: 3px;
  background: #230e02;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  -webkit-transform-origin: center;
          transform-origin: center;
}
@media screen and (min-width: 768px) {
  .event-wrap .ranking-wrap .ranking-navi-swiper__btn:hover:after {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  .event-wrap .ranking-wrap .ranking-navi-swiper__btn.active:after {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
.event-wrap .ranking-wrap__tab {
  display: none;
}
.event-wrap .ranking-wrap__tab.active {
  display: block;
}