/* ========================================
 * グローバル設定（CSS変数、基本フォント・色など）
 * ======================================== */
 :root {
  /* カラーパレット */
  --color-primary: #EE2B45;
  --color-primary-light-1: #F0455B;
  --color-primary-light-2: #F36072;
  --color-primary-light-3: #F67A89;
  --color-primary-light-4: #F9949F;
  --color-primary-light-5: #FBCFD7;

  --color-gray-dark: #333333;
  --color-gray-medium: #666666;
  --color-gray-light: #AAAAAA;
  --color-gray-lighter: #CCCCCC;
  --color-background-light: #F4F4F4;
  --color-background-dark: #222222;
  --color-white: #FFFFFF;

  /* フォント設定 */
/*   --font-family-base: "Noto Sans Japanese", "Noto Sans JP", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; */
	--font-family-sans: "Yu Gothic Medium", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", Arial, sans-serif;
  --font-family-serif: "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", serif;
  --font-size-base: 1rem; /* 1rem = ブラウザのデフォルトフォントサイズ (通常16px) */
  --line-height-base: 1.7;

  /* スペーシング */
  --space-2xs: 0.25rem;  /* 4px */
  --space-xs:  0.5rem;   /* 8px */
  --space-sm:  1rem;     /* 16px */
  --space-md:  1.5rem;   /* 24px */
  --space-lg:  2rem;     /* 32px */
  --space-xl:  3rem;     /* 48px */
  --space-2xl: 4rem;     /* 64px */
  --space-3xl: 6rem;     /* 96px */
  --space-4xl: 8rem;     /* 128px */
  --space-5xl: 10rem;    /* 160px */
  --space-6xl: 12rem;    /* 192px */
  --space-200: 12.5rem;  /* 200px */

}
html, body {
overflow-x: hidden;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-gray-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	font-feature-settings: "palt" 1, "liga", "clig", "kern";
}

/* main {
    font-feature-settings: "palt" 1;
}
 */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover {
  color: var(--color-primary-light-1);
}

.sp-only {
display: none;
}

.pc-only {
  display: block;
}

@media screen and (max-width: 1024px) {
  .tb-only{
    display: block;
  }
}

@media screen and (max-width: 767.9px) {
  .sp-only {
    display: block;
  }


  .pc-only {
    display: none!important;
  }

}