/*色系の変数定義*/
:root {
    --color-key-white:   #e4fff8;
    --color-key:         #59C3B5;
    --color-key-black:   #001a33;
    --grad-btn:linear-gradient(90deg, rgba(89, 195, 181, 0.6) 0%, rgba(70, 130, 234, 0.6) 100%),linear-gradient(90deg, #59c3b5 0%, #4682ea 100%);
}

/*余白の変数定義（スマホも）*/
:root {
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 40px;
  --s6: 48px;
  --s7: 56px;
  --s8: 64px;
  --s9: 72px;
  --s10: 80px;
  --s11: 88px;
  --s12: 96px;
  --s13: 104px;
  --s14: 112px;
  --s15: 120px;
  --s16: 128px;
  --s17: 136px;
  --s18: 144px;
  --s19: 152px;
  --s20: 160px
}
@media(max-width: 767px) {
  :root {
    --s1: 1.6vw;
    --s2: 3.2vw;
    --s3: 4.8vw;
    --s4: 6.4vw;
    --s5: 8vw;
    --s6: 9.6vw;
    --s7: 11.2vw;
    --s8: 12.8vw;
    --s9: 14.4vw;
    --s10: 16vw;
    --s11: 17.6vw;
    --s12: 19.2vw;
    --s13: 20.8vw;
    --s14: 22.4vw;
    --s15: 24vw;
    --s16: 25.6vw;
    --s17: 27.2vw;
    --s18: 28.8vw;
    --s19: 30.4vw;
    --s20: 32vw
  }
}

/*全体的に文字系*/
body {
  font-family: "MFW-PGothicMB101Pr6N-Regular", sans-serif;
  font-style: normal;
  width: 100%;
  height: 100%;
  color: var(--color-key-black);
}

/*ボタン*/
.button__container .button__wrapper a {
  background: var(--grad-btn);
  font-family: "MFW-PGothicMB101Pr6N-Regular", sans-serif;
  font-style:normal;
  font-weight: 700;
  position: relative;
}

.button__container .button__wrapper a:hover {
  transform: scale(1.1)
}

/*セクションを角丸にするやつ*/
.site-body__container {
  padding: var(--s2);
  min-width: 955px
}
@media(max-width: 559px) {
  .site-body__container {
    padding: var(--s6) var(--s2) var(--s2)
  }
}
@media(max-width: 767px) {
  .site-body__container {
    min-width: auto
  }
}

.contents {
  background-color: var(--color-key-white);
  padding: var(--s8) 0;
  margin: var(--s3) 0;
  border-radius: var(--s2)
}
@media(max-width: 767px) {
  .contents {
    padding: var(--s10) var(--s2)
  }
}

/*改行のデバイスごと制御*/
@media(max-width: 767px) {
  body .--monitor {
    display: none
  }
}
@media(min-width: 768px) {
  body .--mobile {
    display: none
  }
}