:root {

  /* initial Settings
  ======================================== */

  --init-color: var(--color-gray-3);
  --init-font: "Poppins", "Noto Sans JP", sans-serif;
  --init-weight: 500;
  --init-line-height: var(--line-height-lg);
  --init-letter-spacing: var(--letter-spacing-min);

  /* color
  ======================================== */

  /* text */
  --color-text-init: var(--init-color);
  --color-text-inverse: var(--color-white);
  --color-text-disabled: var(--color-gray-1);
  --color-text-primary: var(--color-green-3);
  --color-text-primary-dark: var(--color-green-4);
  --color-text-secondary: var(--color-blue-1);
  --color-text-attention: var(--color-red-1);
  --color-text-support: var(--color-gray-2);

  /* background */
  --color-bg-default: var(--color-white);
  --color-bg-blank: var(--color-gray-1);
  --color-bg-disabled: var(--color-gray-2);
  --color-bg-initbase: var(--color-text-init);
  --color-bg-primary: var(--color-green-3);
  --color-bg-primary-dark: var(--color-green-4);
  --color-bg-primary-light: var(--color-green-1);
  --color-bg-primary-muted: var(--color-green-2);
  --color-bg-secondary: var(--color-blue-1);
  --color-bg-required: var(--color-red-1);
  --color-bg-optional: var(--color-blue-1);

  /* border */
  --color-border-default: var(--color-gray-2);
  --color-border-inverse: var(--color-white);
  --color-border-primary: var(--color-green-3);
  --color-border-primary-dark: var(--color-green-4);

  /* action */
  --color-action-primary: var(--color-orange-1);

  /* text
  ======================================== */

  /* size */
  --heading-size-base: var(--size-2xl);
  --text-size-base: var(--size-md);
  --caption-size-base: var(--size-xs);

  /* color */
  --heading-color-base: var(--color-text-primary);
  --body-color-base: var(--color-text-init);
  --caption-color-base: var(--color-text-init);

  /* heading */
  --heading-weight: 700;
  --heading-line-height: var(--line-height-sm);

  /* caption */
  --note-weight: 500;
  --note-line-height: var(--line-height-md);

  /* button
  ======================================== */

  /* fixed width */
  --button-fixed-width: var(--width-min);

  /* label */
  --button-label-size: var(--size-xs);
  --button-label-weight: 500;
  --button-label-line-height: var(--line-height-min);

  /* action */
  --button-action-label: var(--color-text-inverse);
  --button-action-bg: var(--color-action-primary);

  /* submit */
  --button-submit-label: var(--color-text-inverse);
  --button-submit-bg: var(--color-action-primary);

  /* default */
  --button-label: var(--color-text-inverse);
  --button-bg: var(--color-bg-primary);

  /* hover */
  --button-hover-opacity: var(--opacity-md);

  /* disabled */
  --button-disabled-label: var(--color-text-disabled);
  --button-disabled-bg: var(--color-bg-disabled);

  /* card
  ======================================== */
  --card-bg: var(--color-bg-default);
  --card-radius: var(--radius-md);
  --card-shadow: var(--shadow-1);

  /* table
  ======================================== */
  --table-bg: var(--color-bg-default);
  --table-border-color: transparent;
  --table-header-bg: var(--color-bg-primary);
  --table-header-text: var(--color-text-inverse);
  --table-body-text: var(--color-text-init);
  --table-text-size: var(--size-sm);
  --table-radius: var(--radius-xs);
  --table-header-cell-padding-block: var(--space-xs);
  --table-header-cell-padding-inline: var(--space-xs);
  --table-data-cell-padding-block: var(--space-2xs);
  --table-data-cell-padding-inline: var(--space-2xs);
  --table-gap-border: 1px;
  --table-row-separator-color: var(--color-border-default);

  /* form
  ======================================== */
  --input-field-max-width: 100%;
  --input-field-padding-block: var(--space-2xs);
  --input-field-padding-inline: var(--space-xs);
  --input-text-size: var(--size-xs);
  --input-line-height: var(--line-height-min);
  --input-bg: var(--color-bg-default);
  --input-border-color: transparent;
  --input-radius: var(--radius-xs);
  --placeholder-color: var(--color-text-support);

  /* layout
  ======================================== */

  /* page */
  --layput-page-max-width: var(--width-max);
  --layout-page-padding-block: 0 var(--space-4xl);

  /* section */
  --layout-section-padding-block: var(--space-3xl);
  --layout-section-bg: transparent;

  /* container */
  --layout-container-max-width: var(--width-lg);

  /* stack */
  --layout-stack-gap: var(--space-lg);

  /* cluster */
  --layout-cluster-gap: var(--space-lg);

  /* grid */
  --grid-min-width: var(--width-min);
  --layout-grid-gap: var(--space-md);
}

@media (max-width: 1024px) {
  :root {

    /* layout
    ======================================== */
    --layout-page-padding-block: 0 var(--space-2xl);


  }
}