* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: rgb(230, 230, 230);
  color: #000;
  font-family: "WDXL Lubrifont JP N", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.carousel-section + .carousel-section {
  margin-top: 2.5vh;
  padding-top: 2.5vh;
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, #e6e6e6 10%, #999999 50%, #e6e6e6 90%) 1;
}

.carousel-title {
  font-weight: normal;
  margin-left: 10vw;
  font-size: 3rem;

}

.carousel-block {
  margin-top: 8px;
  width: 100%;
}

/* box-shadow(オフセット16px+ぼかし16px)がoverflow:hiddenで
   切れないための固定の逃げ幅。画像サイズに関わらず影の大きさは一定なので
   ビューポート幅に応じて可変にする必要はない */
.swiper {
  width: 100%;
  max-width: 100vw;
  padding: 32px 0;
}

.swiper-slide {
  width: clamp(225px, calc(152.11px + 19.44vw), 432px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-slide img {
  width: clamp(225px, calc(152.11px + 19.44vw), 432px);
  height: auto;
  cursor: pointer;
  border-radius: 0 16px 0 16px;
  filter: brightness(0.8);
  transform: scale(1);
  box-shadow: 8px 16px 16px rgba(0, 0, 0, 0.5);
  transition: filter 1s ease, transform 0.5s ease;
}

.swiper-slide-active {
  z-index: 10;
}

.swiper-slide-active img {
  filter: brightness(1);
  transform: scale(1.2);
}

dialog {
  border: none;
  padding: 24px;
  max-width: 90vw;
  max-height: 90vh;
  background: rgba(240, 240, 240, 1);
}

dialog:not([open]) {
  display: none;
}

dialog[open] {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

dialog::backdrop {
  background: rgba(255, 255, 255, 0.8);
}

dialog img {
  display: block;
  max-width: 80vw;
  max-height: 70vh;
}

dialog h2 {
  margin-top: 16px;
  font-weight: normal;
}

dialog p {
  margin-top: 8px;
}

dialog form {
  align-self: flex-end;
}

dialog .close {
  background: none;
  border: none;
  font-size: 4rem;
  cursor: pointer;
}