/************************************************

セレキノンS IBSってなに？まんがでわかる過敏性腸症候群（IBS）

*************************************************/
.manga-ibs__sec__inner{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 80px;
}

.manga-ibs__sec__inner > div{
  width: 48%;
  font-size: 20px;
  line-height: 1.7;
}

.manga-ibs__sec__inner > div img{
  width: 100%;
}

.manga-ibs__sec__inner .c-green-btn-round a{
  margin: 30px auto 0;
}

.c-modal-manga{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}
.c-modal-manga__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}

.c-modal-manga__content{
    left: 0;
    right: 0;
    margin:auto;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120vh;
    height: 80vh;
    overflow:hidden;
}

.swiper-container-manga{
   width: 120vh;
   height: 80vh;
   margin: 0 auto;
}

.c-modal-manga__content .swiper-button-next,
.c-modal-manga__content .swiper-button-prev{
  display: block;
}

@media screen and (max-width: 1100px) {

  .c-modal-manga__content{
    width: 100vh;
    height: 71vh;
  }

  .swiper-container-manga{
   width: 100vh;
   height: 71vh;
 }

}

.c-modal-manga__content .swiper-slide {
  height: 100%;
}

.c-modal-manga__content .swiper-slide > img{
  width: 100%;
  height:auto !important;
}


.c-modal-manga__content .swiper-button-next.swiper-button-disabled, 
.c-modal-manga__content .swiper-button-prev.swiper-button-disabled{
  opacity: 0 !important;
}

.c-modal-manga__content .swiper-button-next:focus,
.c-modal-manga__content .swiper-button-prev:focus{
  outline: 0;
}

.c-modal-manga__content .swiper-button-next:after,
.c-modal-manga__content .swiper-button-prev:after{
  content:"";
  background: url(/site_cerekinon/assets/img/common/arrow-right-green.svg) no-repeat 50% 50% / cover;
  width: 20px;
  height: 38px;
  display: block;
}

.c-modal-manga__content .swiper-button-prev:after{
  transform: rotate(-180deg);
}

.modal-close-sp{
  display: none;
}


@media screen and (max-width: 768px) {

.manga-ibs__sec__inner{
  display: block;
  margin-bottom: 60px;
}

.manga-ibs__sec__inner > div{
  width: 100%;
  font-size: 16px;
}

.manga-ibs__sec__inner > div img{
  margin-bottom: 10px;
}

.manga-ibs__sec__inner .c-green-btn-round a{
  margin: 30px auto 0;
}

.swiper-container-manga .swiper-wrapper{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
}

.modal-close-sp{
  display: block;
  font-size: 16px;
  color:#fff;
  background-color: #008f3d;
  text-align: center;
  padding: 5px 0;
  border-radius: 10px;
  width: 150px;
  margin: 20px auto;
}

.c-modal-manga__content{
  width: 85%;
  height: 85%;
  overflow-y:scroll;
  -ms-overflow-style: none;    /* IE, Edge 対応 */
  scrollbar-width: none;       /* Firefox 対応 */
}

.c-modal-manga__content::-webkit-scrollbar {  /* Chrome, Safari 対応 */
  display:none;
}

.swiper-container-manga{
 width: 80%;
 height: auto;
}

.c-modal-manga__content .swiper-button-next,
.c-modal-manga__content .swiper-button-prev{
  display: none;
}



}

