@charset "utf-8";
/* dlight */
.dm {}

/* SMARTPHONE
================================================== */
@media screen and (max-width: 768px) {
  
  .page--header .ph--read {
    line-height: 2;
    margin-bottom: 30px;
  }
  
  .ban--spec li {
    font-family: var(--font-ja-go);
    font-size: 1rem;
    text-align: center;
  }

  .ban--gal-wrap {
    margin: 0 auto 100px;
  }
  .ban--gal-inner {
    margin: auto;
  }
  .ban--gal-inner > div {
    position: relative;
  }
  .ban--gal--ph1 {
    width: 87.8%;
    margin: 0 auto 8%;
  }
  .ban--gal--ph2 {
    width: 56%;
    margin: 0 0 10% 6.7%;
  }
  .ban--gal--ph3 {
    width: 65.1%;
    margin: 0 0 10% auto;
    z-index: 5;
  }
  .ban--gal--ph4 {
    width: 51.3%;
    height: auto;
    aspect-ratio: 1	/	1.466;
    margin: -36% 0 0 6.7%;
    overflow: hidden;
  }
  .ban--gal--ph4 video {
    width: 100.6%;
    height: auto;
  }
  .ban--gal--ph5 {
    width: 31.6%;
    margin: -24% 0 38% 51.6%;
    z-index: 5;
  }
  .ban--gal--ph6 {
    width: 34.1%;
    margin: 0 6.7% 6% auto;
  }
  .ban--gal--ph7 {
    width: 44.5%;
    margin: -48% 0 0 9.3%;
  }
  .ban--gal--ph8 {
    width: 34.1%;
    margin: -3% 6.7% 0 auto;
  }
  .ban--gal--ph9 {
    width: 26.4%;
    margin: -18% 0 0 22.5%;
  }
  
}

/* DESKTOP
================================================== */
@media screen and (min-width: 769px), print {
  
  .page--header .ph--read {
    line-height: 1.8;
    margin-bottom: 50px;
  }
  
  .ban--spec {
    display: flex;
    justify-content: center;
    column-gap: 20px;
  }
  .ban--spec li {
    font-family: var(--font-ja-go);
    font-size: 1.4rem;
  }
  

  .ban--gal-wrap {
    margin: 0 auto 240px;
  }
  .ban--gal-inner {
    width: 80.4%;
    max-width: 1544px;
    margin: auto;
  }
  .ban--gal-inner > div {
    position: relative;
  }
  .ban--gal--ph1 {
    width: 73.8%;
    margin: 0 auto 8%;
  }
  .ban--gal--ph2 {
    width: 26.9%;
    margin: 0 0 10% 24.4%;
  }
  .ban--gal--ph3 {
    width: 53.3%;
    margin: 0 0 10% auto;
    z-index: 5;
  }
  .ban--gal--ph4 {
    width: 27.8%;
    height: auto;
    aspect-ratio: 1	/	1.466;
    margin: -36% 0 0 24.4%;
    overflow: hidden;
  }
  .ban--gal--ph4 video {
    width: 100.6%;
    height: auto;
  }
  .ban--gal--ph5 {
    width: 21.5%;
    margin: -21% 0 0 12.5%;
    z-index: 5;
  }
  .ban--gal--ph6 {
    width: 30.5%;
    margin: 0 0 6% 59.1%;
  }
  .ban--gal--ph7 {
    width: 33.8%;
    margin: -18% 0 0 12.5%;
  }
  .ban--gal--ph8 {
    width: 25.8%;
    margin: -23% 0 0 59.1%;
  }
  .ban--gal--ph9 {
    width: 20%;
    margin: -5% 0 0 32.2%;
  }

}