/* -----------------------------------------
  reset（編集しない）
----------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul[role="list"],
ol[role="list"],
li{
  list-style: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "メイリオ", Meiryo, "Meiryo UI", Avenir, "Open Sans", Helvetica, "Helvetica Neue", Arial, Verdana, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  text-rendering: optimizeSpeed;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

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

input,
button,
textarea,
select {
  font: inherit;
}

button{
  border: none; /* ボーダーをなくす */
  outline: none; /* フォーカス時の枠線をなくす */

}
@media(prefers-reduced-motion:reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}


/* -----------------------------------------
base（font-familyなどの変更。fontは1.6rem＝16px）
----------------------------------------- */
/* rem用 */
html {
  font-size: 62.5%;
}


#wrapper {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  overflow: hidden;
}

/* 画像の隙間対策 */
#wrapper img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}