@charset "UTF-8";

/* アイコンフォントのみインポート */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css'); 

:root {
  /* 英数字: Outfit、日本語: Noto Sans JP */
  --main-font-family: "Outfit", "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Segoe UI", "Meiryo", sans-serif;

  /* カラー変数 */
  --color-base: #fff;
  --color-main: #E85A70;
  --color-accent: #70a5ba;
  --color-text: #333;
  --color-marker: #ffeeaa;
  --color-light: #fff;
}

/* 全体に適用 */
body {
  font-family: var(--main-font-family);
  letter-spacing: 0.15em;
  line-height: 1.8;
}

/* フォントサイズレスポンシブ */
@media screen and (min-width: 1367px) { html { font-size: 62.5%; } }
@media screen and (max-width: 1366px) { html { font-size: 50%; } }
@media screen and (max-width: 800px) { html { font-size: 90%; } }
@media screen and (max-width: 500px) { html { font-size: 62.5%; } }

@media screen and (min-width: 769px) {
  :root { --margin-base: 4em; --border-radius: 0.3em; }
  body { font-size: 1.6rem; }
}

@media screen and (max-width: 768px) {
  :root { --margin-base: 2em; --border-radius: 0.2em; }
  body { font-size: 1.4rem; line-height: 1.7; }
}