/*hd common*/
.no-scroll { overflow: hidden; overflow: clip; }

body::-webkit-scrollbar { width: 12px; }

.hd-opening { position: relative; min-height: 300vh; }

.hd-kv-wrap { position: sticky; top: 100px; width: 100%; height: calc(100dvh - 80px); min-height: 0px; }

.no-scroll .hd-kv-wrap { position: fixed; width: calc(100% - 12px); }

.hd-kv-rulers { position: sticky; z-index: 15; top: 0; left: 2%; height: calc(100dvh - 80px); min-height: 0px; width: 24vh; position: absolute; display: flex; align-items: flex-start; justify-content: center; justify-content: flex-start; flex-direction: column; }

.ruler { height: calc(70vh - 80px); height: 70%; aspect-ratio: 7 / 150; background: url("../img/ruler.svg") no-repeat; background-size: contain; position: relative; }
.ruler em img { display: none; }

.height-arw { position: absolute; background: url("../img/height-a.svg") no-repeat center top; background-size: 100%; width: 4.2vh; height: 0; left: 0; bottom: 0; transform: translateX(-40%); transition-duration: 1.0s; }
.height-arw i img { display: none; }

.height-base { left: 0px; width: 100%; aspect-ratio: 232 / 150; }

.hd-kv-bg-height { position: absolute; width: 100%; height: 1%; bottom: 0; left: 0; background: #32A1CE; transition-duration: 1.0s; }

.hd-kv-dl, .hd-kv-skip { position: absolute; z-index: 40; right: 2vw; bottom: 40px; width: 120px; transition-duration: 0.4s; }
.hd-kv-dl:hover, .hd-kv-skip:hover { opacity: 0.8; }

.hd-kv-skip { transform: translateX(-120%); }

.hd-kv-bg { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(100dvh - 80px); min-height: 0px; z-index: 1; }

.hd-kv { position: absolute; z-index: 10; max-height: calc(100dvh - 80px); min-height: 0px; top: 0; left: 0; opacity: 0; transition-duration: 0.75s; width: 1200px; max-width: 82vw; aspect-ratio: 15 / 7; top: 50%; left: 50%; transform: translate(-50%, -50%); top: auto; bottom: 0; transform: translate(-50%, 0); display: flex; justify-content: center; align-items: center; }
.hd-kv figure { margin: 0 auto; line-height: 0; text-align: center; }
.hd-kv figure img { width: 100%; aspect-ratio: 15 / 7; }
.hd-kv figure i { position: absolute; width: 23%; top: 0; }
.hd-kv figure i img { width: 100%; aspect-ratio: 17 / 35; }

.hd-kv1 figure { transform: translateY(calc((100vh - 80px) * -0.3 - (0.7 * 0.09 * 1.5625 * (100vh - 80px)))); }
.hd-kv1 figure img { transform: translateY(12%); }

.hd-kv2 figure { transform: translateY(calc((100vh - 80px) * -0.3 - (0.7 * 0.23 * 1.5625 * (100vh - 80px)))); }
.hd-kv2 figure img { transform: translateY(16%); }

.hd-kv3 figure { transform: translateY(calc((100vh - 80px) * -0.3 - (0.7 * 0.04 * 1.5625 * (100vh - 80px)))); }
.hd-kv3 figure img { transform: translateY(16%); }

.hd-kv4 figure { transform: translateY(calc((100vh - 80px) * -0.3 - (0.7 * 0.356 * 1.5625 * (100vh - 80px)))); }
.hd-kv4 figure img { transform: translateY(35.6%); }

.kv1 .hd-kv1 { opacity: 1; transition-delay: 0.77s; }
.kv1 .height-arw { height: 13.90%; }
.kv1 .hd-kv-bg-height { height: calc(30% + (0.7 * 0.09 * 1.5625 * 100%)); }

.kv2 .hd-kv2 { opacity: 1; transition-delay: 0.77s; }
.kv2 .height-arw { height: 35.70%; }
.kv2 .hd-kv-bg-height { height: calc(30% + (0.7 * 0.23 * 1.5625 * 100%)); }

.kv3 .hd-kv3 { opacity: 1; transition-delay: 0.77s; }
.kv3 .height-arw { height: 6.4%; }
.kv3 .hd-kv-bg-height { height: calc(30% + (0.7 * 0.0425 * 1.5625 * 100%)); }

.kv4 .hd-kv4 { opacity: 1; transition-delay: 0.77s; }
.kv4 .height-arw { height: 55.5%; }
.kv4 .hd-kv-bg-height { height: calc(30% + (0.7 * 0.356 * 1.5625 * 100%)); }
.kv4 .hd-kv-skip { opacity: 0; visibility: hidden; }

@media (max-height: 572px) and (min-width: 1240px) { .hd-kv { height: 50vh; width: auto; } }
@media (min-aspect-ratio: 16 / 10) and (max-width: 1480px) { /* .kv1 .hd-kv-bg-height{ height: 40.500004%; } .hd-kv2 figure{ transform: translateY(-24.6%); } .kv2 .hd-kv-bg-height{ height: 49.925%; } .hd-kv3 figure{ transform: translateY(1%); } .kv3 .hd-kv-bg-height{ height: 30.15%; } .hd-kv4 figure{ transform: translateY(-32.5%); } .kv4 .hd-kv-bg-height{ height: calc(65.15% - (36px - 2.56vh)); } */ }
@media (min-aspect-ratio: 13 / 9) { .hd-kv figure i { left: calc((100vw - (50vh * 2.143)) * 0.5 * -1 + 6vw); }
  .hd-kv { height: 50vh; width: auto; } }
@media screen and (max-width: 768px) { .height-arw { width: 2.6vh; }
  .height-base { width: 60%; }
  .ruler { background-image: url("../img/ruler-sp.svg"); aspect-ratio: 4 / 150; }
  .hd-kv-bg { height: calc(100vh - 70px); }
  .hd-kv figure i { left: 0; }
  .hd-kv figure img.hd-sm { display: block; aspect-ratio: 10 / 7; }
  .kv1 .height-arw { height: 20.5%; }
  .kv1 .hd-kv-bg-height { height: calc(30.0% + (0.7 * 0.242 * 0.8343333333 * 100%)); }
  .kv2 .height-arw { height: 32.0%; }
  .kv2 .hd-kv-bg-height { height: calc(30% + (0.7 * 0.378 * 0.8343333333 * 100%)); }
  .kv3 .height-arw { height: 16.4%; }
  .kv3 .hd-kv-bg-height { height: calc(30% + (0.7 * 0.1925 * 0.8343333333 * 100%)); }
  .kv4 .height-arw { height: 42.75%; }
  .kv4 .hd-kv-bg-height { height: calc(30% + (0.7 * 0.501 * 0.8343333333 * 100%)); }
  .hd-kv1 figure { transform: translateY(calc((100vh - 80px) * -0.3 - (0.7 * 0.24 * 0.8343333333 * (100vh - 80px)))); }
  .hd-kv1 figure img { transform: translateY(-4%); }
  .hd-kv2 figure { transform: translateY(calc((100vh - 80px) * -0.3 - (0.7 * 0.38 * 0.8343333333 * (100vh - 80px)))); }
  .hd-kv2 figure img { transform: translateY(-2%); }
  .hd-kv3 figure { transform: translateY(calc((100vh - 80px) * -0.3 - (0.7 * 0.1925 * 0.8343333333 * (100vh - 80px)))); }
  .hd-kv3 figure img { transform: translateY(0%); }
  .hd-kv4 figure { transform: translateY(calc((100vh - 80px) * -0.3 - (0.7 * 0.501 * 0.8343333333 * (100vh - 80px)))); }
  .hd-kv4 figure img { transform: translateY(17.84%); }
  .hd-kv4 figure i img { transform: translateY(-13.84%); } }
@media screen and (max-width: 480px) { .hd-opening { height: 450dvh; }
  .hd-kv { transform: translate(-50%, 0%); }
  .hd-kv i img { scale: 1.6; }
  .hd-kv figure i { left: 4vw; transform: translateY(-20%); }
  .hd-kv2 figure img { transform: translateY(-1.5%); }
  .hd-kv3 figure img { transform: translateY(4%); }
  .hd-kv4 figure img { transform: translateY(18.1%); }
  .hd-kv-dl, .hd-kv-skip { width: 80px; }
  .kv1 .hd-kv-bg-height { height: calc(30.0% + (0.7 * 0.233 * 0.8243333333 * 100%)); }
  .kv2 .hd-kv-bg-height { height: calc(30% + (0.7 * 0.368 * 0.8343333333 * 100%)); }
  .kv3 .hd-kv-bg-height { height: calc(30% + (0.7 * 0.1825 * 0.8343333333 * 100%)); }
  .kv4 .hd-kv-bg-height { height: calc(30% + (0.7 * 0.491 * 0.8343333333 * 100%)); } }

/*# sourceMappingURL=hd-opening.css.map */