:root {
  /* Colors */
  --color-bg: #ffffff;
  --color-fv-bg: #fffcb0;
  --color-primary: #04c68c;
  --color-primary-deep: #00a977;
  --color-ticker-bg: #57d9b2;
  --color-text: #3b3b3b;
  --color-text-on-primary: #ffffff;
  --color-header-bg: #ffffff;
  --color-header-border: #04c68c;
  --header-radius: 46px;
  --header-nav-gap: 38px;
  --header-nav-size: 19px;

  /* Typography */
  --font-family: "M PLUS 1p", sans-serif;
  --font-family-display: "Dela Gothic One", sans-serif;
  --font-weight-extrabold: 800;

  /* Layout */
  --page-max-width: 1280px;
  --content-width: 1000px;
  --section-inner-width: 880px;
  --history-width: 1000px;
  /* aspect-ratio 用は単位なし */
  --fv-ratio-w: 1280;
  --fv-ratio-h: 860;
  --fv-photo-radius: 45px;
  --header-height: 70px;
  --header-offset: 20px;
  --ticker-height: 84px;
  --entry-fab-size: 180px;
  --color-thoughts-text: #00a977;
  --color-thoughts-highlight: #fbf799;
  --color-panel-border: #57d9b2;
  --thoughts-ratio-w: 1280;
  --thoughts-ratio-h: 857;
  --breakpoint-sp-max: 767px;
  --breakpoint-pc-min: 768px;

  /* Motion */
  --ticker-duration: 28s;
  --header-transition: 0.35s ease;
}