/* =========================================================
   3D WORKS
========================================================= */

.container{
  max-width:1280px;
  margin:0 auto;
  padding:30px 6vw 110px;
}


/* ---------- タイトル ---------- */

.section-head{
  text-align:center;
  margin-bottom:25px;
}

.section-head h1{
  font-family:'Shippori Mincho', serif;
  font-size:clamp(30px, 5vw, 48px);
  letter-spacing:.12em;
}


/* =========================================================
   カルーセル
========================================================= */

.carousel{
  position:relative;

  width:100%;

  padding:20px 7vw 40px;
}


/* ---------- new / old ---------- */

.era-tag{
  position:absolute;
  top:14px;

  font-family:'Cormorant Garamond', serif;
  font-style:italic;

  font-size:12px;
  letter-spacing:.25em;

  text-transform:uppercase;

  color:var(--ink-soft);
  opacity:.75;

  z-index:10;
}

.era-tag.left{
  left:7vw;
}

.era-tag.right{
  right:7vw;
}


/* =========================================================
   オルゴール全体
========================================================= */

.music-box{
  position:relative;

  width:min(900px, 100%);

  height:620px;

  margin:0 auto;
}


/* =========================================================
   作品カルーセル
========================================================= */

.gallery{
  position:absolute;

  /*
  台座の上に作品を置く
  */
  left:50%;
  top:10px;

  transform:translateX(-50%);

  width:70%;
  height:470px;

  display:flex;

  overflow-x:auto;
  overflow-y:hidden;

  scroll-snap-type:x mandatory;

  scroll-behavior:smooth;

  scrollbar-width:none;

  touch-action:pan-x;

  -webkit-overflow-scrolling:touch;

  z-index:2;
}

.gallery::-webkit-scrollbar{
  display:none;
}


/* =========================================================
   1作品
========================================================= */

.specimen{
  /*
  常に1作品だけ表示
  */
  flex:0 0 100%;

  width:100%;

  scroll-snap-align:center;
  scroll-snap-stop:always;

  margin:0;

  display:flex;
  flex-direction:column;

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

  cursor:pointer;
}


/* =========================================================
   GIF部分
========================================================= */

.specimen .frame{
  width:100%;
  height:410px;

  display:flex;

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

  /*
  枠をなくして、
  オルゴールの人形だけが乗っている見た目
  */
  background:transparent;

  border:none;

  overflow:visible;

  box-shadow:none;
}


.specimen .frame img{
  width:100%;
  height:100%;

  display:block;

  /*
  GIFを切らずに全体を表示
  */
  object-fit:contain;

  object-position:center bottom;

  transition:
    transform .35s ease,
    filter .35s ease;
}


/* 作品を少し浮かせる */

.specimen:hover .frame img{
  transform:
    translateY(-8px)
    scale(1.025);

  filter:
    drop-shadow(
      0 12px 12px
      rgba(0,0,0,.28)
    );
}
/* =========================================================
   左右ボタン
========================================================= */

.carousel-btn{
  position:absolute;

  top:48%;

  width:48px;
  height:48px;

  padding:0;

  display:flex;

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

  border:1px solid var(--stitch);

  border-radius:50%;

  background:var(--cream-deep);

  color:var(--ink);

  font-family:'Cormorant Garamond', serif;

  font-size:38px;

  line-height:1;

  cursor:pointer;

  z-index:20;

  transition:
    .25s ease;
}

.carousel-btn.prev{
  left:1vw;
}

.carousel-btn.next{
  right:1vw;
}

.carousel-btn:hover{
  background:var(--magenta);

  border-color:var(--magenta);

  color:#fff;

  transform:scale(1.1);
}

/* =========================================================
   拡大モーダル
========================================================= */

.modal{
  position:fixed;

  inset:0;

  display:flex;

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

  padding:30px;

  background:
    rgba(5,3,4,.9);

  opacity:0;

  visibility:hidden;

  transition:
    opacity .25s ease;

  cursor:zoom-out;

  z-index:500;
}

.modal.active{
  opacity:1;

  visibility:visible;
}

.modal img{
  max-width:90vw;

  max-height:90vh;

  object-fit:contain;

  background:
    var(--cream-deep);

  border:
    1px solid var(--stitch);

  border-radius:4px;

  padding:10px;
}

@media(max-width:860px){

  .container{
    padding:
      20px
      10px
      80px;
  }

  .carousel{
    padding:
      20px
      30px
      30px;
  }

  .music-box{
    height:480px;
  }

  .gallery{
    width:82%;

    height:350px;

    top:15px;
  }

  .specimen .frame{
    height:300px;
  }

  .stage{
    width:95%;

    height:125px;

    bottom:25px;
  }

  .carousel-btn{
    width:38px;

    height:38px;

    font-size:30px;
  }

  .carousel-btn.prev{
    left:-4px;
  }

  .carousel-btn.next{
    right:-4px;
  }

}