body.modal-open{
  overflow: hidden;
  height: 100vh;
  touch-action: none;
}

html.modal-open{
  overflow: hidden;
}
/* コレクション用ここから */
#contentWrapper .ct_box .w480{
margin: 0 auto !important;
background: url(../img/ct_gacha_bg.webp);
background-size: contain;
}

.collection_ttl{
position: relative;
z-index: 2;
}
.collection_subttl{
color: #ee5d0e;
background: #fff;
display: inline-block;
padding: 5px 20px 5px 40px;
margin-left: -30px;
border: solid 2px #ee5d0e;
border-left: none;
border-radius: 0px 100px 100px 0px;
box-shadow: 6px 6px 0px 0px #ee5d0e;

rotate: -5deg;
position: relative;
z-index: 2;
}

.collection_bg_top{
position: absolute;
z-index: 1;
top: 0;
}
.collection_bg_bottom{
position: absolute;
z-index: 1;
bottom: -4%;
}

.card_collection {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0 12px;
  position: relative;
  z-index: 2;
}

.collection_card {
  text-align: center;
}

.collection_card img {
  width: 100%;
  display: block;
}

.collection_card.is_locked {
  opacity: 1;
}

.collection_card p {
  font-size: 12px;
  margin-top: 5px;
}

.collection_card span {
  font-size: 11px;
}

.top_btn{
display: block;
width: 45%;
background: #001d3e;
border: solid 2px #fff;
padding: 5px 30px;
border-radius: 50px;
text-align: center;
margin: 0 auto;

color: #fff;
text-decoration: none;

position: relative;
z-index: 2;
}
.top_btn:hover{
opacity: 0.7;
}
@media (max-width: 767px) {
.top_btn{
width: 80%;
}
}

.collection_info_txt{
position: relative;
z-index: 2;
color: #fff;
text-shadow: 4px 5px 7px #ec6800;
text-align: center;
margin: 0;
}

.collection_card{
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

.collection_card.is_locked{
  cursor: default;
}

.collection_card.is_owned:hover{
  opacity: .75;
}

.collection_modal{
  position: fixed;
  inset: 0;
  z-index: 13000;
  background: rgba(0,0,0,.8);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.collection_modal.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation:modalFadeIn .3s ease forwards;
}

@keyframes modalFadeIn{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}

@keyframes modalPopIn{
  from{
    opacity:0;
    transform:scale(.9) translateY(20px);
  }
  to{
    opacity:1;
    transform:scale(1) translateY(0);
  }
}

.collection_modal_inner{
  position: relative;
  width: 90%;
  max-width: 420px;
  background: url(../img/gacha_modal_bg.webp);
  background-size: cover;
  border-radius: 16px;
  padding: 60px 20px 50px;
  text-align: center;
}
.collection_modal.is-open .collection_modal_inner{
animation:modalPopIn .35s ease forwards;
}

.collection_modal_close{
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: none;
  font-size: 32px;
  font-weight: bold;
  cursor: pointer;
  color: #fff;
}

.collection_modal_img{
  display: block;
  width: 100%;
  height: auto;
}

.collection_modal_name{
  margin-top: 12px;
  font-size: 18px;
  font-weight: 800;
}

.collection_modal_rarity{
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
}

.collection_modal_card{

  width: 80%;
    --mx:50%;
    --my:50%;

    margin: 0 auto;

    position:relative;

    transform-style:preserve-3d;

    will-change:transform;

    touch-action:none;
}

.collection_modal_card img{
    display:block;
    width:100%;
}

.collection_modal_card.is-3d{
    cursor:pointer;
}

.collection_modal_share{
  color: #fff !important;
  font-weight: 500 !important;
}
.collection_modal_share:hover{
text-decoration: underline;
opacity: .7;
}


.collection_modal_item, .gacha_reset{
color: #fff;
background-image: linear-gradient(90deg, #ff6200, #ff4800);
position: relative;
z-index: 9;
width: 65%;
text-decoration: none;

margin: 0 auto;

padding: 10px 10px;
border-radius: 30px;
border: none;

cursor: pointer;
 box-shadow: inset -3px -2px 0px 0px rgba(222, 63, 0, 1), inset 3px 2px 10px 0px rgba(255, 174, 122, 1), 0px 2px 1px 0px rgba(186, 53, 0, 1), 0px 6px 12px 0px rgba(0, 0, 0, 0.5);

 transition:
    transform .2s ease,
    box-shadow .2s ease,
    opacity .2s ease;
}

.collection_modal_item:hover, .gacha_reset:hover {
opacity: .9;
box-shadow: inset -3px -2px 0px 0px rgba(222, 63, 0, 1), inset 3px 2px 10px 0px rgba(255, 174, 122, 1);
transform: translateY(2px);
}
/* --------------------------------- */