@charset "UTF-8";

/* SP（デフォルト） */
.pcOnly {
  display: none !important;
}

/* PC */
@media (min-width: 769px) {
  .spOnly {
    display: none !important;
  }
}

/* ========== style.min.css から移行 ========== */
.l-wrapper {
  font-family: TTCommons-Regular, 'Noto Sans JP', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  font-size: 1.4rem;
  line-height: 1.75;
  background: #eee;
}

.l-kv {
  position: relative;
}

.l-kv__img {
  width: 100%;
  height: auto;
}

.l-main {
  overflow-x: hidden;
  width: 100%;
  max-width: 1000px;
  margin: auto;
}

.l-container {
  background: #fff;
}

.l-content {
  padding-top: 96px;
  padding-bottom: 96px;
}

@media screen and (max-width: 768px) {
  .l-content {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.l-content:first-child {
  padding-top: 32px;
}

@media screen and (max-width: 768px) {
  .l-content:first-child {
    padding-top: 24px;
  }
}

.l-content + .l-content {
  padding-top: 0;
}

.l-content_cover {
  padding-top: 0;
  padding-bottom: 0;
}

.l-content__bg {
  margin-right: -80px;
  margin-left: -80px;
  padding-top: 96px;
  padding-right: 80px;
  padding-bottom: 96px;
  padding-left: 80px;
}

@media screen and (max-width: 768px) {
  .l-content__bg {
    margin-right: -8%;
    margin-left: -8%;
    padding-top: 80px;
    padding-right: 8%;
    padding-bottom: 80px;
    padding-left: 8%;
  }
}

.l-content__bg--gray {
  background: #eee;
}

.l-inner {
  width: 100%;
  max-width: 840px;
  margin: auto;
}

@media screen and (max-width: 768px) {
  .l-inner {
    width: min(84%, 1000px);
  }
}

.menu {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

@media screen and (max-width: 768px) {
  .menu {
    max-width: 300px;
  }
}

.menuList {
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .menuList {
    flex-wrap: wrap;
      justify-content: flex-start;
  }
}

.menuList__item {
  width: calc((100% - 80px) / 3);
  margin-left: 16px;
}

@media screen and (max-width: 768px) {
  .menuList__item {
    width: calc((100% - 64px) / 2);
    margin-top: 20px;
    margin-left: 32px;
  }
}

.menuList__link {
  display: block;
  width: 100%;
  padding-top: 8px;
  padding-right: 16px;
  padding-bottom: 8px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .menuList__link {
    position: relative;
    text-align: left;
  }

  .menuList__link::after {
    position: absolute;
    top: calc(50% - 10px);
    right: 6px;
    bottom: 0;
    width: 10px;
    height: 10px;
    content: '';
    -webkit-transform: rotate(135deg) translateY(-50%);
    transform: rotate(135deg) translateY(-50%);
    border-top: solid 1px #000;
    border-right: solid 1px #000;
  }
}

@media screen and (hover: hover) {
  .menuList__hover {
    position: relative;
  }

  .menuList__hover::after {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 1px;
    content: '';
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    background: #000;
  }

  .menuList__hover:hover::after {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}

@media screen and (min-width: 769px) {
  .menuList__arrow {
    position: relative;
  }

  .menuList__arrow::after {
    position: absolute;
    top: 0;
    right: -22px;
    bottom: 0;
    width: 10px;
    height: 10px;
    content: '';
    -webkit-transform: rotate(135deg) translateY(-50%);
    transform: rotate(135deg) translateY(-50%);
    border-top: solid 1px #000;
    border-right: solid 1px #000;
  }
}

.intro {
  margin-top: 80px;
}

@media screen and (max-width: 768px) {
  .intro {
    margin-top: 50px;
  }
}

.intro__text {
  font-size: 1.6rem;
  line-height: 2;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .intro__text {
    text-align: left;
  }
}

.desc {
  width: 100%;
  max-width: 680px;
  margin-top: 80px;
  margin-right: auto;
  margin-left: auto;
}

@media screen and (max-width: 768px) {
  .desc {
    margin-top: 50px;
  }
}

.desc__title {
  font-size: 2.4rem;
  font-weight: 400;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .desc__title {
    font-size: 2.2rem;
    text-align: left;
  }
}

.desc__text {
  margin-top: 24px;
}

[id=lineup] .lineup__title {
  font-family: TTCommons-Light, 'Noto Sans JP', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  font-size: 3.2rem;
  letter-spacing: 3px;
}

@media screen and (max-width: 768px) {
  [id=lineup] .lineup__title {
    font-size: 2.8rem;
  }
}

[id=lineup] .thumb {
  margin-top: 40px;
}

[id=lineup] .thumbList {
  display: flex;
  margin-left: -8px;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  [id=lineup] .thumbList {
    margin-left: 0;
  }
}

[id=lineup] .thumbList__item {
  display: flex;
  flex-direction: column;
  width: calc((100% - 24px) / 3);
  margin-left: 8px;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  [id=lineup] .thumbList__item {
    margin-left: 0;
  }
}

[id=lineup] .thumbList__image {
  width: 100%;
  height: auto;
}

[id=lineup] .thumbList__text {
  font-size: 1.2rem;
  margin-top: 8px;
  padding-top: 8px;
  padding-bottom: 16px;
  text-align: center;
}

[id=lineup] .thumbList__arrow {
  position: relative;
  margin-top: auto;
}

[id=lineup] .thumbList__arrow::after {
  position: absolute;
  right: 50%;
  bottom: 2px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  content: '';
  -webkit-transform: rotate(135deg) translate(-50%, -50%);
  transform: rotate(135deg) translate(-50%, -50%);
  border-top: solid 1px #000;
  border-right: solid 1px #000;
}

[id=lineup] .product {
  margin-top: 40px;
}

[id=lineup] .productList {
  display: flex;
  margin-left: -60px;
}

@media screen and (max-width: 768px) {
  [id=lineup] .productList {
    margin-left: 0;
  }
}

[id=lineup] .swiper-wrapper {
  flex-direction: row;
}

@media screen and (min-width: 769px) {
  [id=lineup] .swiper-wrapper {
    width: initial;
    height: initial;
  }

  [id=lineup] .swiper-slide {
    width: initial;
    height: initial;
  }
}

[id=lineup] .productList__item {
  display: flex;
  flex-direction: column;
  width: calc((100% - 180px) / 3);
  margin-left: 60px;
}

@media screen and (max-width: 768px) {
  [id=lineup] .productList__item {
    width: 100%;
    margin-left: 0;
    padding: 24px 20px;
    border: 1px solid #ccc;
  }
}

[id=lineup] .productList__link {
  transition: .5s;
  text-decoration: underline;
}

[id=lineup] .productList__link:hover {
  transition: .5s;
  opacity: .8;
}

[id=lineup] .productList__image {
  width: 100%;
  height: auto;
}

[id=lineup] .productList__name {
  font-size: 1.6rem;
  font-weight: 500;
  margin-top: 32px;
}

@media screen and (max-width: 768px) {
  [id=lineup] .productList__name {
    margin-top: 24px;
  }
}

[id=lineup] .productList__price {
  font-size: 1.6rem;
  margin-top: 8px;
}

[id=lineup] .productList__btn {
  margin-top: 32px;
}

@media screen and (max-width: 768px) {
  [id=lineup] .productList__btn {
    margin-top: 24px;
  }
}

[id=lineup] .productList__text {
  margin-top: 32px;
  margin-bottom: 40px;
}

@media screen and (max-width: 768px) {
  [id=lineup] .productList__text {
    margin-top: 24px;
    margin-bottom: 24px;
  }
}

[id=lineup] .review {
  overflow-y: scroll;
  height: 320px;
  margin-top: auto;
}

[id=lineup] .review__box {
  padding: 18px 16px;
  background: rgba(204, 204, 204, .5);
}

[id=lineup] .review__box:not(:first-child) {
  margin-top: 4px;
}

[id=lineup] .review__name {
  font-weight: 700;
}

[id=lineup] .review__text {
  margin-top: 12px;
}

[id=lineup] .lineup__note {
  font-size: 1.2rem;
  margin-top: 16px;
}

.swiper {
  width: 600px;
  height: 300px;
}

[id=how-to-use] .how-to-use__title {
  font-family: TTCommons-Light, 'Noto Sans JP', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  font-size: 3.2rem;
  letter-spacing: 3px;
}

@media screen and (max-width: 768px) {
  [id=how-to-use] .how-to-use__title {
    font-size: 2.8rem;
  }
}

[id=how-to-use] .process {
  margin-top: 40px;
}

[id=how-to-use] .processList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media screen and (min-width: 769px) {
  [id=how-to-use] .processList {
    margin-top: -60px;
    margin-left: -60px;
  }
}

@media screen and (max-width: 768px) {
  [id=how-to-use] .processList {
    flex-direction: column;
    margin-top: -50px;
  }
}

@media screen and (min-width: 769px) {
  [id=how-to-use] .processList__item {
    margin-top: 60px;
    margin-left: 60px;
  }
}

@media screen and (max-width: 768px) {
  [id=how-to-use] .processList__item {
    margin-top: 50px;
  }
}

@media screen and (min-width: 769px) {
  [id=how-to-use] .processList__item-01 {
    width: calc(100% - 420px - 120px);
  }
}

@media screen and (min-width: 769px) {
  [id=how-to-use] .processList__item-02 {
    width: 420px;
  }
}

@media screen and (min-width: 769px) {
  [id=how-to-use] .processList__item-03 {
    width: 420px;
  }
}

@media screen and (min-width: 769px) {
  [id=how-to-use] .processList__item-04 {
    width: calc(100% - 420px - 120px);
  }
}

[id=how-to-use] .processList__title {
  font-family: TTCommons-Light, 'Noto Sans JP', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  font-size: 2rem;
  font-weight: 300;
  position: relative;
}

[id=how-to-use] .processList__title::after {
  position: absolute;
  width: 100%;
  height: 1px;
  content: '';
  background: #ccc;
}

[id=how-to-use] .processList__link {
  display: block;
  padding-top: 8px;
  padding-bottom: 8px;
}

[id=how-to-use] .processList__link-arrow {
  position: relative;
}

[id=how-to-use] .processList__link-arrow::after {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 10px;
  height: 10px;
  content: '';
  -webkit-transform: rotate(45deg) translateY(-50%);
  transform: rotate(45deg) translateY(-50%);
  border-top: solid 1px #9d9d9d;
  border-right: solid 1px #9d9d9d;
}

[id=how-to-use] .processList__text {
  margin-top: 24px;
}

[id=how-to-use] .product {
  margin-top: 32px;
}

[id=how-to-use] .productList {
  display: flex;
  margin-left: -8px;
  justify-content: center;
}

[id=how-to-use] .productList__item {
  display: flex;
  flex-direction: column;
  margin-left: 8px;
}

[id=how-to-use] .processList__item-01 .productList__item {
  width: calc((100% - 24px) / 3);
}

[id=how-to-use] .processList__item-02 .productList__item {
  width: calc((100% - 32px) / 4);
}

[id=how-to-use] .processList__item-03 .productList__item {
  width: calc((100% - 32px) / 4);
}

[id=how-to-use] .processList__item-04 .productList__item {
  width: 120px;
}

@media screen and (max-width: 768px) {
  [id=how-to-use] .processList__item-04 .productList__item {
    width: 100px;
  }
}

[id=how-to-use] .productList__step {
  font-family: TTCommons-Medium, 'Noto Sans JP', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  text-align: center;
  color: #727272;
}

[id=how-to-use] .productList__link {
  margin-top: 12px;
  transition: .5s;
  text-decoration: underline;
}

[id=how-to-use] .productList__link:hover {
  transition: .5s;
  opacity: .8;
}

[id=how-to-use] .productList__image {
  width: 100%;
  height: auto;
}

[id=how-to-use] .productList__name {
  font-size: 1.2rem;
  font-weight: 500;
  margin-top: 12px;
  margin-bottom: 12px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  [id=how-to-use] .productList__name {
    font-size: 1rem;
  }
}

[id=how-to-use] .amountUsed {
  display: grid;
  margin-top: auto;
  place-items: center;
}

[id=how-to-use] .amountUsed__circle {
  position: relative;
  width: 48px;
  height: 48px;
  border: 1px solid #ccc;
  border-radius: 50%;
}

[id=how-to-use] .amountUsed__text {
  font-size: 1rem;
  line-height: 1.25;
  position: absolute;
  top: 50%;
  left: 0;
  width: 48px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

[id=dev-story] .dev-story__title {
  font-family: TTCommons-Light, 'Noto Sans JP', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  font-size: 2.4rem;
  font-weight: 300;
  letter-spacing: 3px;
}

@media screen and (max-width: 768px) {
  [id=dev-story] .dev-story__title {
    font-size: 2.8rem;
  }
}

[id=dev-story] .dev-story__thumb {
  margin-top: 40px;
}

[id=dev-story] .dev-story__image {
  width: 100%;
  height: auto;
}

[id=dev-story] .dev-story__text {
  margin-top: 24px;
}

[id=dev-story] .dev-story__text:first-of-type {
  margin-top: 40px;
}

[id=dev-story] .dev-story__btn {
  position: relative;
  display: block;
  width: 176px;
  margin-top: 50px;
  padding-top: 8px;
  padding-right: 24px;
  padding-bottom: 8px;
  padding-left: 8px;
  transition: .5s;
  text-align: center;
  border: 1px solid #000;
}

[id=dev-story] .dev-story__btn::after {
  position: absolute;
  top: calc(50% - 2px);
  right: 16px;
  width: 10px;
  height: 10px;
  content: '';
  transition: .5s;
  -webkit-transform: rotate(45deg) translateY(-50%);
  transform: rotate(45deg) translateY(-50%);
  border-top: solid 1px #000;
  border-right: solid 1px #000;
}

[id=dev-story] .dev-story__btn:hover {
  transition: .5s;
  color: #fff;
  background: #2b2f33;
}

[id=dev-story] .dev-story__btn:hover::after {
  transition: .5s;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
}

[id=dev-story] .info {
  margin-top: 50px;
  padding-right: 40px;
  padding-left: 40px;
  border-right: 1px solid #9d9d9d;
  border-left: 1px solid #9d9d9d;
}

@media screen and (max-width: 768px) {
  [id=dev-story] .info {
    margin-top: 40px;
    padding-right: 22px;
    padding-left: 22px;
  }
}

[id=dev-story] .info__title {
  font-size: 1.6rem;
}

[id=dev-story] .info__text {
  margin-top: 8px;
}

[id=about-mta] .about-mta__title {
  font-family: TTCommons-Light, 'Noto Sans JP', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  font-size: 2.4rem;
  font-weight: 300;
  letter-spacing: 3px;
}

@media screen and (max-width: 768px) {
  [id=about-mta] .about-mta__title {
    font-size: 2.8rem;
  }
}

[id=about-mta] .material {
  display: flex;
  margin-top: 40px;
}

@media screen and (max-width: 768px) {
  [id=about-mta] .material {
    flex-direction: column;
  }
}

[id=about-mta] .material__thumbnail {
  width: 400px;
}

@media screen and (max-width: 768px) {
  [id=about-mta] .material__thumbnail {
    width: 100%;
  }
}

[id=about-mta] .material__image {
  width: 100%;
  height: auto;
}

[id=about-mta] .material__body {
  width: calc(100% - 400px - 24px);
}

@media screen and (min-width: 769px) {
  [id=about-mta] .material__body {
    margin-left: 24px;
  }
}

@media screen and (max-width: 768px) {
  [id=about-mta] .material__body {
    width: 100%;
    margin-top: 24px;
  }
}

[id=about-mta] .material__title {
  font-size: 1.8rem;
  font-weight: 400;
}

[id=about-mta] .material__text {
  margin-top: 24px;
}

[id=learn-more] .learn-more__title {
  font-family: TTCommons-Light, 'Noto Sans JP', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  font-size: 2.4rem;
  font-weight: 300;
  letter-spacing: 3px;
}

@media screen and (max-width: 768px) {
  [id=learn-more] .learn-more__title {
    font-size: 2.8rem;
  }
}

[id=learn-more] .movie {
  display: flex;
  margin-top: 40px;
  margin-left: -40px;
}

@media screen and (max-width: 768px) {
  [id=learn-more] .movie {
    display: block;
    margin-left: 0;
  }
}

[id=learn-more] .movie__item {
  width: calc((100% - 80px) / 2);
  margin-left: 40px;
}

@media screen and (max-width: 768px) {
  [id=learn-more] .movie__item {
    width: 100%;
    margin-left: 0;
  }
}

@media screen and (max-width: 768px) {
  [id=learn-more] .movie__item:not(:first-of-type) {
    margin-top: 40px;
  }
}

[id=learn-more] .movie__title {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.5;
}

[id=learn-more] .youtube-container {
  position: relative;
  width: 100%;
}

[id=learn-more] .youtube-container::before {
  display: block;
  padding-top: 56.25%;
  content: '';
}

[id=learn-more] .youtube {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 20px;
}

[id=learn-more] .youtube__thumb {
  cursor: pointer;
  transition: .5s;
}

[id=learn-more] .youtube__thumb:hover {
  transition: .5s;
  opacity: .8;
}

[id=learn-more] .hidden {
  display: none !important;
}

.bottomBnr__link {
  display: block;
  background: #000;
}

.bottomBnr__image {
  width: 100%;
  height: auto;
  transition: .5s;
}

.bottomBnr__image:hover {
  transition: .5s;
  opacity: .9;
}

.diagnosisBtn,
.stickyBtn {
  width: 230px;
  height: 60px;
}

@media screen and (max-width: 768px) {
  .diagnosisBtn,
  .stickyBtn {
    width: 190px;
    height: 50px;
  }
}

.topBtn {
  position: absolute;
  bottom: 28px;
  left: 28px;
}

@media screen and (max-width: 768px) {
  .topBtn {
    bottom: -25px;
    left: 8%;
  }
}

.stickyBtn {
  position: sticky;
  z-index: 10;
  bottom: 140px;
  left: 28px;
  margin-top: -60px;
  opacity: 0;
}

@media screen and (max-width: 768px) {
  .stickyBtn {
    bottom: 140px;
    left: 8%;
    margin-top: -50px;
  }
}

.diagnosisBtn {
  display: grid;
  transition: .5s;
  border-radius: 2px;
  background: #736357;
  place-items: center;
}

.diagnosisBtn:hover {
  transition: .5s;
  background: #917d6d;
}

.diagnosisBtn__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.diagnosisBtn__img {
  width: 100%;
  height: auto;
}

.diagnosisBtn__text {
  font-size: 1.6rem;
  line-height: 1;
  margin-left: 8px;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .diagnosisBtn__text {
    font-size: 1.4rem;
  }
}

.diagnosisBtn__text--small {
  font-size: 1.2rem;
}

.box--wide {
  margin-right: -80px;
  margin-left: -80px;
}

@media screen and (max-width: 768px) {
  .box--wide {
    margin-right: -8%;
    margin-left: -8%;
  }
}

.swiper {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 769px) {
  .swiper-wrapper {
    display: flex;
    flex-direction: column;
  }

  .swiper-a:not(.swiper-initialized) {
    padding: 0;
  }

  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }

  .swiper-pagination {
    display: none;
  }
}

.swiper-pagination-bullet-active {
  background-color: #000030;
}

.u-en {
  font-size: 110%;
}

.u-ta--center {
  text-align: center;
}

.u-ta--left {
  text-align: left;
}

.u-ta--right {
  text-align: right;
}

.u-fw--lighter {
  font-weight: lighter;
}

.u-fw--normal {
  font-weight: 400;
}

.u-fw--bold {
  font-weight: 700;
}

.u-fw--bolder {
  font-weight: bolder;
}

.u-lh--normal {
  line-height: 1.5;
}

.u-lh--wide {
  line-height: 2;
}

.u-lh--s {
  font-size: 1.4rem;
}

.u-tt--demibold {
  font-family: TTCommons-DemiBold, sans-serif;
}

.u-tt--bold {
  font-family: TTCommons-Bold, sans-serif;
}

.u-tt--medium {
  font-family: TTCommons-Medium, sans-serif;
}

.u-tt--light {
  font-family: TTCommons-Light, sans-serif;
}

.u-arrow--bottom::before,
.u-arrow--left::before,
.u-arrow--right::before,
.u-arrow--top::before {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 14px;
  height: 14px;
  content: '';
  border-top: solid 1px #000;
  border-right: solid 1px #000;
}

.u-arrow--top {
  position: relative;
  padding-right: 22px;
}

.u-arrow--top::before {
  -webkit-transform: rotate(-45deg) translateY(-50%);
  transform: rotate(-45deg) translateY(-50%);
}

.u-arrow--right {
  position: relative;
  padding-right: 22px;
}

.u-arrow--right::before {
  -webkit-transform: rotate(45deg) translateY(-50%);
  transform: rotate(45deg) translateY(-50%);
}

.u-arrow--bottom {
  position: relative;
  padding-right: 22px;
}

.u-arrow--bottom::before {
  -webkit-transform: rotate(135deg) translateY(-50%);
  transform: rotate(135deg) translateY(-50%);
}

.u-arrow--left {
  position: relative;
  padding-right: 22px;
}

.u-arrow--left::before {
  -webkit-transform: rotate(-135deg) translateY(-50%);
  transform: rotate(-135deg) translateY(-50%);
}

.u-btn__container {
  display: flex;
  flex-direction: column;
  max-width: 680px;
  margin: auto;
  align-items: center;
  justify-content: center;
  gap: 24px 0;
}

@media screen and (min-width: 769px) {
  .u-btn__container {
    flex-direction: row;
    gap: 0 24px;
  }
}

.u-btn__container:not(:first-child) {
  margin-top: 24px;
}

.u-btn {
  display: inline-block;
  width: 100%;
  min-width: 200px;
  padding-top: 16px;
  padding-right: 32px;
  padding-bottom: 16px;
  padding-left: 24px;
  cursor: pointer;
  transition: .5s;
  text-align: center;
  color: #fff;
  border-radius: 4px;
  background: #2b2f33;
}

.u-btn--black {
  color: #fff;
  background: #2b2f33;
}

.u-btn--black:hover {
  transition: .5s;
  opacity: .8;
  color: #fff;
  background: #2b2f33;
}

.u-btn--white {
  background: #fff;
}

.u-btn--white:hover {
  transition: .5s;
  opacity: .8;
  background: #fff;
}

.u-btn--passive {
  background: #eee;
}

.u-btn--passive:hover {
  transition: .5s;
  opacity: .8;
  background: #fff;
}

.u-btn__border {
  border: 1px solid #fff;
}

.u-btn__border--black {
  border: 1px solid #2b2f33;
}

.u-btn--en {
  padding: 14px 32px;
}

.u-link-disable {
  text-decoration: none !important;
  pointer-events: none;
}

.u-btn__arrow {
  position: relative;
  display: inline-block;
}

.u-btn__arrow::after {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  content: '';
  -webkit-transform: rotate(0) translate(-50%, -50%);
  transform: rotate(0) translate(-50%, -50%);
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
}

.u-btn__arrow--top::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.u-btn__arrow--right::after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.u-btn__arrow--bottom::after {
  margin-top: -12px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.u-btn__arrow--left::after {
  right: initial;
  left: 16px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.u-btn__arrow--black::after {
  border-top: solid 1px #2b2f33;
  border-right: solid 1px #2b2f33;
}

.u-h1__line {
  position: relative;
  display: block;
  margin-bottom: 1em;
  padding-bottom: 32px;
}

@media screen and (max-width: 768px) {
  .u-h1__line {
    padding-bottom: 18px;
  }
}

.u-h1__line::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: inline-block;
  width: 80px;
  height: 5px;
  content: '';
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 2px;
  background-color: #000;
}

@media screen and (max-width: 768px) {
  .u-h1__line::before {
    width: 40px;
  }
}

.u-display__block {
  display: block;
}

.u-display__inline-block {
  display: inline-block;
}

.u-display__inline {
  display: inline;
}


.button-wrapper.detailLink {
  justify-content: flex-start;

  .--bg-white {
    padding: 1.4rem 1.6rem;
    max-width: 16rem;
    min-height: 3.8rem;
  }
}

@media screen and (max-width: 768px) {
  .button-wrapper {
    width: min(84%, 1000px);
    margin: 4rem auto 0;
  }
}