/* ==========================================================================
              MV
========================================================================== */

.main-ts {
  font-size: inherit;
  position: relative;
  padding-right: 2.3rem;
  display: inline-block;
line-height: 1;
}

.tm {
  position: absolute;
  right: 0;
  font-size: 14px!important;
  font-weight: 700;
}

#head_logo {
  width: 280px;
}

#mv {
  position: relative;
  gap: 0;
  align-items: stretch;
}

#mv:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: calc(100% - 5rem);
  background: url(../images/mv_bg.png) no-repeat center center / cover;
}

#mv .flex-l:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 130%;
  height: 100%;
  background: var(--sub);
}

#mv .flex-l {
  width: 30%;
  padding: 7rem 2rem 7rem 5rem;
  position: relative;
  margin-top: 5rem;
  margin-left: 5rem;
  display: flex;
  align-items: center;
}

#mv .flex-l div {
  width: 85%;
  text-align: center;
  z-index: 5;
  margin: 0 auto;
}

#mv .flex-r {
  width: calc(70% - 5rem);
  position: relative;
  clip-path: polygon(10% 0, 100% 0%, 100% 100%, 0% 100%);
}

#mv .flex-r img {
  height: 100%;
  object-fit: cover;
}

#mv_mainbox {
  position: absolute;
  left: 10%;
  bottom: 25%;
  color: #7E74E7;
  text-align: center;
}

#mv_mainbox h1 {
  font-size: calc(50 / 1600 * 100vw);
  margin-bottom: 2rem;
  line-height: 1.3;
}

#mv_mainbox h2 {
  font-size: calc(20 / 1600 * 100vw);
}

#mv_en {
  width: 100%;
  text-align: center;
  margin: 10rem 0;
  position: relative;
  display: inline-block;
}

#mv_en::before, #mv_en::after {
  content: "";
  display: inline-block;
  background: #797D86;
  width: 1px;
  position: absolute;
  height: 50px;
}

#mv_en::before {
  left: 7rem;
  transform: rotate(45deg);
  bottom: -5rem;
}

#mv_en::after {
  right: 7rem;
  transform: rotate(45deg);
  top: -5rem;
}

#mv .flex-l div ul {
  color: var(--main-r);
  text-align: left;
  margin-top: 5rem;
}

#movie {
  position: relative;
}

#movie:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url(../images/movie_bg.png) no-repeat center center / cover;
}

#movie video {
  aspect-ratio: 16 / 9;
  max-width: 960px;
  width: 100%;
}

#movie_inner {
  text-align: center;
}

#trouble {
  margin-bottom: calc(10rem + 45px);
}

#trouble h4 {
  margin-bottom: 5rem;
  font-size: 2.2rem;
  position: relative;
  background: #E9E9E9;
  padding: 2rem 4rem;
  text-align: center;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  display: inline-block;
}

#trouble h4:after {
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  pointer-events: none;
  position: absolute;
  border-color: rgba(233, 233, 233, 0);
  border-top-width: 15px;
  border-bottom-width: 15px;
  border-left-width: 15px;
  border-right-width: 15px;
  margin-left: -15px;
  border-top-color: #E9E9E9;
  top: 100%;
  left: 50%;
}

.trouble-item {
  width: calc(100% / 4 - 3.75rem);
  display: flex;
  flex-direction: column;
}

.trouble-inner {
  flex-grow: 1;
}

.trouble-item ul {
  background: var(--sub);
  color: var(--main-r);
  padding: 2rem;
  height: 100%;
}

#mv .flex-l div ul li, .trouble-item ul li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 1rem;
}

#mv .flex-l div ul li {
  font-size: 1.8rem;
}

#mv .flex-l div ul li:last-child, .trouble-item ul li:last-child {
  margin-bottom: 0;
}

#mv .flex-l div ul li:before, .trouble-item ul li:before {
  content: "";
  background: url(../images/check.svg) no-repeat center center / contain;
  position: absolute;
  top: 5px;
  left: 0;
  width: 1.5rem;
  height: 1.5rem;
}

.trouble-item ul li:before {
  top: 2px;
}

.trouble-box {
  align-items: initial;
}

.num {
  width: 60px!important;
  display: inline-block!important;
  margin-right: 2rem;
}

.num-box h4 {
  font-size: 3rem;
  display: inline-block;
  vertical-align: top;
  line-height: 1;
}

#efficacy {
  background: url(../images/efficacy.png) no-repeat center center / cover;
  position: relative;
  padding-top: calc(10rem + 45px);
}

#presented {
  width: 300px;
  height: 90px;
  object-fit: cover;
  position: absolute;
  top: -45px;
  left: 50%;
  transform: translateX(-50%);
}

.efficacy-box {
  margin-bottom: 5rem;
}

.efficacy-box:last-child {
  margin-bottom: 0;
}

.efficacy-box ul {
  display: flex;
  gap: 1rem 2rem;
  margin: 2rem 0 3rem 0;
  flex-wrap: wrap;
}

.efficacy-box ul li {
  background: #54D8ED;
  background: -webkit-linear-gradient(0deg, #54D8ED, #7E74E7);
  color: var(--main-r);
  line-height: 1;
  padding: 5px;
  display: inline-block;
}

#antiageing {
  background: url(../images/antiageing.png) no-repeat center center / cover;
  z-index: -1;
  position: relative;
}

#exosome {
  background: url(../images/exosome.png) no-repeat center center / cover;
}

.antiageing-box {
  align-items: flex-start;
}

.antiageing-box h4 {
margin-bottom: 5rem;
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 1rem;
    justify-content: center;
}

.antiageing-box h4 span{
	font-size:inherit;
}

.antiageing-box h5 {
  margin-bottom: 3rem;
  text-align: left;
}

.antiageing-box .flex-l {
  position: relative;
  padding-left: 3rem;
  padding-bottom: 3rem;
}

.antiageing-box .flex-l:before {
  content: "";
  background: var(--sub);
  position: absolute;
  width: 80%;
  height: 80%;
  bottom: 0;
  left: 0;
  z-index: -1;
}

#exosome_content {
  align-items: initial;
}

#exosome .sec-title {
  background: var(--sub);
  color: var(--main-r);
  display: inline-block;
  line-height: 1;
  padding: 1rem;
}

#exosome h4 {
  font-size: 1.8rem;
}

#exosome .bs1 {
  margin-top: 3rem;
}

.exosome-item {
  width: calc(100% / 2 - 2.5rem);
  background: var(--sub);
  color: var(--main-r);
  padding: 3rem;
  position: relative;
  padding-top: calc(3rem + 100px);
  margin-top: 100px;
}

.exosome-img {
  position: absolute;
  width: calc(100% - 6rem)!important;
  height: 200px;
  object-fit: cover;
  top: -100px;
  left: 50%;
  transform: translatex(-50%);
}

#voice {
  background: url(../images/voice-bg.png) no-repeat center center / cover;
}

.voice-item {
  text-align: center;
  width: 33.333333%;
  border-right: 1px solid #797D86;
}

#flow {
  padding-bottom: 0;
}

#flow h3, #cta_content h3 {
  position: relative;
}

#flow h3:before, #cta_content h3:before {
  content: "";
  position: absolute;
  width: 4rem;
  height: 3px;
  bottom: -2rem;
  left: 50%;
  transform: translatex(-50%);
  background: #7E74E7;
  background: -webkit-linear-gradient(0deg, #54D8ED, #7E74E7);
}

.voice-item h4, .flow-item h4 {
  color: var(--accent);
  margin: 2rem 0;
  font-size: 1.8rem;
}

.voice-item:last-child {
  border-right: initial;
}

.voice-box {
  gap: 0;
}

.voice-item img {
  width: 150px!important;
  background: var(--main-r);
  border-radius: 50%;
  border: 2px solid var(--accent)!important;
  display: inline-block!important;
}

.flow-box {
  align-items: flex-start;
}

.flow-item {
  width: calc(100% / 4 - 3.75rem);
}

.flow-img {
  background: #07395D;
  background: -webkit-linear-gradient(90deg, #07395D, #1D0A3B);
  text-align: center;
  color: var(--main-r);
  padding: 5px;
}

.flow-img p {
  margin-top: 5px;
}

.flow-item h4 {
  text-align: center;
}

.flow-item .btn-1 {
  margin-top: 2rem;
}

.flow-item .btn-1 a {
  width: 100%;
}

#message_inner {
  background: url(../images/message.png) no-repeat center center / cover;
  color: var(--main-r);
}

#message p {
  font-size: 2.2rem;
  font-family: var(--tf);
  line-height: 3;
}

@media screen and (max-width:1400px) {
  #trouble {
    margin-top: 0;
  }
}

@media screen and (max-width:1200px) {
  #mv .flex-l div {
    width: 100%;
  }
  #mv .flex-l {
    padding: 7rem 2rem;
  }
  .trouble-item {
    width: calc(100% / 2 - 2.5rem);
  }
  .trouble-item img {
    height: 250px;
    object-fit: cover;
    object-position: top;
  }
  .trouble-item:nth-child(3) img {
    object-position: bottom;
  }
}

@media screen and (max-width:960px) {
  #mv {
    flex-direction: column-reverse;
    background: var(--sub);
  }
  #mv:before {
    display: none;
  }
  #mv_mainbox h1 {
    font-size: calc(45 / 960 * 100vw);
  }
  #mv_mainbox h2 {
    font-size: calc(20 / 960 * 100vw);
  }
  #mv_mainbox {
    left: 50px;
    bottom: 20%;
  }
  #mv .flex-l {
    width: 100%;
    padding: 0 5rem 5rem 5rem;
    margin: 0;
    display: block;
  }
  #mv .flex-r {
    width: 100%;
    clip-path: initial;
  }
  #mv .flex-l:before {
    width: 100%;
    z-index: -1;
  }
  #mv_en {
    margin: 7rem 0;
  }
  #mv .flex-l div img, #mv .flex-l div ul {
    max-width: 70%;
    margin-right: auto;
    margin-left: auto;
  }
  #mv .flex-r img {
    clip-path: polygon(10% 0, 100% 0%, 100% 100%, 0% 100%);
  }
  #exosome h4 {
    font-size: 2.2rem;
  }
  .main-ts {
    padding-right: 2rem;
  }
  .tm {
    font-size: 14px!important;
  }
  .antiageing-box .flex-l {
    width: 80%;
    margin: 0 auto;
  }
  .antiageing-box .flex-r {
    width: 100%;
  }
  .antiageing-box h5 {
    text-align: left;
  }
  .num-box h4 {
    font-size: 2.5rem;
  }
  .antiageing-box h4 {
    margin-top: 2rem;
  }
  .voice-box {
    align-items: flex-start;
  }
  .voice-item p {
    padding: 0 2rem;
    text-align: left;
  }
  .voice-item p br {
    display: none;
  }
  .flow-item {
    width: calc(100% / 4 - 3.75rem);
  }
  .flow-item {
    width: calc(100% / 4 - 2.26666666rem);
  }
  #message p {
    font-size: 2rem;
    line-height: 2;
  }
  #head_logo {
    width: 250px;
  }
}

@media screen and (max-width:767px) {
  .voice-item {
    width: 100%;
    border-right: initial;
    position: relative;
  }
  .voice-item:before {
    content: "";
    position: absolute;
    width: 60%;
    height: 3px;
    bottom: -3rem;
    left: 50%;
    transform: translatex(-50%);
    border-bottom: 1px dotted #797D86;
  }
  .voice-item:last-child:before {
    border-bottom: initial;
  }
  #head_logo {
    width: 130px;
  }
  #mv_mainbox {
    left: 15px;
    bottom: 18%;
  }
  #mv_mainbox h1 {
    font-size: calc(45 / 767 * 100vw);
    margin-bottom: 5px;
  }
  #mv_mainbox h2 {
    font-size: 12px;
  }
  #mv_en {
    margin: 5rem 0;
    font-size: 2.5rem;
  }
  #mv .flex-l div img, #mv .flex-l div ul {
    max-width: 80%;
  }
  #mv .flex-l div ul {
    margin-top: 3rem;
  }
  #mv .flex-l {
    padding: 0 2rem 3rem 2rem;
  }
  #mv .flex-l div ul li {
    font-size: 14px;
  }
  #movie:before {
    top: -10rem;
  }
  #trouble h4 {
    font-size: 1.6rem;
    margin-bottom: 3rem;
  }
  #trouble .title-wrap {
    margin-bottom: 2rem;
  }
  .trouble-item {
    width: 100%;
    display: flex;
    background: var(--sub);
    align-items: center;
    flex-direction: initial;
  }
  .trouble-inner {
    flex-grow: initial;
  }
  .trouble-box {
    align-items: center;
  }
  .trouble-item:nth-child(2), .trouble-item:nth-child(4) {
    flex-direction: row-reverse;
  }
  .trouble-item img {
    width: 45%!important;
    height: 150px;
  }
  .trouble-item ul {
    width: 55%;
    background: initial;
    padding: 1rem;
  }
  .main-ts {
    padding-right: 2rem;
  }
  .tm {
    font-size: 12px!important;
  }
  #efficacy {
    padding-top: calc(5rem + 45px);
  }
  .efficacy-box ul {
    justify-content: center;
    margin: 3rem 0;
    gap: 1rem;
  }
  .num-box {
    text-align: center;
  }
  #efficacy .num-box h4 {
    font-size: 2.5rem;
    margin: 1rem 0;
  }
  #efficacy .num {
    display: block!important;
    margin: 0 auto;
    width: 80px!important;
  }
  .antiageing-box .flex-l {
    padding-left: 2rem;
    padding-bottom: 2rem;
  }
  .antiageing-box h5 {
    font-size: 6vw;
  }
  .antiageing-box h4 {
    font-size: 8vw;
  }
  .antiageing-box h4 {
    margin-bottom: 4rem;
  }
  #exosome .sec-title {
    width: 100%;
    padding: 2rem 1rem;
    line-height: 1.3;
  }
  #exosome h4 {
    font-size: 6vw;
    text-align: left;
  }
  .exosome-item {
    width: 100%;
    padding: 2rem;
    padding-top: calc(3rem + 60px);
    margin-top: 60px;
  }
  .exosome-img {
    width: calc(100% - 3rem)!important;
    height: 120px;
    top: -60px;
  }
  #exosome .num-box {
    display: flex;
    margin-bottom: 2rem;
  }
  #exosome .num-box .num {
    margin-right: 1rem;
  }
  #exosome .num-box h4 {
    line-height: 1.3;
  }
  #exosome .title-wrap {
    margin-bottom: 3rem;
  }
  #exosome_content {
    gap: 5rem;
  }
  .voice-item p {
    padding: 0 2rem;
    text-align: center;
  }
  .voice-box {
    gap: 6rem;
  }
  .voice-item p br {
    display: block;
  }
  .flow-item {
    width: 80%;
    margin: 0 auto;
  }
  #flow {
    background: url(../images/efficacy.png) no-repeat center center / cover;
    padding-bottom: 7rem;
  }
  #message p {
    font-size: 5vw;
  }
}

@media screen and (max-width:350px) {
  .trouble-item img {
    height: 200px;
  }
  #efficacy .num-box h4 {
    font-size: 2rem;
  }
  #trouble h4 {
    font-size: 1.4rem;
    padding: 1.5rem 2rem 2rem 2rem;
  }
  #presented {
    width: 90%;
    object-fit: contain;
  }
  #efficacy .num {
    width: 60px!important;
  }
  .efficacy-box ul li {
    font-size: 10px;
  }
  .antiageing-box h4 {
    margin-bottom: 3rem;
    margin-top: 0;
  }
  #exosome h4 {
    font-size: 5vw;
  }
  .voice-item h4, .flow-item h4 {
    margin: 1.5rem 0;
    font-size: 1.6rem;
  }
  .voice-item p {
    padding: 0;
  }
}