@charset "utf-8";

:root {
  --media-frame: 420px;
  --media-gap: 16px;
}

/* base modal&layout ===================================== */

.modal {
display: none;
visibility: hidden;
opacity: 0;
}

.modal.is-open {
display: flex;
align-items: center;
justify-content: center;
overflow-y: auto;
position: fixed;
inset: 0;
z-index: 1000;
visibility: visible;
opacity: 1;
}

.modal-content {
  width: min(92vw,900px);
  height: auto;
  max-height: 90svh;
  margin: auto;
  padding: 40px 20px 60px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* =========================================================
  modal body（base：tablet / SP）
========================================================= */

.modal-body{
  flex: 1;
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  gap: 16px;
}

/* =========================================================
  image / video container
========================================================= */


.modal-img-container {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  background: #fffff0;
  overflow: visible;
  position: relative;
}

/* media 共通 */
.modal-img-container img,
.modal-img-container video {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.one-media-wrapper {
  width: var(--media-frame);
  height: var(--media-frame);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #fffff0;
}

  .modal.one-media.is-landscape .one-media-wrapper {
    align-items: flex-start;
  }

.one-media-wrapper img,
.one-media-wrapper video {
    display: block;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.05);
}



/* ===========================================
text-container
=========================================== */

.modal-text-container {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

#modalTitle {
  font-size: 1.3rem;
  margin-bottom: 12px;
}

#modalDescription {
  font-size: 0.95rem;
  line-height: 1.7;
}

.scroll-hint {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;      
  height: 64px;
  background-image: url(/img/scroll.png);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.85;
  pointer-events: none;
  animation: scrollHintFade 2.5s ease forwards;
}

@media (min-width: 1024px) {
  .scroll-hint {
display: none;
}
}

@media (max-width: 767px) {
  .scroll-hint {
    width: 56px;
    height: 56px;
    bottom: 10%;
  }
}


@media (max-width: 767px) and (orientation: landscape) {
  .scroll-hint {
    width: 48px;
    height: 48px;
    bottom: 6%;
    left: 75%;
  }
}

@keyframes scrollHintFade {
  0% {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
  15% {
    opacity: 0.85;
    transform: translate(-50%, 0);
  }
  70% {
    opacity: 0.85;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -5px);
  }
}
/* ===========================================
carousel base
=========================================== */

.carousel {
  position: relative;
  width: calc(var(--media-frame) * 2 + var(--media-gap));
  height: var(--media-frame);
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
}

/* 横並びトラック */
.carousel-track {
  display: flex;
  transition: transform 0.4s ease;
}

.carousel-track > * {
  flex: 0 0 100%;
  width: 100%;
  display: block;
}

/* 画像共通 */
.carousel-track img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  box-sizing: border-box;
}

/* ===========================================
carousel : controls
=========================================== */


 .carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 35px;
  height: 35px;
  border-radius: 20%;
  background-color: rgba(0, 0, 0, 0.6);
  border:none;
  cursor: pointer;
  z-index: 2;
 }

 .carousel-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
}

.carousel-prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}
.carousel-next::before {
  transform: translate(-75%, -50%) rotate(45deg);
}



 .carousel-prev {left: 10px;}
 .carousel-next {right: 10px;}


/* -----------------------------------------------------------------
break point
----------------------------------------------------------------- */
/* ===========================================
smartphone (~767px)
=========================================== */

@media (max-width: 768px) {

/* base----------------------------- */
  .modal-content {
    padding : 40px 20px;
    max-height: 95svh;
  }

  .modal-body {
    display: flex;
    flex-direction: column;
    gap:12px;
  }


  .modal-img-container {
    height: 60svh;
  }

  /* .modal-text-container {
    height: 25svh;
  } */

/* carousel----------------------------- */

  .carousel,
  .carousel-track {
    height: 100%;
  }


  .carousel-track img {
    height: 100%;
    width: auto;
    object-fit: contain;
    padding: 0;
  }

/* one-image----------------------------- */
.modal.one-media.is-landscape .modal-img-container {
  max-height: 40svh;
}

.modal.one-media .modal-text-container {
  padding-top: 10px;
}
.modal.one-media .modal-img-container {
  overflow: hidden;
}



/* two-image----------------------------- */
  .modal-body.two-media .slide {
    width: 100% !important;
    max-width: 100%;
  }

  .modal-body.two-media .carousel {
    width: 100%;
  }
  .modal-body.two-media .carousel-track {
    width: 100%;
  }
  .modal-body.two-media img {
    display: block;
    margin-inline: auto;
  }

}

/* ===========================================
narrow smartphone (<=430px)
=========================================== */

@media (max-width: 430px) {

  .modal-content {
    padding :30px 10px;
  }

  /* .modal-text-container {
  max-height: 25vh;
  } */

}

/* ===========================================
smartphone landscape
img | text
=========================================== */

@media (max-width: 767px) and (orientation: landscape) {

  .modal.is-open {
    align-items: stretch;
    justify-content: center;
  }

  .modal-content {
    max-height: 90svh;
    height: 90%;
    padding: 20px;
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

.modal.two-media .modal-content {
  width: min(90vw, 700px);
}

  .modal-body {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .modal-body.one-media,
  .modal-body.two-media {
    height: 100%;
  }


  .modal-img-container {
    width: 55%;
    max-height: none;
    height: 70svh;
  }

  .modal.one-media.is-landscape .modal-img-container {
  width: min(40vw, 800px);
  max-height: 70svh;
}
  .modal.two-media .modal-img-container {
  width: min(40vw, 800px);
  max-height: 70svh;
}

  .modal-text-container {
    width: 45%;
    max-height: 75svh;
    /* height: 80svh; */
  }

  .one-media-wrapper {
  width: var(--media-frame);
  height: var(--media-frame);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #fffff0;
  object-fit: cover;
}

  .modal.one-media.is-landscape .one-media-wrapper {
    align-items: center;
  }

  /* カルーセル----------------------------- */
 .carousel-prev {left: 40px;}
 .carousel-next {right: 40px;}

}

/* ===========================================
tablet(768px~1023)
image top | text bottom
=========================================== */

@media (min-width: 768px) and (max-width: 1023px) {

  .modal-content {
    max-width: 800px;
    max-height: 90svh;
    overflow: hidden;
    padding : 30px 40px;
  }

  .modal.one-media .modal-content{
    max-width: 700px;
    max-height: 90svh;
    overflow: hidden;
    padding : 50px 40px;
  }

  .modal.one-media .one-media-wrapper {
    width: 100%;
    height: 65svh;
  }



  .modal-body.two-media {
    display: grid;
    grid-template-rows: minmax(200px, 55svh) 1fr;
    gap: 16px;
    height: 100%;
  }

  .modal-img-container {
    max-height:65svh;
  }

  .modal.one-media .modal-img-container {
    height:55svh;
  }

    .modal.one-media .modal-text-container {
    max-width: 600px;
    margin: 0 auto;
  }



  .modal.two-media .modal-img-container {
    width:100%;
    height: 100%;
    overflow: hidden;
  }

  .modal.one-media .modal-media-wrapper img,
  .modal.one-media .modal-media-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;  
  }

  .one-media-wrapper img {
  object-fit: cover;
  transform: scale(0.9);
}

  .modal.one-media .modal-img-container img,
  .modal.one-media .modal-img-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;  
  }


  .modal.one-media.is-landscape .modal-img-container img{
    object-fit: contain;  
  }

  .modal.two-media img,
  .modal.two-media video{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

 .carousel-btn {
  width: 50px;
  height: 50px;
 }

 .carousel-btn::before {
  width: 20px;
  height: 20px;
  }

 .carousel-prev {left: 0;}
 .carousel-next {right: 0;}

 .close-btn {
  width: 40px;
  height: 40px;
font-size: 40px;
  }

}


/* ===========================================
tablet landscape (768px~1023)
image | text
=========================================== */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {

/* .modal-body.two-media .modal-text-container {
  max-height: 50svh;
} */

}

/* ===========================================
PC (1024px~)
image | text
=========================================== */

@media (min-width: 1024px) {

  /* img基準サイズ--------------------------- */

:root {
  --media-frame: 420px;
  --media-gap: 12px;
}

/* ===========================================
  modal-content 外枠
=========================================== */
  .modal-content {
    height: auto;
  max-height: none;
  padding: 30px 20px;
  display: flex;
  overflow: hidden;
}

.modal.two-media .modal-content {
  width: min(90vw, 1200px);
}

.modal.one-media.is-landscape .modal-content {
  width: min(80vw, 1000px);
  max-height: 70svh;
}

/* 縦長画像の時だけmodalスリム化 */
.modal.one-media.is-portrait .modal-content {
  width: min(70vw, 800px);
}

/* ===========================================
  modal-body レイアウト
=========================================== */

  .modal-body {
    height: auto;
    display: grid;
    gap: 24px;
    align-items: stretch;
    max-height: 100%;
  }

  .modal-body.one-media {
    display: grid;
    grid-template-columns: 5fr 5fr;
    gap: var(--media-gap);
  }

  .modal.one-media.is-landscape .modal-body.one-media {
    grid-template-columns: 6.5fr 3.5fr;
  }

  .modal-body.two-media {
    display: grid;
    grid-template-columns: 6fr 4fr;
    gap: var(--media-gap);
  }

  #modalMedia {
    width: 100%;
  }

  .modal-body.one-media > *,
  .modal-body.two-media > * {
    min-width: 0;
  }

/* ===========================================
image | Video
=========================================== */

  .modal-img-container {
    width: var(--media-frame) ;
    height: var(--media-frame);

    display: flex;
    align-items: center;
    justify-content: center;
    background: #fffff0;

    overflow: hidden;
    margin: 0;
  }

  /* 横向きのみ適用------------------------- */
  .modal.one-media.is-landscape {
  --media-frame: 600px;
}
  .modal.one-media.is-landscape .modal-img-container {
  align-items: flex-start;
  padding-top: 12px;
}

  .modal-img-container img,
  .modal-img-container video{
    width:100%;
    height: 100%;
  }

  /* 横向きのみ適用---------------------------- */
  .modal.one-media.is-landscape .modal-img-container {
    height: auto;
    max-height: 100%;
    align-self: flex-start;
}

  /* one-media video ----------------------  */
  .modal-body.one-media .modal-video {
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}


 /* two-media---------------------- */

  .modal-body.two-media .modal-img-container {
    align-items: stretch;
  }

   /* ===========================================
text
=========================================== */

.modal-text-container {
  max-height: var(--media-frame);
  overflow-y: auto;
}

  /* .modal-body.one-media .modal-text-container {
    max-height: 60svh;
  }
  .modal-body.two-media .modal-text-container {
    max-height: 55svh;
  } */

 /* ===========================================
carousel PC only
=========================================== */
.carousel {
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.4s ease;
}

.carousel-track> *,
.one-media-wrapper {
  flex: 0 0 var(--media-frame);
  width: var(--media-frame);
  height: var(--media-frame);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal.two-media .carousel-track > .slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.carousel img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.one-media-wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform: scale(1.05);
}

  .modal.one-media.is-landscape .one-media-wrapper img {
   height: auto;
   max-height: 100%;
   object-fit: unset;
  }

.carousel video,
.one-media-wrapper video {
  object-fit: contain;
}


.carousel-track img,
.carousel-track video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.modal.two-media .slide img,
.modal.two-media .slide video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

   /* ===========================================
video hidden safety
=========================================== */
  .modal-video[hidden] {
    display: none !important;
  }

}

/* ===========================================
特殊tablet 縦長専用 
image | text
=========================================== */

@media (min-width: 900px) and (max-width: 1300px) and (min-height: 1600px) and (orientation: portrait) {

.modal-content {
  max-width: 1000px;
}

.modal-img-container {
  max-height: 85svh;
}

.modal.one-media.is-landscape .one-media-wrapper{
  align-items: center;
}


.modal-body.one-media{
  align-items: center;
}

}


/* ===== スクロール安定パッチ ===== */

.modal.is-open {
  overflow: hidden; 
}

.modal-content {
  height: auto;
  max-height: 90svh;
  overflow: hidden;
}

.modal-body {
  min-height: 0;
}

.modal-img-container {
  flex-shrink: 0;
}

.modal-text-container {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}