/* ==========================================================================
   base.css — リセット、CSS 変数、タイポグラフィ
   ========================================================================== */

:root {
  --yellow: #F8CA00;
  --yellow-light: #FFE066;
  --yellow-soft: #FFF5CC;
  --pink: #F53C65;
  --pink-light: #FF7B96;
  --pink-soft: #FFE5EC;
  --black: #1a1a1a;
  --gray-900: #2a2a2a;
  --gray-700: #4a4a4a;
  --gray-500: #888;
  --gray-300: #d4d4d4;
  --gray-150: #e4e4e4;
  --gray-100: #f4f4f4;
  --gray-50: #fafafa;
  --white: #ffffff;

  --container-max: 1280px;
  --section-py: 96px;
  --radius-pill: 999px;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* スクロールバー幅を常時確保（モダンブラウザ）。
     ローダー表示/非表示でスクロールバーが消え→出ることによる
     ビューポート幅の変動（中央配置要素の横ズレ）を防ぐ */
  scrollbar-gutter: stable;
}
/* fallback: scrollbar-gutter 非対応ブラウザ向け */
@supports not (scrollbar-gutter: stable) {
  html {
    overflow-y: scroll;
  }
}

body {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  color: var(--black);
  background: var(--white);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: 0;
}

ul,
ol {
  list-style: none;
}

.roboto {
  font-family: 'Roboto', sans-serif;
}

/* スクリーンリーダー用 */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
}

section {
  padding: var(--section-py) 40px;
}