@charset "UTF-8";
@font-face {
  font-family: "dseg";
  src: url("../../font/DSEG7Classic-Bold.woff") format("woff");
}
/* -----------------------------------------------
* gallery Module
* ギャラリー用
-------------------------------------------------- */
:root {
  --primary:#FF8C11;
  --border: #999999;
  --lh-normal: 1.5;
  --lh-title: 1.75;
  --frame1: url(../images/gallery/bg_frame1.png);
  --frame2: url(../images/gallery/bg_frame2.png);
  --frame3: url(../images/gallery/bg_frame3.png);
  --frame4: url(../images/gallery/bg_frame4.png);
  --frame5: url(../images/gallery/bg_frame5.png);
  --frame6: url(../images/gallery/bg_frame6.png);
}

img {
  height: auto;
}

/* -----------------------------------------------
* .l-main
* ***
-------------------------------------------------- */
.l-main {
  /* SP */
  /* PC */
}

/* -----------------------------------------------
* .p-indexlist
* ***
-------------------------------------------------- */
.p-indexlist {
  display: grid;
  /* SP */
  /* PC */
}

/* -----------------------------------------------
* .p-inner
* ***
-------------------------------------------------- */
.p-inner {
  /* SP */
  /* PC */
}

/* -----------------------------------------------
* .p-gallery
* ***
-------------------------------------------------- */
.p-gallery {
  position: relative;
  /* SP */
  /* PC */
}
.p-gallery_prev, .p-gallery_next {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.p-gallery_prev ._link, .p-gallery_next ._link {
  display: block;
  background: url(../images/i_arrow_modal.png) no-repeat center center/contain;
}
.p-gallery_prev ._link {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
.p-gallery_image {
  box-shadow: 0 0 12px white;
}

/* -----------------------------------------------
* .p-detail
* ***
-------------------------------------------------- */
.p-detail {
  position: relative;
  border: 1px solid white;
  background-color: black;
  /* SP */
  /* PC */
}
.p-detail::before, .p-detail::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
}
.p-detail::before {
  background-image: linear-gradient(to bottom, #999 8px, #ccc 8.5px, #ccc 9.5px, transparent 10px, transparent calc(100% - 10px), #ccc calc(100% - 9.5px), #ccc calc(100% - 8.5px), #999 calc(100% - 8px)), linear-gradient(to right, #999 9px, #ccc 9.5px, #ccc 10.5px, transparent 11px, transparent calc(100% - 11px), #ccc calc(100% - 10.5px), #ccc calc(100% - 9.5px), #999 calc(100% - 9px));
  background-repeat: repeat-x, repeat-y;
  background-position: top left;
  background-size: 100% 100%;
}
.p-detail::after {
  background-image: var(--frame1), var(--frame2), var(--frame3), var(--frame4);
  background-repeat: no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  background-size: 68px 30px;
}
.p-detail_title, .p-detail_lead, .p-detail_credit {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: var(--lh-title);
}
.p-detail_title {
  display: grid;
  grid-template-columns: 4em 1fr;
  font-size: 1.8rem;
}
.p-detail_title > dt::after {
  content: "：";
}
.p-detail_lead {
  border-top: 2px solid var(--border);
}

/* -----------------------------------------------
* .p-button
* ***
-------------------------------------------------- */
.p-button {
  text-align: center;
  /* SP */
  /* PC */
}

/* -----------------------------------------------
* .p-bg
* ***
-------------------------------------------------- */
.p-bg {
  position: fixed;
  inset: 0;
  background: url(../images/gallery/bg_gallery.png) no-repeat center center/cover;
  z-index: -1;
  /* SP */
  /* PC */
}
@media screen and (max-width: 767px) {
  .l-main {
    padding-top: 24px;
  }
  .p-indexlist {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
    margin-top: 32px;
  }
  .p-inner {
    margin-top: 33px;
    padding-inline: 44px;
  }
  .p-gallery_prev ._link, .p-gallery_next ._link {
    width: 40px;
    height: 40px;
  }
  .p-gallery_prev {
    left: -44px;
  }
  .p-gallery_next {
    right: -44px;
  }
  .p-detail {
    margin-top: 25px;
    padding: 40px 21px 40px;
  }
  .p-detail_lead {
    margin-top: 16px;
    padding-top: 16px;
  }
  .p-detail_credit {
    margin-top: 16px;
  }
  .p-button {
    margin-top: 64px;
    margin-inline: -44px;
  }
}
@media print, screen and (min-width: 768px) {
  .l-main {
    padding-top: 32px;
  }
  .p-indexlist {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px;
    margin-top: 48px;
  }
  .p-inner {
    margin-top: 40px;
    padding-inline: 80px;
  }
  .p-gallery_prev ._link, .p-gallery_next ._link {
    width: 60px;
    height: 60px;
  }
  .p-gallery_prev {
    left: -80px;
  }
  .p-gallery_next {
    right: -80px;
  }
  .p-detail {
    margin-top: 40px;
    padding: 40px 40px 40px;
  }
  .p-detail_lead {
    margin-top: 16px;
    padding-top: 16px;
  }
  .p-detail_credit {
    margin-top: 16px;
  }
  .p-button {
    margin-top: 80px;
  }
}