.swal2-container{
  background-color: rgba(255, 255, 255, 0.8) !important;
}
.swal2-content{padding:0 !important;}
.swal2-popup{
  border-radius: 1px !important;
  max-width: 90%;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px 0px !important;
}
.swal2-close{color: #545454;}
.swal2-close:focus{outline: none !important;}
*, :after, :before {box-sizing: border-box;}
.grad-item {
  position: relative;
  overflow: hidden;
  height: 14rem; /*隠した状態の高さ*/
  font-size:12px;
  margin-bottom: 12px;
  line-height: 1.5 !important;
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2.5rem; /*グラデーションで隠す高さ*/
  content: "";
}
.ugc-black-grad::before{
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.8) 70%, #000 100%);
  background: linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.8) 70%, #000 100%);
}
.ugc-white-grad::before{
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.8) 70%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.8) 70%, #fff 100%);
}

.grad-trigger {
  display: none !important;
}
.grad-trigger:checked ~ .grad-item {
  height: auto; 
}
.grad-trigger:checked ~ .grad-item::before {
  display: none !important;
}
.grad-trigger:checked ~ .grad-btn-wrap > .com-btn1 {
  display: none !important;
}
.grad-trigger:checked ~ .grad-btn-wrap > .com-btn2 {
  display: inline;
  font-weight: normal !important;
}
.grad-trigger ~ .grad-btn-wrap > .com-btn1 {
  display: inline;
  font-weight: normal !important;
}
.grad-trigger ~ .grad-btn-wrap > .com-btn2 {
  display: none;
}
.modal-left {
  position: fixed;
  top: calc(50% - 20px);
  left: 2%;
  font-size: 40px;
  cursor: pointer;
}
.tiktok-icon-popup {
  margin-bottom: -2px !important;
}
.tiktok-icon-popup2 {
  margin-bottom: -6px !important;
}
.modal-right {
  position: fixed;
  top: calc(50% - 20px);
  right: 2%;
  font-size: 40px;
  cursor: pointer;
}
.swiper-button-common{
  font-size: 25px;
  font-weight: 900;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  background:rgba(237, 235, 232, 0.7);
  border-radius: 50%;
  height: 40px;
  width: 40px;
  color: #333;
  box-shadow: 0 1px 5px rgba(0,0,0,0.2);
  position: absolute;
  cursor: pointer;
  z-index: 1000;
}
.swiper-button-common:focus{
  outline: none;
}
.content-1-ugc:focus{
  outline: none;
}
:root{
  --swiper-navigation-size: 25px;
}

.swiper-button-prev:after {
  font-family: "Font Awesome 5 Free";
  content: "\f053"; 
  top: calc(var(--swiper-navigation-size)/4 + 1px);
  right: calc(var(--swiper-navigation-size)/2);
  position: absolute;
}
.swiper-button-next:after {
  font-family: "Font Awesome 5 Free";
  content: "\f054";
  top: calc(var(--swiper-navigation-size)/4 + 1px);
  left: calc(var(--swiper-navigation-size)/2);
  position: absolute;
}
.content-close-button{
  display: flex;
  background: #edebe8;
  opacity: 0.8;
  cursor: pointer;
}

/* 続きを読むの矢印 */
.modal-arrow {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 5px;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
}
.modal-arrow-top {
  transform: rotate(-135deg);
  margin-bottom: -1px !important;
}

.modal-arrow-bottom {
  transform: rotate(45deg);
  margin-bottom: 3px !important;
}

.ugc-btn-product{
  color: #fff !important;
  width: 100%;
  display: inline-block;
  text-align: center;
  padding: .5rem !important;
  font-size: 12px;
  margin-top: 15px;
  background: #228d74;
  position: relative;
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
  text-decoration: none !important;
  font-weight: bold;
  border-radius: 5px;
}
.ugc-btn-product:hover{
  color: #fff !important;
}
:focus{
  outline: none;
}

.ugc-button-icon {
  position: absolute;
  top: calc(50% - .5em);
  right: 1rem;
  font-size: 16px
}
.ugc-creative-playmark{
  color: white;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
  opacity: 0.8;
}

@media (max-width:480px) { 
  .product-wrapper{
    width: calc(50% - 3px);
  }
  .content-1-ugc{
    width: 100%;
    margin-bottom: 10px;
  }
  .content-2-ugc{
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 10px;
  }
  .swal2-popup{
    max-width: 100%;
    padding: 0;
    margin: 0 !important;
    min-height: 100%;
  }
  .swal2-container{
    padding: 0 !important;
    align-items: start !important;
  }
  .swiper-button-common{
    opacity: 0.8;
  }
  .swiper-button-next{
    right: 5px;
    top: calc(25% - var(--swiper-navigation-size)/2);
    position: fixed;
  }
  .swiper-button-prev{
    left: 5px;
    top: calc(25% - var(--swiper-navigation-size)/2);
    position: fixed;
  }
  .content-close-button{
    right: 5px;
    top: 10px;
    position: fixed;
    z-index: 10000;
  }
  .product-wrapper:nth-child(even){
    padding-right: 5px
  }
  .product-wrapper:nth-child(odd){
    padding-left: 5px
  }
  .grad-item {
    height: 11rem; /*隠した状態の高さ*/
  }
  .grad-item::before {
    height: 2.5rem; /*グラデーションで隠す高さ*/
  }
}
@media (min-width:480px) { 
  .product-wrapper{
    width: calc(33.33333% - 4px);
    padding: 5px
  }
  .content-1-ugc{
    width: 45%;
    float: left;
  }
  .content-2-ugc{
    width: 53%;
    float: left;
    margin-left: 2%
  }
  .swiper-button-next{
    top: calc(50% - var(--swiper-navigation-size)/2);
  }
  .swiper-button-prev{
    top: calc(50% - var(--swiper-navigation-size)/2);
  }
  .content-close-button{
    right: 5px;
    top: 10px;
    position: fixed;
  }
  .swal2-popup{
    height: 458px;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .fa-times:before {
    margin: 6px;
  }
}