/* ================================
   Reset & Base Styles
   ================================ */

/* ボックスサイズをborder-boxに統一 */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 余白・スクロールなどの初期化 */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

/* ベースフォント・背景色など */
html {
  font-size: 62.5%; /* 1rem = 10px として扱いやすく */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
               "Segoe UI", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN",
               "Meiryo", sans-serif;
  font-size: 1.6rem;
  line-height: 1.7;
  color: #333;
  background-color: #fff;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* 画像・メディアのリセット */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 見出しのリセット＆ベース */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
  line-height: 1.4;
}

/* 段落・テキスト要素 */
p {
  margin: 0;
}

/* リスト */
ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* アンカー */
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* ボタン・フォーム要素のリセット */
button,
input,
select,
textarea {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

button {
  cursor: pointer;
}

/* テーブル */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
th, td {
  padding: 0;
}

/* 引用 */
blockquote {
  margin: 0;
}

/* フォーカスリング（アクセシビリティ） */
:focus-visible {
  outline: 2px solid #f5a4c8; /* LaLaっぽいピンク系に後で調整してOK */
  outline-offset: 2px;
}

/* レイアウト用ユーティリティ（ベース） */
.wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.section {
  padding: 48px 0;
}

@media (max-width: 768px) {
  .section {
    padding: 32px 0;
  }
}