@charset "utf-8";
/* ##############################################################################

    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-btm56 {
  margin-bottom: 56px;
}
.mgn-btm64 {
  margin-bottom: 64px;
}
.mgn-btm72 {
  margin-bottom: 72px;
}
.mgn-btm80 {
  margin-bottom: 80px;
}
.mgn-btm100 {
  margin-bottom: 100px;
}
@media (max-width: 767px) {
  .mgn-btm8 {
    margin-bottom: 4px;
  }
  .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-btm56 {
    margin-bottom: 32px;
  }
  .mgn-btm64 {
    margin-bottom: 32px;
  }
  .mgn-btm72 {
    margin-bottom: 40px;
  }
  .mgn-btm80 {
    margin-bottom: 40px;
  }
  .mgn-btm100 {
    margin-bottom: 50px;
  }
}

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

    fnt

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

.fnt-10 {
  font-size: 10px;
}
.fnt-12 {
  font-size: 12px;
}
.fnt-14 {
  font-size: 14px;
}
.fnt-16 {
  font-size: 16px;
}
.fnt-18 {
  font-size: 18px;
}
.fnt-20 {
  font-size: 20px;
}
.fnt-22 {
  font-size: 22px;
}
.fnt-24 {
  font-size: 24px;
}
.fnt-26 {
  font-size: 26px;
}
.fnt-28 {
  font-size: 28px;
}
.fnt-30 {
  font-size: 30px;
}
.fnt-32 {
  font-size: 32px;
}
.fnt-34 {
  font-size: 34px;
}
.fnt-36 {
  font-size: 36px;
}
.fnt-38 {
  font-size: 38px;
}
.fnt-40 {
  font-size: 40px;
}
@media (max-width: 767px) {
  .fnt-sp10 {
    font-size: 10px;
  }
  .fnt-sp12 {
    font-size: 12px;
  }
  .fnt-sp14 {
    font-size: 14px;
  }
  .fnt-sp16 {
    font-size: 16px;
  }
  .fnt-sp18 {
    font-size: 18px;
  }
  .fnt-sp20 {
    font-size: 20px;
  }
  .fnt-sp22 {
    font-size: 22px;
  }
  .fnt-sp24 {
    font-size: 24px;
  }
  .fnt-sp26 {
    font-size: 26px;
  }
  .fnt-sp28 {
    font-size: 28px;
  }
  .fnt-sp30 {
    font-size: 30px;
  }
  .fnt-sp32 {
    font-size: 32px;
  }
  .fnt-sp34 {
    font-size: 34px;
  }
  .fnt-sp36 {
    font-size: 36px;
  }
  .fnt-sp38 {
    font-size: 38px;
  }
  .fnt-sp40 {
    font-size: 40px;
  }
}

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

    text

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

.txt-bld {
  font-weight: bold;
}
.txt-ctr {
  text-align: center;
}
.txt-rgt {
  text-align: right;
}

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

    display

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

.pc-none {
  display: none;
}
.sp-none {
  display: block;
}
@media (max-width: 767px) {
  .sp-none {
    display: none;
  }
  .pc-none {
    display: block;
  }
}

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

    flex

############################################################################## */
.flx {
  display: flex;
}
.fl-ctr {
  justify-content: center;
}
.fl-bw {
  justify-content: space-between;
}
.fl-ali {
  align-items: center;
}
.flt-rgt {
  float: right;
}
.flt-lft {
  float: left;
}

/* --- ブロック要素 --- */
.flex {
  display: flex;
}

/* --- インライン要素 --- */
.flex-inline {
  display: inline-flex;
}

/* --- 逆向き --- */
.flex-reverse {
  flex-direction: row-reverse;
}

/* --- 縦並び --- */
.flex-column {
  flex-direction: column;
}

/* --- 水平方向揃え --- */
.flex-j-start {
  justify-content: flex-start;
}

.flex-j-end {
  justify-content: flex-end;
}

.flex-j-ctr {
  justify-content: center;
}

.flex-j-between {
  justify-content: space-between;
}

.flex-j-around {
  justify-content: space-around;
}

/* --- 垂直方向揃え --- */
.flex-a-start {
  align-items: flex-start;
}

.flex-a-end {
  align-items: flex-end;
}

.flex-a-ctr {
  align-items: center;
}

.flex-a-baseline {
  align-items: baseline;
}

.flex-a-stretch {
  align-items: stretch;
}

/* --- 子要素の折り返し設定 --- */
.flex-c-nowrap {
  flex-wrap: nowrap;
}

.flex-c-wrap {
  flex-wrap: wrap;
}

/* --- 子要素の複数行設定 --- */
.flex-c-reverse {
  flex-wrap: wrap-reverse;
}

.flex-c-start {
  align-content: flex-start;
}

.flex-c-start {
  align-content: flex-start;
}

.flex-c-end {
  align-content: flex-end;
}

.flex-c-ctr {
  align-content: center;
}

.flex-c-baseline {
  align-content: baseline;
}

.flex-c-stretch {
  align-content: stretch;
}

@media screen and (max-width: 47.9375em) {
  .flx {
    display: block;
  }
  /* --- 縦並び - sp --- */
  .flex-sp-block {
    flex-direction: column;
  }
}

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

    flex

############################################################################## */[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
}
.gap48 {
  gap: 3rem
}
.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;
  }
}