html {
  font-size: 62.5%;
}
body {
  background: #fff;
  color: #333;
  font: 1.5em Arial,'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-weight: 300;
  line-height: 1.5;
  margin: 0;
}
.wrap {
  margin: auto;
  width: 100%;
}
.clearfix:after {
  content: "";
  clear: both;
  display: block
}
img {
  max-width: 100%;
  vertical-align: bottom;
}

/* list */
ul {
  list-style: none;
  padding: 0;
}

/* link */
a:link,a:visited,a:hover,a:active {
  color: #333;
  text-decoration: none;
}
a img:hover {
  filter: alpha(opacity=70);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

/* pagetop */
.pagetop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 60px;
  height: 60px;
  background: bottom / cover no-repeat url(../img/pagetop.svg);
  display: block;
  opacity: 0.8;
}
.pagetop a {
  display: block;
  height: 60px;
  width: 60px;
}
.pagetop:hover {
  filter: alpha(opacity=70);
  -webkit-transition: 0.3s;
  opacity: 0.7;
  transition: 0.3s;
}

/* font */
.serif {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

/* color */
.c-f {color: #fff}
.c-0 {color: #000}

/* font-size */
.fs-4  {font-size: 0.4rem}
.fs-5  {font-size: 0.5rem}
.fs-6  {font-size: 0.6rem}
.fs-7  {font-size: 0.7rem}
.fs-8  {font-size: 0.8rem}
.fs-9  {font-size: 0.9rem}
.fs-10 {font-size: 1.0rem}
.fs-11 {font-size: 1.1rem}
.fs-12 {font-size: 1.2rem}
.fs-14 {font-size: 1.4rem}
.fs-16 {font-size: 1.6rem}
.fs-18 {font-size: 1.8rem}
.fs-20 {font-size: 2.0rem}
.fs-22 {font-size: 2.2rem}
.fs-24 {font-size: 2.4rem}
.fs-26 {font-size: 2.6rem}
.fs-28 {font-size: 2.8rem}
.fs-30 {font-size: 3.0rem}
.fs-32 {font-size: 3.2rem}
.fs-34 {font-size: 3.4rem}
.fs-36 {font-size: 3.6rem}
.fs-38 {font-size: 3.8rem}
.fs-40 {font-size: 4.0rem}
.fs-42 {font-size: 4.2rem}
.fs-44 {font-size: 4.4rem}
.fs-46 {font-size: 4.6rem}
.fs-48 {font-size: 4.8rem}
.fs-50 {font-size: 5.0rem}
.fs-52 {font-size: 5.2rem}
.fs-54 {font-size: 5.4rem}
.fs-56 {font-size: 5.6rem}
.fs-58 {font-size: 5.8rem}
.fs-60 {font-size: 6.0rem}
.fs-62 {font-size: 6.2rem}
.fs-64 {font-size: 6.4rem}
.fs-66 {font-size: 6.6rem}
.fs-68 {font-size: 6.8rem}
.fs-70 {font-size: 7.0rem}
.fs-72 {font-size: 7.2rem}

/* font-weight */
.fw-1 {font-weight: 100}
.fw-2 {font-weight: 200}
.fw-3 {font-weight: 300}
.fw-4 {font-weight: 400}
.fw-5 {font-weight: 500}
.fw-6 {font-weight: 600}
.fw-7 {font-weight: 700}
.fw-8 {font-weight: 800}
.fw-9 {font-weight: 900}

/* margin */
.mt-2  {margin-top:   2px}
.mt-4  {margin-top:   4px}
.mt-8  {margin-top:   8px}
.mt-12 {margin-top:  12px}
.mt-16 {margin-top:  16px}
.mt-32 {margin-top:  32px}
.mt-64 {margin-top:  64px}
.mt-64 {margin-top:  96px}
.mt-128{margin-top: 128px}
.mb-2  {margin-bottom:   2px}
.mb-4  {margin-bottom:   4px}
.mb-8  {margin-bottom:   8px}
.mb-12 {margin-bottom:  12px}
.mb-16 {margin-bottom:  16px}
.mb-32 {margin-bottom:  32px}
.mb-64 {margin-bottom:  64px}
.mb-96 {margin-bottom:  96px}
.mb-128{margin-bottom: 128px}

/* padding */
.pt-2  {padding-top:   2px}
.pt-4  {padding-top:   4px}
.pt-8  {padding-top:   8px}
.pt-12 {padding-top:  12px}
.pt-16 {padding-top:  16px}
.pt-32 {padding-top:  32px}
.pt-64 {padding-top:  64px}
.pt-96 {padding-top:  96px}
.pt-128{padding-top: 128px}
.pb-2  {padding-bottom:   2px}
.pb-4  {padding-bottom:   4px}
.pb-8  {padding-bottom:   8px}
.pb-12 {padding-bottom:  12px}
.pb-16 {padding-bottom:  16px}
.pb-32 {padding-bottom:  32px}
.pb-64 {padding-bottom:  64px}
.pb-96 {padding-bottom:  96px}
.pb-128{padding-bottom: 128px}

/* text-align */
.t-c {text-align: center}
.t-l {text-align:   left}
.t-r {text-align:  right}

/* tips */
.underline {
  background: linear-gradient(transparent 70%, #ff0 0%);
}