/* :not(._)は詳細度を上げるハック */

/* -----------------------------------------------------------
size
----------------------------------------------------------- */
.widthMax {
  width: 100%;
}

.heightMax {
  height: 100%;
}

/* -----------------------------------------------------------
line break
----------------------------------------------------------- */
.inlineBlock {
  display: inline-block;
}

/* -----------------------------------------------------------
flexBox
----------------------------------------------------------- */
.flexBox:not(._) {
  display: flex;
  flex-direction: column;

  &.-row {
    flex-direction: row;
  }
  &.-row_561 {
    @media (min-width: 561px) {
      flex-direction: row;
    }
  }
  &.-row_769 {
    @media (min-width: 769px) {
      flex-direction: row;
    }
  }
  &.-row_1024 {
    @media (min-width: 1024px) {
      flex-direction: row;
    }
  }

  &.-center {
    justify-content: center;
    align-items: center;
  }

  &.-alignItems_flexEnd {
    align-items: flex-end;
  }

  &.-gap8 {
    gap: 8px;
  }
  &.-gap16 {
    gap: 16px;
  }
  &.-gap24 {
    gap: 24px;
  }
  &.-gap32 {
    gap: 32px;
  }
  &.-gap40 {
    gap: 40px;
  }
  &.-gap48 {
    gap: 48px;
  }
  &.-gap56 {
    gap: 56px;
  }

  &.-gap8_561 {
    @media (min-width: 561px) {
      gap: 8px;
    }
  }
  &.-gap16_561 {
    @media (min-width: 561px) {
      gap: 16px;
    }
  }
  &.-gap24_561 {
    @media (min-width: 561px) {
      gap: 24px;
    }
  }
  &.-gap32_561 {
    @media (min-width: 561px) {
      gap: 32px;
    }
  }
  &.-gap40_561 {
    @media (min-width: 561px) {
      gap: 40px;
    }
  }
  &.-gap48_561 {
    @media (min-width: 561px) {
      gap: 48px;
    }
  }
  &.-gap56_561 {
    @media (min-width: 561px) {
      gap: 56px;
    }
  }

  &.-gap8_769 {
    @media (min-width: 769px) {
      gap: 16px;
    }
  }
  &.-gap16_769 {
    @media (min-width: 769px) {
      gap: 16px;
    }
  }
  &.-gap24_769 {
    @media (min-width: 769px) {
      gap: 24px;
    }
  }
  &.-gap32_769 {
    @media (min-width: 769px) {
      gap: 32px;
    }
  }
  &.-gap40_769 {
    @media (min-width: 769px) {
      gap: 40px;
    }
  }
  &.-gap48_769 {
    @media (min-width: 769px) {
      gap: 48px;
    }
  }
  &.-gap56_769 {
    @media (min-width: 769px) {
      gap: 56px;
    }
  }

  &.-gap8_1024 {
    @media (min-width: 1024px) {
      gap: 16px;
    }
  }
  &.-gap16_1024 {
    @media (min-width: 1024px) {
      gap: 16px;
    }
  }
  &.-gap24_1024 {
    @media (min-width: 1024px) {
      gap: 24px;
    }
  }
  &.-gap32_1024 {
    @media (min-width: 1024px) {
      gap: 32px;
    }
  }
  &.-gap40_1024 {
    @media (min-width: 1024px) {
      gap: 40px;
    }
  }
  &.-gap48_1024 {
    @media (min-width: 1024px) {
      gap: 48px;
    }
  }
  &.-gap56_1024 {
    @media (min-width: 1024px) {
      gap: 56px;
    }
  }

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

  &.-nowrap_769 {
    @media (min-width: 769px) {
      flex-wrap: nowrap;
    }
  }

  &.-flex1 > * {
    flex: 1;
  }
}

/* -----------------------------------------------------------
lineClamp
----------------------------------------------------------- */
.lineClamp:not(._) {
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;

  &.-row1 {
    -webkit-line-clamp: 1;
  }
  &.-row3 {
    -webkit-line-clamp: 3;
  }
}

.lineClampUnder390:not(._) {
  @media (max-width: 390px) {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;

    &.-row1 {
      -webkit-line-clamp: 1;
    }
    &.-row3 {
      -webkit-line-clamp: 3;
    }
  }
}
.lineClampUnder560:not(._) {
  @media (max-width: 560px) {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;

    &.-row1 {
      -webkit-line-clamp: 1;
    }
    &.-row3 {
      -webkit-line-clamp: 3;
    }
  }
}
.lineClampUnder768:not(._) {
  @media (max-width: 768px) {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;

    &.-row1 {
      -webkit-line-clamp: 1;
    }
    &.-row3 {
      -webkit-line-clamp: 3;
    }
  }
}
.lineClampUnder1023:not(._) {
  @media (max-width: 1023px) {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;

    &.-row1 {
      -webkit-line-clamp: 1;
    }
    &.-row3 {
      -webkit-line-clamp: 3;
    }
  }
}

.lineClampUpper391:not(._) {
  @media (max-width: 391px) {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;

    &.-row1 {
      -webkit-line-clamp: 1;
    }
    &.-row3 {
      -webkit-line-clamp: 3;
    }
  }
}
.lineClampUpper561:not(._) {
  @media (max-width: 561px) {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;

    &.-row1 {
      -webkit-line-clamp: 1;
    }
    &.-row3 {
      -webkit-line-clamp: 3;
    }
  }
}
.lineClampUpper769:not(._) {
  @media (max-width: 769px) {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;

    &.-row1 {
      -webkit-line-clamp: 1;
    }
    &.-row3 {
      -webkit-line-clamp: 3;
    }
  }
}
.lineClampUpper1024:not(._) {
  @media (max-width: 1024px) {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;

    &.-row1 {
      -webkit-line-clamp: 1;
    }
    &.-row3 {
      -webkit-line-clamp: 3;
    }
  }
}

/* -----------------------------------------------------------
hide
----------------------------------------------------------- */
.hideUnder390:not(._) {
  @media (max-width: 390px) {
    display: none;
  }
}
.hideUnder560:not(._) {
  @media (max-width: 560px) {
    display: none;
  }
}
.hideUnder768:not(._) {
  @media (max-width: 768px) {
    display: none;
  }
}
.hideUnder1023:not(._) {
  @media (max-width: 1023px) {
    display: none;
  }
}

.hideUpper391:not(._) {
  @media (min-width: 391px) {
    display: none;
  }
}
.hideUpper561:not(._) {
  @media (min-width: 561px) {
    display: none;
  }
}
.hideUpper769:not(._) {
  @media (min-width: 769px) {
    display: none;
  }
}
.hideUpper1024:not(._) {
  @media (min-width: 1024px) {
    display: none;
  }
}