:root {
  /* ============ Theme Typography */

  /* -----（仮） */
  --body-font-family-base: 'Noto Sans JP', sans-serif;
  --body-font-size-base: 16px;
  --body-font-size-lg: 48px;
  --body-font-size-md: 24px;
  --body-font-size-sm: 12px;
  --body-font-weight-base: 500;
  --body-font-weight-bold: 700;
  --body-line-height-base: 2.4;
  --body-letter-spacing-base: 0.05em;

  /* -----（仮） */
  --heading-font-weight-base: 900;
  --heading-font-style: normal;
  --heading-letter-spacing: 0;
  --heading-line-height-base: 1.7;
  --heading-font-size-h1: 48px;
  --heading-font-size-h2: 48px;
  --heading-font-size-h3: 24px;
  --heading-font-size-h4: 16px;

  /* ============ Theme Colors */

  /* ----- 基本色（仮） */
  --color-white: #fff;
  --color-black: #2c2c2c;

  /* ----- 背景やUI要素（仮） */
  --color-surface-0: #fff;
  --color-surface-100: #edeceb;
  --color-surface-200: #e0e0e0;
  --color-surface-300: #828282;
  --color-surface-400: #b0b0b0;
  --color-surface-500: #909090;
  --color-surface-600: #707070;
  --color-surface-700: #505050;
  --color-surface-800: #303030;
  --color-surface-900: #434343;

  /* -----（仮） */
  --color-primary-base: #009b5d;

  /* ----- アクセントカラー（仮） */
  --color-accent-base: var(--color-black);
  --color-accent-link-base: var(--color-surface-900);
  --color-accent-focus: var(--color-black);
  --color-accent-error: var(--color-black);

  /* ----- テキストカラー（仮） */
  --text-color-base: #2c2c2c;
  --text-color-secondary: var(--color-surface-600);
  --text-color-strong: var(--color-primary-base);
  --text-color-disabled: var(--color-surface-400);

  /* ----- 背景色（仮） */
  --bg-color-base: var(--color-surface-0);
  --bg-color-disabled: var(--color-surface-100);
  --bg-color-link: #dee6ea;

  /* ----- 境界線（仮） */
  --border-color-base: var(--color-surface-300);

  /* ============ Theme Variables */

  /* -----（仮） */
  --space-base: 8px;

  /* -----（仮） */
  --radius-none: 0;
  --radius-base: 8px;
  --radius-full: 9999px;

  /* -----（仮） */
  --box-shadow-sm: 0 0 4px rgb(0 0 0 / 5%);
  --box-shadow-md: 0 0 8px rgb(0 0 0 / 5%);
  --box-shadow-lg: 0 0 16px rgb(0 0 0 / 5%);
}
@media all and (max-width: 1079.98px) {
:root {
    /* -----（仮） */
    --body-font-size-base: 16px;
    --body-font-size-lg: 48px;
    --body-font-size-md: 24px;
    --body-font-size-sm: 12px;
    --body-line-height-base: 1.8;

    /* -----（仮） */
    --heading-font-size-h1: 48px;
    --heading-font-size-h2: 32px;
    --heading-font-size-h3: 24px;
    --heading-font-size-h4: 16px;
}
  }
/* ============ reset styles */
*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  text-align: left;
}
address {
  font-style: normal;
}
i {
  font-style: normal;
}
b,
strong {
  font-weight: bolder;
}
small {
  font-size: 80%;
}
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 1em;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
a {
  color: inherit;
  text-decoration: none;
}
ul,
ol {
  list-style: none;
}
img,
picture,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
}
img,
picture,
svg,
video {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
fieldset {
  border: 0;
}
button,
select {
  appearance: none;
  cursor: pointer;
  outline: none;
  background-color: transparent;
  border: none;
}
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}
button,
label,
select,
summary,
[role='button'],
[role='option'] {
  letter-spacing: inherit;
  cursor: pointer;
}
textarea {
  resize: vertical;
}
[type='search'] {
  appearance: textfield;
  outline-offset: -2px;
}
::-webkit-search-decoration {
  appearance: none;
}
::-webkit-file-upload-button {
  font: inherit;
  appearance: auto;
}
details > summary {
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
label:has(> input:disabled),
label:has(+ input:disabled) {
  cursor: not-allowed;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
  border: none;
}
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  width: 100%;
  padding-top: 100px;
  font-family: var(--body-font-family-base);
  font-size: var(--body-font-size-base);
  font-weight: var(--body-font-weight-base);
  line-height: var(--body-line-height-base);
  color: var(--text-color-base);
  letter-spacing: var(--body-letter-spacing-base);
  background-color: var(--bg-color-base);
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media all and (max-width: 1079.98px) {
body {
    padding-top: 74px;
}
  }
:disabled {
  cursor: not-allowed;
}
::placeholder {
  color: var(--text-color-disabled);
}
hr {
  height: 0;
  margin: 0;
  border: none;
  border-top: 1px solid var(--border-color-base);
}
/* ----- */
@keyframes css-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
.css-animation-fade-in {
  opacity: 0;
  animation-name: css-fade-in;
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); /* easeInOutQuad */
  animation-fill-mode: both;
}
/* ----- text styles */
.base-text-caption,
.base-text-note {
  font-size: var(--body-font-size-sm);
}
/* link */
.base-link-text {
  display: flex;
  gap: 0 10px;
  font-weight: 600;
  line-height: 1.8;
  color: var(--color-accent-link-base);
  text-decoration: none;
  text-underline-offset: 0.25em;
}
/* hover */
@media (any-hover: hover) {
  .base-link-text:hover {
    color: var(--color-surface-900);
  }
}
/* ----- list styles */
/* 番号付きリスト */
.base-ordered-list {
  padding-left: 1.5em;
  list-style-type: decimal;
}
/* 順序なしリスト */
.base-unordered-list {
  padding-left: 1.5em;
  list-style-type: disc;
}