:root {
  --background: #F5F4ED;
  --foreground: #000000;
  --shadow: rgba(241, 176, 85, 0.45);
  --card: #DAD9D3;
  --gray: #312F2D;
  --accent: #EAE151;

  --body: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
  --hero: clamp(1.75rem, 1.477rem + 1.36vw, 2.5rem);
  --h1: clamp(1.75rem, 1.295rem + 2.27vw, 3rem);
  --h2: clamp(1.5rem, 1.227rem + 1.36vw, 2.25rem);
  --h3: clamp(1.125rem, 1.08rem + 0.23vw, 1.25rem);
  --caption: clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem);

  --body-en: clamp(0.75rem, 0.659rem + 0.45vw, 1rem);
  --h1-en: clamp(1.875rem, 1.648rem + 1.14vw, 2.5rem); 
  --h2-en: clamp(1.375rem, 1.284rem + 0.45vw, 1.625rem);
  --h3-en: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
  
  --space-small: 3rem;
  --space-medium: clamp(7.5rem, 6.136rem + 6.82vw, 11.25rem);
  --space-large: clamp(13.75rem, 11.932rem + 9.09vw, 18.75rem);

  --radius-small: 5px;
  --radius-medium: 15px;
  --radius-large: 30px;
}

/* dark */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #1C1C1C;
    --foreground: #FFFFFF;
    --shadow: rgba(255, 255, 163, 0.3);
    --card: #312F2D;
    --gray: #DAD9D3;
  }
}

html, body {
  height: 100%;
}

body, h1, h2, h3, p, figure, ul {
  font-weight: 300;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.8;
}

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

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

a:hover {
  opacity: 0.6;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: var(--body);
  letter-spacing: 0.1em;
}

h1 {
  font-size: var(--h1);
}

h1.en {
  font-size: var(--h1-en);
}

h2 {
  font-size: var(--h2);
}

h2.en {
  font-size: var(--h2-en);
}

h3 {
  font-size: var(--h3);
}

h3.en {
  font-size: var(--h3-en);
}
p.en {
  font-size: var(--body-en);
}

.caption {
  font-size: var(--caption);
}

path {
  fill: var(--foreground);
}

.wrapper-outer {
  width: min(90vw, 1152px);
  margin: 0 auto;
}

.wrapper-inner {
  width: min(90vw, 850px);
  margin: 0 auto;
}
@media (max-width: 599px) {
  .wrapper-inner {
    text-align: center;
  }
}

.ja {
  font-family: "Zen Kaku Gothic New", sans-serif;
}

.en {
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0;
}

header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

@media (max-width: 599px) {
  header a {
    margin: 0 auto;
  }
}

.logo {
  margin: 40px 20px;
  width: min(9vw, 45px);
}

.arrow path {
  stroke: var(--foreground);
}

nav {
  display: flex;
  gap: 3.8vw;
}

.arrowNav {
  display: flex;
  align-items: center;
  gap: 1em;
}

.icon {
  width: clamp(2.375rem, 1.5rem + 2.33vw, 2.813rem);
  height: clamp(2.375rem, 1.5rem + 2.33vw, 2.813rem);
  background-color: var(--background);
  border: solid 1px var(--foreground);
  border-radius: var(--radius-small);

  display: flex;
  align-items: center;
  justify-content: center;
}

.icon path {
  stroke: var(--foreground);
  fill: none;
}

.card:hover, .trust-care-card:hover {
  box-shadow: 0px 0px 20px 2px var(--shadow);
  transition: all 0.6s;
}