:root {
  --font-size-base: 1.6rem;  /* 16px: 本文の基本サイズ */
  /* --- 小さいサイズ --- */
  --font-size-sm:   1.28rem; /* 12.8px: 註釈やキャプション (base / 1.25) */
  --font-size-xs:   1.024rem;/* 10.24px: 更に小さい文字 (sm / 1.25) */
  /* --- 大きいサイズ --- */
  --font-size-md:   2.0rem;  /* 20px: 小さめの見出し (base * 1.25) */
  --font-size-lg:   2.5rem;  /* 25px: 中くらいの見出し (md * 1.25) */
  --font-size-xl:   3.125rem;/* 31.25px: 大きな見出し (lg * 1.25) */
  --font-size-xxl:  3.906rem;/* 39.06px: 特大の見出し (xl * 1.25) */
  /* --- スペース --- */
  --space-xs:  0.4rem;  /* 4px  (base * 0.25) */
  --space-s:   0.8rem;  /* 8px  (base * 0.5) */
  --space-base:1.6rem;  /* 16px (基準フォントサイズと同じ) */
  --space-m:   2.4rem;  /* 24px (base * 1.5) */
  --space-l:   3.2rem;  /* 32px (base * 2) */
  --space-xl:  4.8rem;  /* 48px (base * 3) */
  --space-2xl: 6.4rem;  /* 64px (base * 4) */
  --line-height:1.6;    /* --- 行間 --- */
  --brand-color: #ddb473;    /* --- 色 --- */
  --sub-color: #f7931e;
  --text-color-light: #fff;
  --text-color-normal: #717777;
  --text-color-orange: #e95513;
  --background-main-color: #fefdfa;
  --background-bg-blue: #bbe5ff;
  --background-bg-heading: #ffb663;
}

/* 全要素にbox-sizing: border-box;を適用 */
*,*::before,*::after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  font-family: "Noto Sans JP", sans-serif;
  background: var(--background-main-color);
}

body, figure {
  margin: 0;
  padding: 0;
}

body {
  color: var(--text-color-normal);
  font-weight: 500;
  font-size: var(--font-size-base);
  line-height: var(--line-height);
}

/* TOPに戻る */
.pagetop {
  height: 40px;
  width: 40px;
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #fff;
  border: solid 2px var(--text-color-orange);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.pagetop__arrow {
  height: 10px;
  width: 10px;
  border-top: 3px solid var(--text-color-orange);
  border-right: 3px solid var(--text-color-orange);
  transform: translateY(20%) rotate(-45deg);
}