/*
  Modern CSS Reset 
  - based on the original provided CSS with enhancements for readability and modern practices.
*/

/* 1. `box-sizing`をグローバルに設定し、直感的なサイジングを実現 */
*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* 2. ルート要素の基本設定 */
html {
  /* フォントサイズの自動調整を無効化し、意図しない拡大を防ぐ */
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* ページ内リンクのスクロールをスムーズにする (キーボード操作の妨げにならないようfocus-withinを使用) */
html:focus-within {
  scroll-behavior: smooth;
}

/* 3. bodyの基本スタイルを設定 */
body {
  min-height: 100vh;
  line-height: 1.5; /* 基本の行間を設定し、可読性を向上 */
  font-family: 'Noto Sans JP', sans-serif; /* デフォルトのフォントファミリーを指定しておくと良いでしょう */
}
/* 特定のIDを持つbodyには高さを自動調整（元のコードを維持） */
body#colorboxWrap {
  min-height: auto;
}

/* 4. デフォルトマージンを持つ要素をリセット */
h1, h2, h3, h4, h5, h6,
p, figure, blockquote,
dl, dd {
  margin: 0;
}

/* 5. リストのスタイルをリセット (role属性を持つリストにも対応) */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* 6. 見出しのテキスト折り返しを改善 */
h1, h2, h3, h4 {
  text-wrap: wrap; /* テキストの改行をより自然な位置で行う */
}

/* 7. メディア要素のレスポンシブ対応 */
img,
picture {
  max-width: 100%;
  display: block;
}

/* 8. フォーム要素のスタイルを親から継承し、デフォルトスタイルをリセット */
input, button,
textarea, select {
  font: inherit;
}

input {
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

/* 9. textareaの最小サイズを確保 */
textarea:not([rows]) {
  min-height: 10em;
}

/* 10. テーブルのスタイルをリセット */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 11. classを持たないリンクのスタイルを調整 */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* 12. ページ内リンクのターゲット位置を調整 */
:target {
  scroll-margin-block: 5ex;
}


/* ここまでリセットCSS */


/* ここからページ全体設定 */

body {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--main-black);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body {
  font-size: 16px; /* PC基準 */
}

@media (max-width: 768px) {
  body {
    font-size: 18px; /* スマホで読みやすく */
  }
}

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

a:hover{opacity: 0.7;}

img {
    max-width: 100%;
    display: block;
}