@import "./common.css";

.about-header {
  width: 100%;
  overflow-y: auto;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.about-header::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: center / cover no-repeat url(../img/about/about_header_bg.jpg);
  z-index: -1;
}
.about-header.hide::before {
  opacity: 0;
  visibility: hidden;
}
.about-header-wrap {
  height: 400vh;
}
.about-kv-text-inner {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 390px;
}
.about-kv-text1,
.about-kv-text2 {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
}
.about-kv-text2 {
  display: none;
}
.our-mission-en {
  font-size: 3rem;
}
.our-mission {
  font-size: 7.5rem;
  margin-bottom: 50px;
}
.our-mission .small {
  font-size: 70%;
}
.about-kv-total-achievement {
  font-size: 7.5rem;
  margin-bottom: 45px;
}
.about-kv-achievement-wrap {
  display: flex;
}
.about-kv-achievement {
  margin-left: 40px;
}
.about-kv-achievement-item {
  font-size: 3.75rem;
}
.about-kv-achievement-num {
  font-size: 8.5rem;
}
.about-kv-achievement-num .large {
  font-size: 200%;
  line-height: 1;
}

main {
  position: relative;
  z-index: 1;
  background: #212121;
}

/* トレンドを作る */
.make-trend-title {
  background: linear-gradient(179.59deg, #e4e4e4 -73.65%, #999999 363.22%);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.make-trend-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
}
.make-trend-title-wrap {
  width: 750px;
}
.make-trend-img {
  width: calc(100% - 770px);
  max-width: 50%;
}
.make-trend-title::after {
  content: "";
  height: 2px;
  width: 340px;
  background: #d9d8d8;
  position: absolute;
  left: 0;
  top: 22px;
}
.make-trend-denial-line {
  font-size: 3rem;
}
.make-trend-title-text {
  font-size: 10rem;
  letter-spacing: -0.06em;
  margin-left: -0.1em;
}
.make-trend-title-text .large {
  font-size: 125%;
  letter-spacing: 0.1em;
  line-height: 1;
  padding-left: 0.1em;
}
.make-trend {
  background: center / cover no-repeat url(../img/about/make_trend_bg.jpg);
  padding: 150px 0 calc(410px + 32vw);
}
.make-trend-text {
  color: #474747;
  font-size: 2.4rem;
  padding-top: 80px;
}

/* なぜ今TikTokなのか */
.why-tiktok {
  margin-top: calc(-210px - 32vw);
}
.why-tiktok-title {
  background: linear-gradient(112.48deg, #02f7f8 2.9%, #f73736 77.8%);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
  font-size: 15rem;
  letter-spacing: 0.1em;
  line-height: 1;
}
.why-tiktok-title-wrap {
  padding-left: 40px;
}
.why-tiktok-subtitle {
  background: linear-gradient(179.59deg, #e4e4e4 -73.65%, #999999 363.22%);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  font-size: 3.75rem;
  letter-spacing: 0.1em;
}
.why-tiktok-wrap {
  background: center / 100% no-repeat url(../img/about/why_tiktok_bg02.png),
    center bottom / 100% no-repeat url(../img/about/why_tiktok_bg03.png),
    center 69vw / 100% no-repeat url(../img/about/why_tiktok_bg01.png),
    right top / cover no-repeat url(../img/about/why_tiktok.png);
  padding: 14vw 0 150px;
}
.why-tiktok-content-wrap {
  height: 100%;
}
.why-tiktok-content-wrap .bottom-sticky-content {
  z-index: 10;
}
.why-tiktok-content-num {
  position: relative;
}
.why-tiktok-content-num::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  top: 0%;
}
.why-tiktok-content-inner:first-of-type .why-tiktok-content-num {
  aspect-ratio: 0.97;
  width: 15%;
}
.why-tiktok-content-inner:first-of-type .why-tiktok-content-num::after {
  left: 0;
  background-image: url(../img/about/01.png);
}
.why-tiktok-content-inner:nth-of-type(2) .why-tiktok-content-num {
  aspect-ratio: 1.4;
  width: 22%;
}
.why-tiktok-content-inner:nth-of-type(2) .why-tiktok-content-num::after {
  right: 0;
  background-image: url(../img/about/02.png);
}
.why-tiktok-content-inner:last-of-type .why-tiktok-content-num {
  aspect-ratio: 0.97;
  width: 20%;
}
.why-tiktok-content-inner:last-of-type .why-tiktok-content-num::after {
  left: 0;
  background-image: url(../img/about/03.png);
}
.why-tiktok-content-num.num-right {
  margin-left: auto;
}
.why-tiktok-content-text-inner {
  color: #fff;
}
.why-tiktok-content {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  z-index: 10;
  transform: translateY(-10vw);
}
.why-tiktok-content h3 {
  font-size: 6rem;
  margin-bottom: 60px;
}
.why-tiktok-content-text-inner p {
  font-size: 2.7rem;
}
.why-tiktok-content-text {
  width: 630px;
}
.why-tiktok-content-img {
  width: calc(100% - 670px);
  max-width: 50%;
}
.why-tiktok-content-inner:first-child .why-tiktok-content-img {
  position: relative;
}
.why-tiktok-content-inner:first-child .why-tiktok-content-img::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 46px rgba(31, 31, 34, 0.2), 0px 0px 58px rgba(31, 31, 34, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 1vw;
  position: absolute;
  z-index: -1;
}
.why-tiktok-content-inner:nth-child(2) .why-tiktok-content-img img {
  width: 50%;
  margin: auto;
  -webkit-filter: drop-shadow(60px 200px 100px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(60px 200px 100px rgba(0, 0, 0, 0.2));
}
.why-tiktok-content-inner:nth-child(2) .why-tiktok-content {
  transform: translateY(-15vw);
}
.why-tiktok-content-inner:last-of-type .why-tiktok-content {
  transform: translateY(-15vw);
}
.why-tiktok-content-inner:last-of-type .why-tiktok-content-img {
  margin-top: -10%;
}
.why-tiktok-content-inner:not(:last-child) {
  margin-bottom: 30vh;
}

/* ノートPC */
@media screen and (max-width: 1279px) {
  .about-kv-total-achievement {
    font-size: 5rem;
  }
  .about-kv-achievement-item {
    font-size: 2.5rem;
  }
  .about-kv-achievement-num {
    font-size: 5.5rem;
  }
  .make-trend-denial-line {
    font-size: 3rem;
  }
  .make-trend-title-wrap::after {
    height: 2px;
    width: 340px;
    top: 25px;
  }
  .make-trend-title-text {
    font-size: 10rem;
  }
  .make-trend-title-wrap {
    width: 470px;
  }
  .make-trend-img {
    width: calc(100% - 490px);
  }
  .make-trend-title::after {
    width: 345px;
    top: 22px;
  }
  .make-trend-text {
    font-size: 2rem;
  }
  .why-tiktok-title {
    font-size: 8rem;
  }
  .why-tiktok-content h3 {
    font-size: 4rem;
  }
  .why-tiktok-content-text-inner p {
    font-size: 1.4rem;
  }
  .why-tiktok-content-text {
    width: 370px;
  }

  .why-tiktok-content-img {
    width: calc(100% - 390px);
  }
}

/* タブレット */
@media screen and (max-width: 959px) {
  .make-trend-denial-line {
    font-size: 2.8rem;
  }
  .make-trend-title::after {
    width: 320px;
    top: 21px;
  }
  .make-trend-title-text {
    font-size: 8rem;
  }
  .make-trend-text {
    font-size: 1.8rem;
  }
  .make-trend-title-wrap {
    width: 380px;
  }
  .make-trend-img {
    width: calc(100% - 400px);
  }
  .why-tiktok-content h3 {
    margin-bottom: 30px;
  }
  .why-tiktok-content-text-inner p {
    margin-bottom: 50px;
  }
}

/* スマホ */
@media screen and (max-width: 767px) {
  .about-header::before {
    background-image: url(../img/about/sp_about_header_bg.jpg);
  }
  .our-mission-en {
    font-size: 1.3rem;
    margin-bottom: 33px;
  }
  .our-mission {
    font-size: 3.3rem;
  }
  .about-kv-total-achievement {
    font-size: 2.55rem;
    margin-bottom: 15px;
  }
  .about-kv-achievement {
    margin-left: 15px;
  }
  .about-kv-achievement-item {
    font-size: 1.25rem;
    margin-bottom: 7px;
  }
  .about-kv-achievement-num {
    font-size: 2.9rem;
  }
  .make-trend-title-wrap {
    width: 100%;
  }
  .make-trend-title {
    margin-top: -85px;
  }
  .make-trend-denial-line {
    font-size: 1.75rem;
  }
  .make-trend-title::after {
    width: 205px;
    top: 12px;
    height: 1px;
  }
  .make-trend-title-text {
    font-size: 5.05rem;
  }
  .make-trend-text {
    font-size: 1.6rem;
    padding-top: 0;
  }
  .why-tiktok-title-wrap {
    padding-left: 15px;
  }
  .why-tiktok-title {
    font-size: 4.45rem;
  }
  .why-tiktok-subtitle {
    font-size: 1.1rem;
  }
  .make-trend {
    padding: 20px 0 calc(91px + 32vw);
  }
  .why-tiktok {
    margin-top: calc(-61px - 32vw);
  }
  .why-tiktok-content h3 {
    font-size: 3rem;
    position: relative;
    z-index: 10;
  }
  .why-tiktok-content-num img {
    transform: translateY(10%);
  }
  .why-tiktok-content-text {
    width: 100%;
  }
  .why-tiktok-content-text-inner p {
    padding-left: 15px;
    margin-bottom: 0;
    margin-top: 30px;
  }
  .why-tiktok-content {
    transform: translateY(-5vw);
  }
  .why-tiktok-content-inner:last-of-type .why-tiktok-content {
    transform: translateY(-25vw);
  }
  .why-tiktok-content-inner:first-of-type .why-tiktok-content-num {
    width: 25%;
  }
  .why-tiktok-content-inner:nth-of-type(2) .why-tiktok-content-num {
    width: 40%;
  }
  .why-tiktok-content-inner:nth-of-type(2) .why-tiktok-content-num img {
    transform: translateY(40%);
  }
  .why-tiktok-content-inner:nth-of-type(2) .why-tiktok-content h3 {
    text-align: right;
    margin-bottom: 0;
  }
  .why-tiktok-content-inner:first-child .sp-why-tiktok-content-img {
    position: relative;
  }
  .why-tiktok-content-inner:first-child .sp-why-tiktok-content-img::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    box-shadow: -8.07151px 8.07151px 16.143px rgba(31, 31, 34, 0.2),
      8.07151px -8.07151px 16.143px rgba(31, 31, 34, 0.2),
      -8.07151px -8.07151px 16.143px rgba(61, 63, 68, 0.9),
      8.07151px 8.07151px 20.3542px rgba(31, 31, 34, 0.9),
      inset 0.350935px 0.350935px 11.2299px rgba(61, 63, 68, 0.3),
      inset -0.350935px -0.350935px 0.70187px rgba(31, 31, 34, 0.5);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 3vw;
    position: absolute;
    z-index: -1;
  }
  .why-tiktok-content-inner:nth-child(2) .sp-why-tiktok-content-img {
    width: 50%;
    margin: auto;
    transform: translateY(-5%);
    -webkit-filter: drop-shadow(37.6093px 108.39px 32.2366px rgba(0, 0, 0, 0.01))
      drop-shadow(24.0606px 69.3787px 29.4334px rgba(0, 0, 0, 0.06))
      drop-shadow(13.5487px 39.0109px 24.7614px rgba(0, 0, 0, 0.2))
      drop-shadow(6.07356px 17.2863px 18.4543px rgba(0, 0, 0, 0.34))
      drop-shadow(1.40159px 4.43837px 10.0447px rgba(0, 0, 0, 0.39));
    filter: drop-shadow(37.6093px 108.39px 32.2366px rgba(0, 0, 0, 0.01))
      drop-shadow(24.0606px 69.3787px 29.4334px rgba(0, 0, 0, 0.06))
      drop-shadow(13.5487px 39.0109px 24.7614px rgba(0, 0, 0, 0.2))
      drop-shadow(6.07356px 17.2863px 18.4543px rgba(0, 0, 0, 0.34))
      drop-shadow(1.40159px 4.43837px 10.0447px rgba(0, 0, 0, 0.39));
  }
  .why-tiktok-content-inner:last-of-type .why-tiktok-content-num {
    width: 35%;
  }
  .why-tiktok-content-inner:last-of-type .why-tiktok-content-num img {
    transform: translateY(37%);
    margin-top: 100%;
  }
  .why-tiktok-content-inner:last-of-type .why-tiktok-content h3 {
    text-align: center;
  }
  .why-tiktok-content-inner:last-of-type .sp-why-tiktok-content-img {
    width: 70%;
    margin: 0 auto 30px;
  }
}