@charset "utf-8";

.u-object-position-top {
  object-position: top;
}
/*-------------------------------

# マージン

-------------------------------*/
.u-flex-col {
  flex-direction: column !important;
}
.u-mt-none {
  margin-top: 0 !important;
}
.u-mt-15 {
  margin-top: 15px;
}
.u-mt-50 {
  margin-top: 50px !important;
}
.u-mt-110 {
  margin-top: 110px;
}

@media (max-width: 768px) {
  .u-mt-110 {
    margin-top: 30px;
  }
}
.u-mb-15 {
  margin-bottom: 15px;
}
.u-mb-50 {
  margin-bottom: 50px !important;
}
.u-mb-110 {
  margin-bottom: 110px;
}

@media (max-width: 768px) {
  .u-mb-110 {
    margin-bottom: 65px;
  }
  .u-mb-50 {
    margin-bottom: 20px !important;
  }
}
.u-pt-15 {
  padding-top: 15px;
}
.u-pt-50 {
  padding-top: 50px;
}
.u-pt-110 {
  padding-top: 110px;
}

@media (max-width: 768px) {
  .u-pt-110 {
    padding-top: 30px;
  }
}
.u-pb-15 {
  padding-bottom: 15px;
}
.u-pb-50 {
  padding-bottom: 50px;
}
.u-pb-110 {
  padding-bottom: 110px;
}

@media (max-width: 768px) {
  .u-pb-110 {
    padding-bottom: 65px;
  }
}

/*-------------------------------

# 色

-------------------------------*/
.u-color-red {
  color: var(--red);
}
.u-color-white {
  color: #fff;
}
.u-bg-white {
  background: #fff;
}
.u-bg-lightgray {
  background: var(--light-gray);
}
.u-bd-white {
  border-color: #fff;
}
.u-dp-inline-block {
  display: inline-block;
}
.u-va-middle {
  vertical-align: middle;
}
.u-min-width-1000 {
  min-width: 1000px;
}
/*-------------------------------

# テキスト

-------------------------------*/
.u-fw-bold {
  font-weight: bold;
}
.u-ta-center {
  text-align: center;
}
.u-ta-left {
  text-align: left;
}
.u-lh-2 {
  line-height: 2;
}
.u-lh-16 {
  line-height: 1.6;
}
.u-fsz-30 {
  font-size: 3rem;
}
.u-fsz-24 {
  font-size: 2.4rem;
}
.u-fsz-20 {
  font-size: 2rem;
}
.u-fsz-18 {
  font-size: 1.8rem;
}
.u-fsz-17 {
  font-size: 1.7rem;
}
.u-fsz-16 {
  font-size: 1.6rem;
}
.u-fsz-15 {
  font-size: 1.5rem;
}
.u-fsz-14 {
  font-size: 1.4rem;
}
.u-fsz-13 {
  font-size: 1.3rem;
}

/*-------------------------------

# overflow

-------------------------------*/
.u-overflow-scroll {
  overflow-x: scroll;
}

/*-------------------------------

# margin

-------------------------------*/
.u-mg-center {
  margin-left: auto;
  margin-right: auto;
}

/*-------------------------------

# padding

-------------------------------*/
/* セクション汎用padding */
.u-sec-pd01 {
  padding: 100px 0 100px;
}
@media (max-width: 768px) {
  .u-sec-pd01 {
    padding: 30px 0;
  }
}

/*-------------------------------

# ボーダー

-------------------------------*/
.u-bt {
  border-top: 1px solid var(--black);
}

/*-------------------------------

# 下線

-------------------------------*/
.u-underline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.u-underline--thick {
  text-decoration-thickness: 2px;
}
.u-underline--wide {
  text-underline-offset: 6px;
}

/*-------------------------------

# 疑似要素

-------------------------------*/
.u-has-border {
  position: relative;
}
.u-has-border::after {
  position: absolute;
  content: "";
  bottom: -8px;
  left: 0;
  width: 90px;
  height: 1px;
  background: var(--black);
}
.u-has-border.u-color-white::after {
  background: #fff;
}

/*-------------------------------

# 矢印

-------------------------------*/
.u-has-left-arrow,
.u-has-right-arrow {
  position: relative;
}
.u-has-left-arrow::after,
.u-has-right-arrow::after {
  content: "";
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--black);
  top: 0;
  bottom: 0;
  margin: auto;
}
.u-has-left-arrow::after {
  border-left: 2px solid var(--black);
  rotate: -45deg;
  left: 0;
}
.u-has-right-arrow::after {
  border-right: 2px solid var(--black);
  rotate: 45deg;
  right: 0;
}
@media (max-width: 768px) {
  .u-has-left-arrow::after,
  .u-has-right-arrow::after {
    width: 8px;
    height: 8px;
  }
}