@import "variable.css";

:root {
  interpolate-size: allow-keywords;
}

* {
  padding: 0;
  margin: 0;
}

body {
  color: var(--h--color-white);
  font-family: var(--h--font-family-base);
  font-size: clamp(
    var(--h--font-size-xs),
    calc(calc(var(--h--font-size-xs) / 1px) / 375 * 100vw),
    var(--h--font-size-md)
  );
  font-weight: var(--h--font-weight-sm);
  line-height: var(--h--line-height-lg);
  letter-spacing: var(--h--letter-spacing-none);
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--h--color-Navy-200);
  background-image: url("../images/bg_line_sp.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  margin: 0;
  overflow-x: hidden;

  @media (width >= 768px) {
    background-image: url("../images/bg_line_pc.png");
  }
}

h1,
h2,
h3,
h4 {
  text-wrap: wrap;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

button {
  color: inherit;
  background-color: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ol,
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

:focus:not(:focus-visible) {
  outline: none;
}

:where(dialog) {
  width: unset;
  max-width: unset;
  height: unset;
  max-height: unset;
  padding: unset;
  color: unset;
  background-color: unset;
  border: unset;
  overflow: unset;
}

:where(:root[data-mousedown] dialog *) {
  outline: none;
}

[data-modal-open]:where(:root[data-mousedown] *) {
  outline: none;
}

summary {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

/* ===============================================
# Utility
=============================================== */
.u-font-en {
  font-family: var(--h--font-family-en);
}

.u-text-black {
  color: var(--h--color-black);
}

.u-uppercase {
  text-transform: uppercase;
}

.u-text-center {
  text-align: center;
}

.u-text-centerleft {
  text-align: left;

  @media (width >= 768px) {
    text-align: center;
  }
}

.u-object-cover {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.u-hidden {
  position: fixed !important;
  top: 0px !important;
  left: 0px !important;
  width: 0px !important;
  height: 0px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  visibility: visible !important;
}

/* var(---h--breakpoint-sm) */
.u-hidden-sm-down {
  display: none !important;
}

@media (width >= 768px) {
  .u-hidden-sm-down {
    display: revert !important;
  }

  .u-hidden-sm-up {
    display: none !important;
  }
}

/* var(---h--breakpoint-md) */
.u-hidden-md-down {
  display: none !important;
}

@media (width >= 1024px) {
  .u-hidden-md-down {
    display: revert !important;
  }

  .u-hidden-md-up {
    display: none !important;
  }
}

/* var(---h--breakpoint-lg) */
.u-hidden-lg-down {
  display: none !important;
}

@media (width >= 1280px) {
  .u-hidden-lg-down {
    display: revert !important;
  }

  .u-hidden-lg-up {
    display: none !important;
  }
}

/* var(---h--breakpoint-xl) */
.u-hidden-xl-down {
  display: none !important;
}

@media (width >= 1440px) {
  .u-hidden-xl-down {
    display: revert !important;
  }

  .u-hidden-xl-up {
    display: none !important;
  }
}