:root {
  --v-color-orange: #f28c1b;
  --v-color-orange-light: #f79a2e;
  --v-color-orange-dark: #d96f00;
  --v-color-orange-text: var(--v-color-orange-dark);
  --v-color-accent: var(--v-color-orange);
  --v-color-red: var(--v-color-orange);
  --v-color-red-dark: var(--v-color-orange-dark);
  --v-color-black: #1e1e1e;
  --v-color-ink: #252525;
  --v-color-charcoal: #353e41;
  --v-color-gray: #6f6f6f;
  --v-color-caption: #898989;
  --v-color-line: #bababa;
  --v-color-line-soft: #b9b9b5;
  --v-color-tint: #fff8f0;
  --v-color-soft: #f4f4f3;
  --v-color-promise-bg: #ececea;
  --v-color-promise-line: #d2d2ce;
  --v-color-white: #ffffff;
  --v-radius-card: 18px;
  --v-radius-small: 10px;
  --v-shadow-soft: 0 20px 60px rgba(30, 30, 30, 0.08);
  --v-shadow-card: 0 18px 48px rgba(30, 30, 30, 0.08);
  --v-shadow-card-strong: 0 24px 70px rgba(30, 30, 30, 0.12);
  --v-gradient-orange: linear-gradient(145deg, var(--v-color-orange) 0%, var(--v-color-orange-light) 46%, var(--v-color-orange-dark) 100%);
  --v-gradient-cta: var(--v-gradient-orange);
  --v-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --v-dur-reveal: 0.8s;
  --v-dur-roll: 0.6s;
  --vm-roll-stagger: 55ms;
  --v-font-ja: "Noto Sans JP", system-ui, sans-serif;
  --v-font-en: "Familjen Grotesk", Arial, sans-serif;
  --v-header-height: 9rem;
  --v-content-wide: 124rem;
  --v-content-medium: 96rem;
  --v-content-narrow: 78rem;
}

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

html {
  font-size: clamp(9px, calc(10 / 1440 * 100vw), 10px);
  overflow-x: hidden;
  scroll-padding-top: calc(var(--v-header-height) + 2.4rem);
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  background: var(--v-color-white);
  color: var(--v-color-ink);
  font-family: var(--v-font-ja);
  font-size: 1.6rem;
  line-break: strict;
  line-height: 1.8;
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-wrap: break-word;
  word-break: normal;
}

body.is-drawer-open {
  overflow: hidden;
}

main {
  overflow: clip;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

picture,
figure {
  display: block;
  margin: 0;
}

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

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

table {
  border-collapse: collapse;
}

:focus-visible {
  outline: 2px solid var(--v-color-orange-text);
  outline-offset: 4px;
}

.v-skip-link {
  background: var(--v-color-ink);
  color: var(--v-color-white);
  font-size: 1.4rem;
  font-weight: 700;
  left: 1.6rem;
  padding: 1.2rem 1.6rem;
  position: fixed;
  top: 1.6rem;
  transform: translateY(-180%);
  transition: transform 0.2s ease;
  z-index: 10000;
}

.v-skip-link:focus {
  transform: translateY(0);
}

.vm-en,
.vm-h2,
.v-logo__text,
.v-eyebrow {
  font-family: var(--v-font-en);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
dt,
dd {
  text-wrap: pretty;
}

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

.vm-color-red {
  color: var(--v-color-orange-text);
}

.vm-color-white {
  color: var(--v-color-white);
}

.pc-only {
  display: block;
}

.sp-only {
  display: none;
}

.vm-scrollbar-none {
  scrollbar-width: none;
}

.vm-scrollbar-none::-webkit-scrollbar {
  display: none;
}

.vm-roll,
.vm-inkwipe {
  display: inline-block;
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 900px) {
  html {
    font-size: clamp(9px, calc(9 / 375 * 100vw), 10px);
  }

  body {
    font-size: 1.5rem;
  }

  .pc-only {
    display: none !important;
  }

  .sp-only {
    display: block;
  }
}

@media (min-width: 1441px) {
  html {
    font-size: 10px;
  }
}
