/* モーダル */
.swiper{
    overflow: auto;
    border-radius: 5px;
    height: 90vh;
}

.modal,.modal2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
    pointer-events: none;
    opacity: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.5);
  }
  
  /* モーダルがactiveの時 */
  .modal.is-active {
    opacity: 1;
    pointer-events: auto;
  }
  .modal2.is-active {
    opacity: 1;
    pointer-events: auto;
  }
  
  /* モーダル背景のオーバーレイ部分 */
  .modal__overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  
  /* モーダルのコンテンツ */
  .modal__content {
    position: relative;
    width: 79vw;
    max-width: 1300px;

  }
  
  /* モーダルを閉じるボタン */
  .modal__close-btn {
    position: absolute;
    right: 9px;
    top: 8px;
    width: 55px;
    height: 55px;
    cursor: pointer;
    z-index: 10;
}
  
  .swiper-wrapper {
    /* wrapperのサイズを調整 */
    width: 100%;
    height: 300px;
  }
  
  .bosstext{
    color: #000;
  text-shadow: 0 0 5px rgb(255, 255, 255), 0 0 5px rgb(255, 255, 255), 0 0 5px rgb(255, 255, 255);
  }
  .swiper-slide {
    display: flex;
    /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
    color: #fff;
    width: 100%;
    height: 100%;
    text-align: center;
  }

.swiperwrap p{
  font-size: 1.8rem;
  line-height: 1.5;
}

  .swiperbox{

    overflow-y: scroll;
    align-self: center;
    line-height:1.7;
    text-align: left;
    font-size: 1.6rem;
    padding: 2rem 1rem;
    margin: 0;
  }

  .headname{
    width: 100%;
    max-width: 360px;
    filter: drop-shadow(0px 0px 3px #fff) drop-shadow(0px 0px 3px #fff);
  }

    .npcname{
    width: 100%;
    max-width: 360px;
    filter: drop-shadow(0px 0px 3px #fff) drop-shadow(0px 0px 3px #fff);
  }



  .headname3{
    max-width: 200px;
  }

  .overname{
    filter: drop-shadow(0px 0px 3px #fff) drop-shadow(0px 0px 3px #fff);
    width: 100%;
    max-width: 485px;
  }

  .overtext{
    color: #fff;
  }
  
  .swiper-w{
    border: 4px solid #6d241c;
    border-radius: 14px;
    box-sizing: border-box;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: rgb(0 0 0 / 51%);
    flex-direction: column;
    padding-bottom: 2rem;
  }

  .swiper-button-prev,
  .swiper-button-next {
    width: 100% !important;
    height: 100% !important;
    max-width: 55px;
    background-size: contain;
    top: 19% !important;
  }
  

  /* 次ページボタンのスタイル */
  .swiper-button-next {
  right: -10% !important;
  background-image: url('../img/right_slider.png');
  background-repeat: no-repeat;
  }
  
  /* 前ページボタンのスタイル */
  .swiper-button-prev {
    left: -10% !important;
    background-image: url('../img/left_slider.png');
    background-repeat: no-repeat;
  }
  
  .swiper-button-prev:after,
  .swiper-button-next:after {
   display: none;
  }

  .swiper-w a{
    margin-top: 63%;
    width: 18% !important;
    height: auto;
    position: absolute;
    right: 0;
    z-index: 10;
  }


/* モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
    /* overflow: visible; */
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100%;
    /* text-align: center; */
    background: rgba(0, 0, 0, 0.5);
    /* padding: 40px 20px; */
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    box-sizing: border-box;
}
/*モーダル本体の擬似要素の指定*/
.modal-container:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active{
	opacity: 1;
	visibility: visible;
}
/*モーダル枠の指定*/
.modal-body{
	position: relative;
	display: inline-block;
	vertical-align: middle;
}
/*モーダルを閉じるボタンの指定*/
.modal-close{
	position: absolute;
	display: flex;
    align-items: center;
    justify-content: center;
	top: -40px;
	right: -40px;
	width: 40px;
	height: 40px;
	font-size: 40px;
	color: #fff;
	cursor: pointer;
}
/*モーダル内のコンテンツの指定*/
.modal-content{
	padding: 30px;
}
.zoomimg{
    max-width: 100vw !important;
    margin: -142px;
} 
.overtext{
}

@media screen and (min-width: 820px) {

    .overtext{
        text-shadow: 0 0 5px rgb(255, 255, 255), 0 0 5px rgb(255, 255, 255), 0 0 5px rgb(255, 255, 255);

    color: #000;
  }
  .swiper-w{
    background-color: initial;
    flex-direction: column-reverse;
    justify-content: center;
  }
  .swiper-w a {
    width: 100%;
    max-width: 120px;
    bottom: 0;
  }
  .swiper-button-next, .swiper-button-prev{
    max-width: 100px;
    top: 50% !important;
  }
  .swiperbox{
    background-color: inherit;
    font-size: 2rem;
    padding: 0 0 0 10rem;
    width: 100%;
    overflow: auto;
  }
  .swiper{
    overflow: visible !important;
    overflow-x:clip !important;
  }

  .swiper01{
    background: url(../img/modal_monster01.png) 0 0 no-repeat;
    background-size: cover;
  }
  .swiper02{
    background: url(../img/modal_monster02.png) 0 0 no-repeat;
    background-size: cover;
  }
  .swiper03{
    background: url(../img/modal_monster03.png) 0 0 no-repeat;
    background-size: cover;
  }
  .swiper04{
    background: url(../img/modal_monster04.png) 0 0 no-repeat;
    background-size: cover;
  }
  
  .swiper05 {
    background: url(../img/modal_monster05.png) 0 0 no-repeat;
    background-size: cover;
  }
  .swiper06 {
    background: url(../img/modal_monster06.png) 0 0 no-repeat;
    background-size: cover;
  }
  .swiper07 {
    background: url(../img/modal_monster07.png) 0 0 no-repeat;
    background-size: cover;
  }
  .swiper08 {
    background: url(../img/modal_monster08.png) 0 0 no-repeat;
    background-size: cover;
  }
  .swiper09 {
    background: url(../img/modal_monster09.png) 0 0 no-repeat;
    background-size: cover;
  }
  .swiper10 {
    background: url(../img/modal_monster10.png) 0 0 no-repeat;
    background-size: cover;
  }
  .swiper11 {
    background: url(../img/modal_monster11.png) 0 0 no-repeat;
    background-size: cover;
  }
  .swiper12 {
    background: url(../img/modal_monster12.png) 0 0 no-repeat;
    background-size: cover;
  }


  .swipernpc01{
    background-image: url(../img/modal_npc1.png);
    background-size: cover;
  }
  .swipernpc02{
    background-image: url(../img/modal_npc2.png);
    background-size: cover;
  }
  .swipernpc03{
    background-image: url(../img/modal_npc3.png);
    background-size: cover;
  }
  .swipernpc04{
    background-image: url(../img/modal_npc4.png);
    background-size: cover;
  }
  .swipernpc05{
    background-image: url(../img/modal_npc5.png);
    background-size: cover;
  }
  .swipernpc06{
    background-image: url(../img/modal_npc6.png);
    background-size: cover;
  }
  .swiper{
    max-height: 800px;
  }
}