/* ##############################################################################

    COMMON

############################################################################## */
html {
  font-size: max(13.3333333333px, min(0.8333333333vw, 1rem));
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}
body {
  height: 100%;
  font: 15px/1.231 "Lato", "Noto Sans JP", YuGothic, "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN",
    "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 400;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  line-height: 1.8;
  letter-spacing: 0.05em;
  *font-size: small;
  *font: x-small;
  color: #111;
  -webkit-font-smoothing: antialiased;
}
@media all and (-ms-high-contrast: none) {
  body {
    font: 15px/1.8 "Lato", "Noto Sans JP", "メイリオ", Meiryo, "Lato", YuGothic, "游ゴシック", "ヒラギノ角ゴ Pro W3",
      "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
  }
}
@media only screen and (max-width: 767px) {
  body {
    letter-spacing: 0.01em;
  }
}

*,
*:after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
ul,
ol {
  list-style: none;
}
small {
  font-size: 86%;
}
a {
  color: #333;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
}
a:hover {
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

@media (min-width: 768px) {
  @-moz-document url-prefix() {
    * {
      font-feature-settings: "palt";
    }
  }
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    * {
      font-feature-settings: "palt";
    }
  }
}

@media only screen and (max-width: 767px) {
  body {
    font-size: 94%;
    -webkit-text-size-adjust: none;
  }
  img {
    max-width: 100%;
    height: auto;
  }
}

/* flex
**************************************** */
.flex {
  display: flex;
}
.flex-inline {
  display: inline-flex;
}
.flex-end {
  justify-content: flex-end;
}
.flex-center {
  justify-content: center;
}
.flex-between {
  justify-content: space-between;
}
.flex-around {
  justify-content: space-around;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-wrap_reverse {
  flex-wrap: wrap-reverse;
}
.align-center {
  align-items: center;
}


/* grid
**************************************** */
[class*=grid-] {
  display: grid;
}
.grid-col1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-col2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-col3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-col4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gap8 {
  gap: 0.5rem;
}
.gap16 {
  gap: 1rem;
}
.gap24 {
  gap: 1.5rem;
}
.gap32 {
  gap: 2rem;
}
.gap40 {
  gap: 2.5rem;
}
.gap48 {
  gap: 3rem;
}
.gap56 {
  gap: 3.5rem;
}
.gap64 {
  gap: 4rem;
}
.gap72 {
  gap: 4.5rem;
}
.gap80 {
  gap: 5rem;
}
@media screen and (max-width: 47.9375em) {
  .grid-sp-block {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-sp-block[class*=gap] {
    gap: 1.7142857143rem;
  }
  .grid-sp-col1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-sp-col2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-sp-col3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-sp-col4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .gap-sp8 {
    gap: 0.5714285714rem !important;
  }
  .gap-sp16 {
    gap: 1.1428571429rem !important;
  }
  .gap-sp24 {
    gap: 1.7142857143rem !important;
  }
  .gap-sp32 {
    gap: 2.2857142857rem !important;
  }
  .gap-sp40 {
    gap: 2.8571428571rem !important;
  }
  .gap-sp48 {
    gap: 3.4285714286rem !important;
  }
  .gap-sp56 {
    gap: 4rem !important;
  }
  .gap-sp64 {
    gap: 4.5714285714rem !important;
  }
  .gap-sp72 {
    gap: 5.1428571429rem !important;
  }
  .gap-sp80 {
    gap: 5.7142857143rem !important;
  }
}

/* margin
**************************************** */
.mgn-btm8 {
  margin-bottom: 8px;
}
.mgn-btm16 {
  margin-bottom: 16px;
}
.mgn-btm24 {
  margin-bottom: 24px;
}
.mgn-btm32 {
  margin-bottom: 32px;
}
.mgn-btm40 {
  margin-bottom: 40px;
}
.mgn-btm48 {
  margin-bottom: 48px;
}
.mgn-btm50 {
  margin-bottom: 50px;
}
.mgn-btm56 {
  margin-bottom: 56px;
}
.mgn-btm64 {
  margin-bottom: 64px;
}
.mgn-btm72 {
  margin-bottom: 72px;
}
.mgn-btm80 {
  margin-bottom: 80px;
}
@media only screen and (max-width: 767px) {
  .mgn-btm16 {
    margin-bottom: 8px;
  }
  .mgn-btm24 {
    margin-bottom: 16px;
  }
  .mgn-btm32 {
    margin-bottom: 16px;
  }
  .mgn-btm40 {
    margin-bottom: 24px;
  }
  .mgn-btm48 {
    margin-bottom: 24px;
  }
  .mgn-btm50 {
    margin-bottom: 32px;
  }
  .mgn-btm56 {
    margin-bottom: 32px;
  }
  .mgn-btm64 {
    margin-bottom: 32px;
  }
  .mgn-btm72 {
    margin-bottom: 40px;
  }
  .mgn-btm80 {
    margin-bottom: 40px;
  }
}

/* none
**************************************** */
.pc-none {
  display: none;
}
.sp-none {
  display: block;
}
@media only screen and (max-width: 767px) {
  .sp-none {
    display: none;
  }
  .pc-none {
    display: block;
  }
}