:root {
  --color-bg:         #F5F2F0;
  --color-bg-green:   #9BB292;
  --color-text:       #170A05;
  --color-text-brown: #4F3502;
  --color-text-pale:  #514744;
  --color-accent:     #BF7C62;
  --color-line:       #AD9668;
  --color-leaf:       #718C69;
  --color-white:      #FFFFFF;

  --font-en:        "Lora", serif;
  --font-ja-serif:  "Noto Serif JP", serif;
  --font-ja-sans:   "Noto Sans JP", sans-serif;

  --header-height: 10rem;
}

/* 全要素のbox-sizingをborder-boxに変更 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  :root {
    --header-height: 7.5rem;
  }
}

/* レスポンシブ用クラス */
@media screen and (min-width: 768px) {
  .sp {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
}

/* デバイスの文字サイズ調整を無効化 */
html {
  font-size: 62.5%;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
}

/* デフォルトの余白を削除 */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
  margin: 0;
}

ul {
  margin-block-end: 0;
  margin: 0;
  padding: 0;
}

/* アクセシビリティを損なわずにリストスタイルを削除 (role="list"がある場合) */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* bodyのデフォルト設定（フォント、行高、最小の高さ） */
body {
  min-height: 100vh;
  line-height: 1.5;
  font-family: var(--font-ja-sans);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: 0;
  transition: opacity 1s ease;
}

body.is-loaded {
  opacity: 1;
}

a {
  text-decoration-skip-ink: auto;
  color: currentColor;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.7;
}

img,
picture,
video,
canvas,
svg {
  width: 100%;
  height: auto;
  display: block;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

:target {
  scroll-margin-top: calc(var(--header-height));
}

b {
  font-weight: inherit;
}

address {
  font-style: normal;
}