/* fv
======================================= */
.fv {
  height: 100vh;
  min-height: 47.5vw;
  background: url(../img/top/fv/fv.jpg) no-repeat center center/cover;
  position: relative;
  z-index: 0;
}
@media (max-width: 768px) {
  .fv {
    height: calc(100vh - 4em);
    min-height: 500px;
    background: url(../img/top/fv/fv-sp.jpg) no-repeat center center/cover;
  }
}
.fv__inner {
  height: 100%;
}
.fv__contents {
  position: absolute;
  bottom: 5em;
  left: 5em;
  color: #fff;
  background-color: rgba(80, 80, 80, 0.8);
  padding: 2em;
}
@media (max-width: 768px) {
  .fv__contents {
    left: 5.333%;
    top: inherit;
    bottom: 1.5em;
  }
}
.fv__catch-jp {
  font-family: "M PLUS 1p", sans-serif;
  font-size: 3.125em;
  font-size: clamp(24px, 3vw, 3.125em);
  font-weight: bold;
  line-height: 1.35;
  border-bottom: 4px solid #fff;
  margin-bottom: 1.125rem;
}
@media (max-width: 768px) {
  .fv__catch-jp {
    font-size: 1.25em;
    border-bottom: 2px solid #fff;
    margin-bottom: 0.5625rem;
  }
}
.fv__catch-en {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2em;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
}
@media (max-width: 768px) {
  .fv__catch-en {
    font-size: 0.875em;
  }
}

/* concept
======================================= */
.concept__inner::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: #F8F8F8;
  width: 84.1667%;
  height: 60.7%;
}
@media (max-width: 768px) {
  .concept__inner::after {
    height: 100%;
    width: 82.9333%;
  }
}
.concept__image {
  margin-left: -16.667vw;
  -webkit-box-shadow: 5em 5em 0 0 #030303;
          box-shadow: 5em 5em 0 0 #030303;
  margin-right: 5em;
  margin-bottom: 10em;
  position: relative;
}
.concept__image::before {
  content: "";
  display: block;
  padding-top: 43.8%;
}
.concept__image img, .concept__image video, .concept__image iframe, .concept__image svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 768px) {
  .concept__image {
    margin-left: -10.667vw;
    margin-right: 0.9375em;
    margin-bottom: 5em;
    -webkit-box-shadow: 1.5em 1.5em 0 0 #030303;
            box-shadow: 1.5em 1.5em 0 0 #030303;
  }
}
@media (max-width: 768px) {
  .concept__image::before {
    padding-top: 112.5%;
  }
}
.concept__image img {
  -o-object-position: left top;
     object-position: left top;
}
@media (max-width: 768px) {
  .concept__image img {
    -o-object-position: center;
       object-position: center;
  }
}
.concept__container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 6.25vw;
}
@media (max-width: 1440px) {
  .concept__container {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
@media (max-width: 1024px) {
  .concept__container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2.5em;
  }
}
.concept__catch {
  width: 47%;
}
@media (max-width: 1024px) {
  .concept__catch {
    width: 100%;
  }
}
.concept__catch-en {
  margin-bottom: 1em;
}
.concept__catch-jp {
  font-family: "M PLUS 1p", sans-serif;
  font-size: 1.5em;
  font-weight: bold;
}
@media (max-width: 768px) {
  .concept__catch-jp {
    font-size: 0.8125em;
  }
}
.concept__right {
  width: 45%;
  max-width: 576px;
}
@media (max-width: 1024px) {
  .concept__right {
    width: 100%;
    max-width: inherit;
  }
}
.concept__title {
  font-family: "M PLUS 1p", sans-serif;
  font-size: 2em;
  margin-bottom: 0.75em;
}
@media (max-width: 768px) {
  .concept__title {
    font-size: 1.125em;
    margin-bottom: 1rem;
  }
}
.concept__text {
  font-size: 1.125em;
  font-weight: bold;
  line-height: 2;
  margin-bottom: 4rem;
}
@media (max-width: 768px) {
  .concept__text {
    font-size: 0.9375em;
    margin-bottom: 2.5rem;
  }
}
.concept__btn {
  margin-left: auto;
}

/* reason
======================================= */
.reason__list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media (max-width: 768px) {
  .reason__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2rem;
  }
}
.reason__item {
  width: 27.7125%;
}
@media (max-width: 768px) {
  .reason__item {
    width: 100%;
  }
}
.reason__item-title {
  text-align: center;
}
.reason__item-title-en {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1;
  width: 176px;
  border-bottom: 1px solid #787878;
  padding: 1.2em 0;
  margin: auto;
}
@media (max-width: 768px) {
  .reason__item-title-en {
    padding: 1rem;
  }
}
.reason__item-title-jp {
  font-family: "M PLUS 1p", sans-serif;
  font-size: 1.25em;
  font-weight: bold;
  line-height: 1;
  padding: 2em 0;
}
@media (max-width: 768px) {
  .reason__item-title-jp {
    font-size: 0.9375em;
    padding: 1.25rem 0;
  }
}
.reason__item-text {
  font-size: 1.125em;
  letter-spacing: 0.05em;
}
@media (max-width: 768px) {
  .reason__item-text {
    font-size: 0.9375em;
  }
}

/* features
======================================= */
.features {
  background-color: #030303;
  color: #fff;
}
.features__inner {
  padding-top: 0;
  margin-top: 22.5em;
}
@media (max-width: 768px) {
  .features__inner {
    margin-top: 11.25em;
  }
}
.features__image {
  -webkit-transform: translateY(-22.5em);
          transform: translateY(-22.5em);
  margin-right: -16.667vw;
  margin-left: 5em;
}
@media (max-width: 768px) {
  .features__image {
    -webkit-transform: translateY(-11.25em);
            transform: translateY(-11.25em);
  }
}
.features__title {
  margin-top: -15.25em;
}
@media (max-width: 768px) {
  .features__title {
    margin-top: -7.25em;
  }
}
.features__list {
  margin-bottom: 5em;
}
.features__item:nth-child(n+2) {
  margin-top: 10em;
}
@media (max-width: 768px) {
  .features__item:nth-child(n+2) {
    margin-top: 4em;
  }
}
.features__item:nth-child(2n) .features__item-container {
  margin-left: auto;
}
.features__item-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  max-width: 1343px;
  gap: 10.14667vw;
}
@media (max-width: 1024px) {
  .features__item-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1rem;
  }
}
.features__item-left {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 14.818%;
}
@media (max-width: 1024px) {
  .features__item-left {
    width: 117px;
  }
}
.features__item-title {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 500;
  line-height: 1;
}
@media (max-width: 768px) {
  .features__item-title {
    font-size: 0.8125em;
  }
}
.features__item-num {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 5em;
  font-weight: 600;
  line-height: 1;
  margin-top: 1rem;
  position: relative;
}
@media (max-width: 768px) {
  .features__item-num {
    font-size: 2.5em;
    margin-top: 0.8125rem;
  }
}
.features__item-num::before {
  content: "";
  width: 3rem;
  height: 1px;
  background-color: #fff;
  position: absolute;
  right: 100%;
  top: 1rem;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
@media (max-width: 768px) {
  .features__item-num::before {
    width: 1.5rem;
    top: 0.5rem;
    right: 108%;
  }
}
.features__item-right {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 2.0833vw;
  width: 70.3%;
}
@media (max-width: 1024px) {
  .features__item-right {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .features__item-right {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1.5em;
  }
}
.features__item-img {
  width: 264px;
  position: relative;
}
.features__item-img::before {
  content: "";
  display: block;
  padding-top: 125%;
}
.features__item-img img, .features__item-img video, .features__item-img iframe, .features__item-img svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 768px) {
  .features__item-img {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .features__item-img::before {
    padding-top: 100%;
  }
}
.features__item-contents {
  width: 70%;
}
@media (max-width: 768px) {
  .features__item-contents {
    width: 100%;
  }
}
.features__item-catch {
  font-family: "M PLUS 1p", sans-serif;
  font-size: 1.5em;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}
@media (max-width: 768px) {
  .features__item-catch {
    font-size: 1.125em;
  }
}
.features__item-text {
  font-size: 1.125em;
  letter-spacing: 0.05em;
}
@media (max-width: 768px) {
  .features__item-text {
    font-size: 0.9375em;
  }
}
.features__btn {
  margin-left: auto;
}
.features__btn a {
  color: #fff;
  border-bottom: 2px solid #fff;
}
.features__btn a::after {
  background: url(../img/common/icons/icon_arrow-white.svg) no-repeat center center/contain;
}

/* check
======================================= */
.check {
  background-color: #F8F8F8;
}
@media (max-width: 768px) {
  .check__inner {
    padding-left: 5.333%;
    padding-right: 5.333%;
  }
}
.check__title {
  margin-bottom: 6em;
}
@media (max-width: 768px) {
  .check__title {
    margin-bottom: 3em;
  }
}
.check__image {
  max-width: 1181px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .check__image {
    margin-bottom: 3em;
  }
}
.check__btn {
  margin-left: auto;
}

/* flow
======================================= */
.flow__list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  max-width: 1120px;
  margin: auto;
}
@media (max-width: 1024px) {
  .flow__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2.5em;
  }
}
.flow__item {
  width: 22.857%;
  background-color: #F8F8F8;
  padding: 2em 1em 1.5em;
  position: relative;
}
@media (max-width: 1024px) {
  .flow__item {
    width: 100%;
    padding: 3em 1em 2.3125em;
  }
}
.flow__item:nth-child(n+2)::before {
  position: absolute;
  top: 50%;
  left: -1.75em;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  content: "";
  width: 1.5em;
  height: 1.5em;
  background: url(../img//common/icons/icon_arrow-black.svg) no-repeat center center/contain;
}
@media (max-width: 1024px) {
  .flow__item:nth-child(n+2)::before {
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, -2rem) rotate(90deg);
            transform: translate(-50%, -2rem) rotate(90deg);
  }
}
.flow__item-num {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  color: #fff;
  line-height: 1;
  position: absolute;
  left: -1em;
  top: -1em;
  background-color: #030303;
  padding: 0.625em;
}
@media (max-width: 1024px) {
  .flow__item-num {
    top: 0;
    left: 0;
  }
}
.flow__item-title {
  font-size: 1em;
  text-align: center;
  font-weight: bold;
  margin-bottom: 1em;
}
.flow__item-img {
  margin-bottom: 1em;
}
.flow__item-text {
  font-size: 0.9375em;
  letter-spacing: 0.05em;
}

/* salon
======================================= */
.salon {
  background: url(../img/top/salon/salon_bg.png) no-repeat center top/contain;
}
.salon__inner {
  padding-left: 5.333%;
  padding-right: 5.333%;
}
.salon__btn {
  margin-left: auto;
  margin-bottom: 4em;
}
@media (max-width: 768px) {
  .salon__btn {
    margin-bottom: 2.5rem;
  }
}
.salon__category {
  font-family: "M PLUS 1p", sans-serif;
  font-size: 1.25em;
  font-weight: bold;
  color: #fff;
  line-height: 1;
  background-color: #030303;
  border: 2px solid #030303;
  padding: 1.225em 2em;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 4rem;
  margin-bottom: 4rem;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media (max-width: 768px) {
  .salon__category {
    font-size: 1.125em;
    margin-top: 2.5rem;
    margin-bottom: 2rem;
    padding: 1.3125rem 1.25rem;
  }
}
.salon__category::after {
  content: "";
  width: 1em;
  height: 1em;
  background: url(../img/common/icons/icon_triangle-white.svg) no-repeat center center/contain;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.salon__category.is-open {
  color: #030303;
  background-color: #fff;
}
.salon__category.is-open::after {
  background: url(../img/common/icons/icon_triangle-black.svg) no-repeat center center/contain;
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}
.salon__contents {
  display: none;
}
.salon__list {
  gap: 4em 3em;
}

/* voice
======================================= */
.voice {
  position: relative;
}
.voice::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  width: 83.333%;
  height: 100%;
  background-color: #F8F8F8;
}
@media (max-width: 768px) {
  .voice::after {
    width: 78.667%;
  }
}
.voice__title {
  margin-bottom: 7.5em;
}
@media (max-width: 768px) {
  .voice__title {
    margin-bottom: 3em;
  }
}
.voice__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4.5em 4.3%;
  margin-bottom: 4em;
}
@media (max-width: 1024px) {
  .voice__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .voice__list {
    grid-template-columns: repeat(1, 1fr);
    gap: 3em;
    margin-bottom: 3em;
  }
}
.voice__item {
  position: relative;
  background-color: #fff;
  padding: 3.5em 2em;
  -webkit-box-shadow: 0px 3px 6px 0px rgba(79, 79, 79, 0.1019607843), 0px 10px 10px 0px rgba(79, 79, 79, 0.0901960784), 0px 23px 14px 0px rgba(79, 79, 79, 0.0509803922), 0px 40px 16px 0px rgba(79, 79, 79, 0.0117647059), 0px 63px 18px 0px rgba(79, 79, 79, 0);
          box-shadow: 0px 3px 6px 0px rgba(79, 79, 79, 0.1019607843), 0px 10px 10px 0px rgba(79, 79, 79, 0.0901960784), 0px 23px 14px 0px rgba(79, 79, 79, 0.0509803922), 0px 40px 16px 0px rgba(79, 79, 79, 0.0117647059), 0px 63px 18px 0px rgba(79, 79, 79, 0);
}
@media (max-width: 768px) {
  .voice__item {
    padding: 3.5em 2em 2em;
  }
}
.voice__item-cats {
  position: absolute;
  top: -1em;
  left: -1em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 0.5em;
}
@media (max-width: 768px) {
  .voice__item-cats {
    top: 0;
    left: 0;
  }
}
.voice__item-cat {
  font-weight: bold;
  line-height: 1;
  color: #fff;
  background-color: #030303;
  padding: 0.625em;
}
.voice__item-title {
  font-family: "M PLUS 1p", sans-serif;
  font-size: 1.25em;
  font-weight: bold;
  margin-bottom: 1rem;
}
@media (max-width: 768px) {
  .voice__item-title {
    font-size: 1.125em;
    margin-bottom: 1.5rem;
  }
}
.voice__item-text {
  font-size: 1.125em;
  letter-spacing: 0.05em;
  margin-bottom: 2rem;
}
@media (max-width: 768px) {
  .voice__item-text {
    font-size: 0.9375em;
  }
}
.voice__item-info {
  display: inline-block;
  line-height: 1;
  border: 1px solid #030303;
  padding: 0.5em 1.25rem;
  border-radius: 50px;
}
@media (max-width: 768px) {
  .voice__item-info {
    font-size: 0.875em;
  }
}
.voice__btn {
  margin-left: auto;
}

/* faq
======================================= */
.faq__inner {
  padding-top: 22.5em;
}
@media (max-width: 768px) {
  .faq__inner {
    padding-top: 6em;
    padding-left: 5.333%;
    padding-right: 5.333%;
  }
}
.faq__inner::before, .faq__inner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 557px;
}
@media (max-width: 768px) {
  .faq__inner::before, .faq__inner::after {
    height: 175px;
  }
}
.faq__inner::before {
  background: url(../img/top/faq/faq_bg.jpg) no-repeat center center/cover;
}
.faq__inner::after {
  background-color: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.faq__container {
  background-color: #fff;
  padding: 5em 11.11%;
  -webkit-box-shadow: 0px 3px 6px 0px rgba(79, 79, 79, 0.1019607843), 0px 10px 10px 0px rgba(79, 79, 79, 0.0901960784), 0px 23px 14px 0px rgba(79, 79, 79, 0.0509803922), 0px 40px 16px 0px rgba(79, 79, 79, 0.0117647059), 0px 63px 18px 0px rgba(79, 79, 79, 0);
          box-shadow: 0px 3px 6px 0px rgba(79, 79, 79, 0.1019607843), 0px 10px 10px 0px rgba(79, 79, 79, 0.0901960784), 0px 23px 14px 0px rgba(79, 79, 79, 0.0509803922), 0px 40px 16px 0px rgba(79, 79, 79, 0.0117647059), 0px 63px 18px 0px rgba(79, 79, 79, 0);
}
@media (max-width: 768px) {
  .faq__container {
    padding: 3em 1.25em 4em;
  }
}
.faq__btn {
  margin-left: auto;
}

/* before_after
======================================= */
.before_after__inner {
  padding-left: 5.333%;
  padding-right: 5.333%;
}
@media (max-width: 768px) {
  .before_after__title {
    text-align: left;
    margin-bottom: 6.75em;
  }
}
.before_after__list {
  margin-bottom: 4em;
}
@media (max-width: 768px) {
  .before_after__list {
    margin-bottom: 3em;
  }
}
.before_after__btn {
  margin-left: auto;
}

/* column
======================================= */
.column {
  position: relative;
}
.column::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 50%;
  background-color: #F8F8F8;
}
@media (max-width: 768px) {
  .column::after {
    height: 92%;
  }
}
@media (max-width: 768px) {
  .column__inner {
    padding-left: 5.333%;
    padding-right: 5.333%;
  }
}
@media (max-width: 768px) {
  .column__title {
    text-align: left;
  }
}
.column__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3em 4%;
  margin-bottom: 4em;
}
@media (max-width: 1024px) {
  .column__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1em 4%;
    margin-bottom: 3em;
  }
}
.column__item a:hover .column__item-img::after {
  opacity: 1;
}
.column__item a:hover .column__item-img span {
  opacity: 1;
}
.column__item-img {
  position: relative;
  margin-bottom: 1.5em;
  position: relative;
}
.column__item-img::before {
  content: "";
  display: block;
  padding-top: 144.6%;
}
.column__item-img img, .column__item-img video, .column__item-img iframe, .column__item-img svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 768px) {
  .column__item-img::before {
    padding-top: 100%;
  }
}
.column__item-img::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.column__item-img span {
  opacity: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2em;
  font-weight: 500;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 8.25rem;
  height: 8.25rem;
  line-height: 8.25rem;
  border: 4px solid #fff;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.65);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.column__item-info {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1em;
  margin-bottom: 0.625em;
}
@media (max-width: 768px) {
  .column__item-info {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0.5em;
  }
}
.column__item-info-date {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.125em;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: #787878;
}
@media (max-width: 768px) {
  .column__item-info-date {
    font-size: 1em;
  }
}
.column__item-info-cats {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1em 0.5em;
}
.column__item-info-cat {
  border: 1px solid #030303;
  border-radius: 50px;
  padding: 0 1em;
}
@media (max-width: 768px) {
  .column__item-info-cat {
    font-size: 0.875em;
  }
}
.column__item-title {
  font-size: 1.5em;
  margin-bottom: 0.75rem;
}
@media (max-width: 768px) {
  .column__item-title {
    font-size: 0.9375em;
    margin-bottom: 0.5rem;
  }
}
@media (max-width: 768px) {
  .column__item-text {
    font-size: 0.9375em;
    letter-spacing: 0.05em;
  }
}
.column__btn {
  margin-left: auto;
}

.news {
  background-color: #2B2B2B;
  color: #fff;
}
.news__inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media (max-width: 1024px) {
  .news__inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-left: 5.333%;
    padding-right: 5.333%;
  }
}
@media (max-width: 768px) {
  .news__title {
    text-align: left;
  }
}
.news__container {
  width: 80%;
  max-width: 970px;
}
@media (max-width: 1024px) {
  .news__container {
    width: 100%;
  }
}
.news__list {
  margin-bottom: 4em;
}
@media (max-width: 768px) {
  .news__list {
    margin-bottom: 3em;
  }
}
.news__item a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 3.125vw;
  color: #fff;
  padding: 2em 7.375em 2em 0;
  border-bottom: 1px solid #fff;
  position: relative;
}
@media (max-width: 768px) {
  .news__item a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0.5rem;
    padding: 1em 1em 1em 0;
  }
}
.news__item a:hover {
  color: #787878;
}
.news__item a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 1em;
  height: 1em;
  background: url(../img/common/icons/icon_triangle-white.svg) no-repeat center center/contain;
}
.news__item-date {
  font-size: 1.125em;
  color: #787878;
}
@media (max-width: 768px) {
  .news__item-date {
    font-size: 0.875em;
  }
}
.news__item-title {
  font-size: 1.125em;
  font-weight: 400;
}
@media (max-width: 768px) {
  .news__item-title {
    font-size: 0.9375em;
  }
}
.news__btn {
  margin-left: auto;
}
.news__btn a {
  color: #fff;
  border-bottom: 2px solid #fff;
}
.news__btn a::after {
  background: url(../img/common/icons/icon_arrow-white.svg) no-repeat center center/contain;
}

.columns_2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px) {
  .columns_2 {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* products
======================================= */
.products {
  background-color: #424242;
  text-align: center;
  color: #fff;
}
.products__inner {
  padding-top: 4.5em;
  padding-bottom: 3.5em;
}
@media (max-width: 768px) {
  .products__inner {
    padding-top: 2.5em;
    padding-bottom: 2.5em;
  }
}
.products__title {
  margin-bottom: 1.25rem;
}
.products__title-jp {
  font-size: 1em;
  margin-bottom: 6px;
}
.products__title-en {
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0;
}
.products__text {
  font-size: 1.125em;
  letter-spacing: 0.05em;
  margin-bottom: 3.5em;
}
@media (max-width: 768px) {
  .products__text {
    font-size: 0.9375em;
    margin-bottom: 1.5rem;
  }
}
.products__btn a {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.125em;
  font-weight: 500;
  color: #fff;
  display: block;
  line-height: calc(5rem - 4px);
  width: 5rem;
  height: 5rem;
  border: 2px solid #fff;
  border-radius: 50%;
  margin: auto;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.products__btn a:hover {
  background-color: #fff;
  color: #030303;
}

/* join
======================================= */
.join {
  background-color: #030303;
  text-align: center;
  color: #fff;
}
.join__inner {
  padding-top: 4.5em;
  padding-bottom: 3.5em;
}
@media (max-width: 768px) {
  .join__inner {
    padding-top: 2.5em;
    padding-bottom: 2.5em;
  }
}
.join__title {
  margin-bottom: 1.25rem;
}
.join__title-jp {
  font-size: 1em;
  margin-bottom: 6px;
}
.join__title-en {
  line-height: 1.2;
  margin-bottom: 0;
}
.join__text {
  font-size: 1.125em;
  letter-spacing: 0.05em;
  margin-bottom: 3.5em;
}
@media (max-width: 768px) {
  .join__text {
    font-size: 0.9375em;
    margin-bottom: 1.5rem;
  }
}
.join__btn a {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.125em;
  font-weight: 500;
  color: #fff;
  display: block;
  line-height: calc(5rem - 4px);
  width: 5rem;
  height: 5rem;
  border: 2px solid #fff;
  border-radius: 50%;
  margin: auto;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.join__btn a:hover {
  background-color: #fff;
  color: #030303;
}