/* モーダル全体 */
.modal-dialog {
  max-width:750px;
}

.modal-product {
  height:80vh;
  display:flex;
  flex-direction:column;
}

/* body */
.modal-body {
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* 内部スクロール */
.modal-scroll {
  flex:1;
  overflow-y:auto;
}

/* ページコンテナ */
#modalPages {
  position:relative;
  overflow:hidden;
}

/* ページ */
.modal-header {
  background: #0e8989;
  color: #fff;
}
.modal-title {
  margin-bottom: 0;
  line-height: var(--bs-modal-title-line-height);
}
.modal-label {
  background: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  color: #333;
  margin-right: 15px;
  font-size: 14px;
}

.modal-page {
  position:absolute;
  width:100%;
  top:0;
  left:0;
  opacity:0;
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(.4,0,.2,1), opacity .3s;
}

/* 表示 */
.modal-page.active {
  position:relative;
  opacity:1;
  transform:translateX(0);
}

/* 前ページ */
.modal-page.prev {
  transform:translateX(-100%);
}

/* フェードモード */
[data-effect="fade"] .modal-page {
  transform:none;
  transition:opacity .35s;
}

[data-effect="fade"] .modal-page.active {
  opacity:1;
}

[data-effect="fade"] .modal-page.prev {
  opacity:0;
}

/* 画像 */
.modal-page img {
  width:90%;
  max-width:750px;
  height:auto;
  margin:20px auto 0;
  display:block;
}

.modal-page.active img {
  opacity:1;
  transform:scale(1);
}

@keyframes modalImageFade {
  from {
    opacity:0;
    transform:scale(.96);
  }
  to {
    opacity:1;
    transform:scale(1);
  }
}

/* 閉じるボタン */
.modal-header .btn-close {
  filter:invert(1);
}

/* タイトル */
.modal-title {
  display: flex;
  align-items: center;
  font-size: 1.6rem;
}

.modal-label {
  background:#fff;
  padding:5px 10px;
  border-radius:5px;
  color:#333;
  margin-right:15px;
  font-size:14px;
}

.modal-description:empty {
  padding: 0;
}
.modal-description:not(:empty) {
  padding: 0 0 20px 0;
}

.modal_title {
  background: #f5f5f5;
  padding: 10px;
}
h4.modal_title {
  font-size: 1.3rem;
  margin-bottom: 0;
}

.modal_text {
  padding: 20px 20px 10px;
}

/* モーダルfooter */
.modal-footer {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}

.footer-center {
  text-align:center;
}

.footer-right {
  justify-self:end;
}

.btn-group {
  display:flex;
  gap:10px;
}

/* ボタン */
.btn-group {
  display:flex;
  gap:10px;
}

#nextBtn {
  border-radius: 25px;
  background: #0e8989;
  padding: 5px 30px;
}

#prevBtn {
  border-radius: 25px;
  background: #999;
  padding: 5px 30px;
}

#progressText {
  font-size:14px;
  color:#666;
}


.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: var(--bs-btn-active-color);
    background-color: #0e8989;
    border-color: var(--bs-btn-active-border-color);
}


#contentModal .modal-content {
  overflow:hidden;
}

#modalPages {
  overflow:hidden;
  touch-action:pan-y;
  overscroll-behavior-x:none;
  -webkit-overflow-scrolling:auto;
}

.modal-page {
  width:100%;
  max-width:100%;
  overflow:hidden;
}



@media (max-width: 767px) {

.modal-title {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
}

#nextBtn {
  border-radius: 25px;
  background: #0e8989;
  padding: 5px 15px;
  font-size: 0.8rem;
}
#prevBtn {
  border-radius: 25px;
  background: #999;
  padding: 5px 15px;
  font-size: 0.8rem;
}
}