@charset "utf-8";

/* ==========================================
  Base Styles
========================================== */

/* Font Family
------------------------------ */
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium"), local("YuGothic-Medium");
}

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold"), local("YuGothic-Bold");
  font-weight: bold;
}

/* Base Container
------------------------------ */
.bz {
  overflow-x: hidden;
  width: 100%;
}

.bz-main {
  width: 100%;
}

/* Base Elements
------------------------------ */
html {
  font-size: 100%;
}

body {
  color: var(--color__txt);
  font-family: var(--font-family__base);
  word-break: break-all;
  font-weight: 400;
}

ul {
  list-style: none;
}

p {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 2;
  font-weight: 400;
  color: var(--color__white);
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-family__base);
}

a {
  text-decoration: none;
}

p a {
  font-weight: bold;
  text-decoration: underline;
}

em {
  font-style: normal;
  font-weight: bold;
}

img {
  vertical-align: middle;
  max-width: 100%;
  width: 100%;
  display: block;
}

picture {
  display: block;
  line-height: 0;
  font-size: 0;
}

picture > img {
  font-size: 0px;
  font-size: 0rem;
}

::placeholder {
  color: rgba(0, 0, 0, 0.2);
}

*:focus {
  outline: none;
}

h1,
h2,
h3 {
  font-family: var(--font-family__base);
  color: var(--color__white);
  font-weight: 400;
}

/* Media Queries
------------------------------ */
@media (min-width: 768px) and (max-width: 1200px) {
  html {
    font-size: calc((100vw - 768px) / 432 * 2 + 14px);
  }
}

@media (max-width: 1000px) {
  html {
    font-size: 14px;
  }
}

@media (max-width: 767.98px) {
  html {
    font-size: calc((100vw - 375px) / 39 * 0.8 + 15.5px);
  }

  p {
    line-height: 1.75;
    font-size: 16px;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    font-family: var(--font-family__base);
    text-align: justify;
  }
}

@media (max-width: 413.98px) {
  html {
    font-size: calc((100vw - 375px) / 39 * 1.6 + 14.4px);
  }
}