/***
    The new CSS reset - version 1.11.2 (last updated 15.11.2023)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  text-size-adjust: none;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

a,
button {
  cursor: revert;
}

ol,
ul,
menu,
summary {
  list-style: none;
}

iframe,
svg,
img {
  height: fit-content;
  vertical-align: middle;
  max-inline-size: 100%;
  max-block-size: 100%;
}

table {
  border-collapse: collapse;
}

input,
textarea {
  -webkit-user-select: auto;
}

textarea {
  white-space: revert;
}

meter {
  appearance: revert;
  -webkit-appearance: revert;
}

:where(pre) {
  all: revert;
  box-sizing: border-box;
}

::placeholder {
  color: unset;
}

:where([hidden]) {
  display: none;
}

:where([contenteditable]:not([contenteditable=false])) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  -webkit-user-select: auto;
}

:where([draggable=true]) {
  -webkit-user-drag: element;
}

:where(dialog:modal) {
  all: revert;
  box-sizing: border-box;
}

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

:root {
  --viewport-base: 768;
  --viewport-mobile: 375;
  --base-font-size: 16;
  --inner-base: 580;
  --wrapper-base: 768;
  --u: calc(1rem / 16);
  --inner-padding-sp: calc(15 / 16 * 1rem);
  --inner-width: calc(var(--inner-base) * 100vw / var(--viewport-base));
  --inner-max: 580px;
  --wrapper-width: calc(var(--wrapper-base) * 100vw / var(--viewport-base));
  --wrapper-max: 768px;
  --margin-offset: min(0px, calc(-50vw + (var(--inner-width) / 2)));
  --color-base: #ffffff;
  --color-text: #111111;
  --color-text-inverse: #ffffff;
  --color-border: #e0e0e0;
  --color-primary: #e60012;
  --color-secondary: #f08300;
  --color-light-red: #fdeaea;
  --color-light-blue: #e1f5fe;
  --color-light-green: #e8f5e9;
  --color-light-yellow: #fff8e1;
  --color-light-orange: #fff0e8;
  --ease-rich: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 0.15s;
  --duration-base: 0.3s;
  --duration-slow: 0.5s;
  --shadow: 0 0 10px rgba(0,0,0,0.1);
}
@media screen and (min-width: 768px) {
  :root {
    --inner-width: calc(var(--inner-base) * 100vw / var(--viewport-base));
    --margin-offset: min(0px, calc(-50vw + (var(--inner-width) / 2)));
  }
}
@media screen and (max-width: 579.98px) {
  :root {
    --inner-width: calc(100vw - var(--inner-padding-sp) * 2);
    --margin-offset: calc(var(--inner-padding-sp) * -1);
  }
}
@media screen and (min-width: 768px) {
  :root {
    --inner-width: var(--inner-max);
    --margin-offset: calc((var(--inner-max) - 100vw) / 2);
  }
}

html {
  font-size: calc(var(--base-font-size) * 100vw / var(--viewport-base));
  scroll-padding-top: var(--header-height);
}
@media screen and (max-width: 579.98px) {
  html {
    font-size: calc(var(--base-font-size) * 100vw / var(--viewport-mobile));
  }
}
@media screen and (min-width: 768px) {
  html {
    font-size: 16px;
  }
}
html {
  overscroll-behavior-y: none;
}

body {
  color: var(--color-text);
  line-height: 1.6;
  font-optical-sizing: auto;
  letter-spacing: 0;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: 500;
  font-family: "Zen Maru Gothic", sans-serif;
}
@media print {
  body {
    -webkit-print-color-adjust: exact;
  }
}

img {
  width: 100%;
  max-width: calc(var(--w) * var(--u));
  height: auto;
}

:focus-visible {
  outline: 2px solid rgb(from var(--color-secondary) r g b/50%);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border-width: 0;
  white-space: nowrap;
  clip: rect(0, 0, 0, 0);
}

.visible-sp {
  display: none;
}
@media screen and (max-width: 579.98px) {
  .visible-sp {
    display: block;
  }
}

@media screen and (max-width: 579.98px) {
  .hidden-sp {
    display: none;
  }
}

.wrapper {
  position: relative;
  width: 100%;
  max-width: min(var(--wrapper-width), var(--wrapper-max));
  margin: 0 auto;
}

.inner {
  position: relative;
  max-width: min(var(--inner-width), var(--inner-max));
  margin: 0 auto;
  --inner-p: 0;
}
/*# sourceMappingURL=app.css.map */