@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap");
.test-wrapper {
  min-width: 1280px;
}
@media screen and (max-width: 768px) {
  .test-wrapper {
    min-width: 0;
  }
}

.dummy-header {
  position: relative;
  width: 100%;
  height: 150px;
  background: url("/resources/images/pc/liposome-science/dummy_header.png") top center no-repeat #000;
}
@media screen and (max-width: 768px) {
  .dummy-header {
    background: url("/resources/images/pc/liposome-science/dummy_header_sp.png") top center no-repeat #000;
    height: 58px;
    background-size: contain;
  }
}

.dummy-footer {
  position: relative;
  width: 100%;
  height: 1420px;
  background: url("/resources/images/pc/liposome-science/dummy_footer.png") top center no-repeat #fff;
}
@media screen and (max-width: 768px) {
  .dummy-footer {
    background: url("/resources/images/pc/liposome-science/dummy_footer_sp.png") top center no-repeat #000;
    width: 100%;
    height: 314.2666666667vw;
    background-size: contain;
  }
}

.wrapper:after{
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 258px;
  background: #ffffff;
  z-index: 1;
}

#cellfate-labo{
  position: relative;
  background: #101128;
  color: #ffffff;
  width: 100%;
  line-height: 1.6;
  font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  letter-spacing: 0em;
  font-size: 16px;
  font-weight: 400;
  overflow: hidden;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  /*z-index: -4;*/
  z-index: 1;
}
#cellfate-labo:after{
  content: "";
  position: absolute;
  top: 0;
  height: 140px;
  width: 100%;
  background: linear-gradient(rgba(16, 17, 40, 100) 0%, rgba(16, 17, 40, 0) 100%);
}
.sec-main-outline{
  position: relative;
}
.sec-main-outline .sec-main-ttl{
  display: flex;
  align-items: center;
  height: 100vh;
  opacity: 0;
}
.sec-main-outline .sec-main-ttl h1{
  font-size: 3.6em;
  line-height: 1.65;
  letter-spacing: 0.065em;
  font-weight: lighter;
  padding-bottom: 3em;
  width: 900px;
  margin: 0 auto;
}
.sec-main-outline nav{
  position: absolute;
  display: flex;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  border-top: 1px #5C5E7A solid;
  border-bottom: 1px #464756 solid;
  background: linear-gradient(rgba(152, 167, 250, 0.25) 0%, rgba(144, 126, 255, 0) 100%);
  opacity: 0;
}
.sec-main-outline nav ul{
  display: flex;
  flex-wrap:wrap;
}
.sec-main-outline nav ul li{
  display:flex;
  height: 78px;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  padding: 0 30px 0 40px;
}
.sec-main-outline nav ul li:hover{
  cursor: pointer;
}
.sec-main-outline nav ul li:after{
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  height: 32px;
  right: 0;
  top: 50%;
  transform: translate(0, -16px);
  background: linear-gradient(#fff 0%, rgba(255, 255, 255, 0.5) 100%);
  opacity: 0.5;
}
.sec-main-outline nav ul li:last-child:after{
  display: none;
}
.sec-main-outline nav ul li p{
  position: relative;
  font-size: 0.8em;
  padding: 0 30px 0 0;
  transition: all .4s cubic-bezier(0.33, 1, 0.68, 1);
}
.sec-main-outline nav ul li:hover p{
  opacity: 0.5;
}
.sec-main-outline nav ul li p:after{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  width: 20px;
  height: 20px;
  background-image: url(/resources/images/pc/cellfate/img_cellfate-labo_arrow.png);
  background-size: 100%;
  transform: translate(0, -10px);
}
.sec-main-outline .sec-main-ttl{
  display: flex;
  align-items: center;
  padding: 0 30px;
  height: 100vh;
  opacity: 0;
}

/* sec-main-bg */
.sec-main-bg{
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: -3;
}
.sec-main-bg-light,
.sec-main-bg-dark{
  position: absolute;
  width: 100%;
  height: 100vh;
  bottom: 0;
}
/* sec-main-bg-light-item */
.sec-main-bg-light-item{
  position: absolute;
  margin: auto;
  opacity: 0;
}
.sec-main-bg-light-item:nth-child(12) {
  inset: auto 0 -20vw -52vw;
  height: 40vw;
  width: 40vw;
  background: url(/resources/images/pc/cellfate/mv_light_cell_01.png) center / cover no-repeat;
}
.sec-main-bg-light-item:nth-child(11) {
  inset: auto 0 -15vw -13vw;
  height: 38vw;
  width: 38vw;
  background: url(/resources/images/pc/cellfate/mv_light_cell_02.png) center/cover no-repeat;
}
.sec-main-bg-light-item:nth-child(10) {
  inset: auto 0 -4vw 15vw;
  height: 26vw;
  width: 26vw;
  background: url(/resources/images/pc/cellfate/mv_light_cell_03.png) center/cover no-repeat;
}
.sec-main-bg-light-item:nth-child(9) {
  inset: auto 0 5vw 30vw;
  height: 20vw;
  width: 20vw;
  background: url(/resources/images/pc/cellfate/mv_light_cell_04.png) center/cover no-repeat;
}
.sec-main-bg-light-item:nth-child(8) {
  inset: auto 0 12vw 39vw;
  height: 16vw;
  width: 16vw;
  background: url(/resources/images/pc/cellfate/mv_light_cell_05.png) center/cover no-repeat;
}
.sec-main-bg-light-item:nth-child(7) {
  inset: auto 0 18.5vw 46.5vw;
  height: 13.5vw;
  width: 13.5vw;
  background: url(/resources/images/pc/cellfate/mv_light_cell_06.png) center/cover no-repeat;
}
.sec-main-bg-light-item:nth-child(6) {
  inset: auto 0 25vw 52vw;
  height: 12vw;
  width: 12vw;
  background: url(/resources/images/pc/cellfate/mv_light_cell_07.png) center/cover no-repeat;
}
.sec-main-bg-light-item:nth-child(5) {
  inset: auto 0 31vw 54vw;
  height: 12vw;
  width: 12vw;
  background: url(/resources/images/pc/cellfate/mv_light_cell_08.png) center/cover no-repeat;
}
.sec-main-bg-light-item:nth-child(4) {
  inset: auto 0 39vw 54vw;
  height: 8vw;
  width: 8vw;
  background: url(/resources/images/pc/cellfate/mv_light_cell_09.png) center/cover no-repeat;
}
.sec-main-bg-light-item:nth-child(3) {
  inset: auto 0 42.5vw 52vw;
  height: 12vw;
  width: 12vw;
  background: url(/resources/images/pc/cellfate/mv_light_cell_10.png) center/cover no-repeat;
}
.sec-main-bg-light-item:nth-child(2) {
  inset: auto 0 50vw 49vw;
  height: 8.2vw;
  width: 8.2vw;
  background: url(/resources/images/pc/cellfate/mv_light_cell_11.png) center/cover no-repeat;
}
.sec-main-bg-light-item:nth-child(1) {
  inset: auto 0 55vw 45vw;
  height: 9vw;
  width: 9vw;
  background: url(/resources/images/pc/cellfate/mv_light_cell_12.png) center/cover no-repeat;
}
/* sec-main-bg-dark-item */
.sec-main-bg-dark-item{
  position: absolute;
  margin: auto;
  height: 4.2vw;
  width: 4.2vw;
  opacity: 0;
}
.sec-main-bg-dark-item:nth-child(9) {
  inset: auto -35vw 21.5vw 0;
  background: url(/resources/images/pc/cellfate/mv_dark_cell_01.png) center/cover no-repeat;
}
.sec-main-bg-dark-item:nth-child(8) {
  inset: auto -28vw 26vw 0;
  background: url(/resources/images/pc/cellfate/mv_dark_cell_02.png) center/cover no-repeat;
}
.sec-main-bg-dark-item:nth-child(7) {
  inset: auto -17vw 29.5vw 0;
  background: url(/resources/images/pc/cellfate/mv_dark_cell_03.png) center/cover no-repeat;
}
.sec-main-bg-dark-item:nth-child(6) {
  inset: auto -5vw 32.8vw 0;
  background: url(/resources/images/pc/cellfate/mv_dark_cell_04.png) center/cover no-repeat;
}
.sec-main-bg-dark-item:nth-child(5) {
  inset: auto 8vw 35.9vw 0;
  background: url(/resources/images/pc/cellfate/mv_dark_cell_05.png) center/cover no-repeat;
}
.sec-main-bg-dark-item:nth-child(4) {
  inset: auto 22vw 38.5vw 0;
  background: url(/resources/images/pc/cellfate/mv_dark_cell_06.png) center/cover no-repeat;
}
.sec-main-bg-dark-item:nth-child(3) {
  inset: auto 37vw 40.8vw 0;
  background: url(/resources/images/pc/cellfate/mv_dark_cell_07.png) center/cover no-repeat;
}
.sec-main-bg-dark-item:nth-child(2) {
  inset: auto 53vw 43vw 0;
  background: url(/resources/images/pc/cellfate/mv_dark_cell_08.png) center/cover no-repeat;
}
.sec-main-bg-dark-item:nth-child(1) {
  inset: auto 70vw 44.5vw 0;
  background: url(/resources/images/pc/cellfate/mv_dark_cell_09.png) center/cover no-repeat;
}


#cellfate-labo h2{
  position: relative;
  text-align: center;
  padding: 36px 26px 50px 20px;
  width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
#cellfate-labo h2 span{
  position: relative;
  z-index: 2;
  font-size: 1.2em;
  line-height: 1.8;
  letter-spacing: 0.11em;
}
#cellfate-labo h2:before,
#cellfate-labo h2:after{
  content: "";
  position: absolute;
  width: calc(100% - 14px);
  height: calc(100% - 17px);
  display: block;
  border: 1px #ffffff solid;
  color: #FFFFFF;
  z-index: -1;
}
#cellfate-labo h2:before{
  top: 0;
  left: 0;
  background-image: url(/resources/images/pc/cellfate/bg_cellfate-labo-h2.png);
  background-size: cover;
}
#cellfate-labo h2:after{
  bottom: 0;
  right: 0;
}
#cellfate-labo h2 sub{
  font-size: 0.5em;
}
.sec-main-outline .outline-container .lead-box{
  padding-top: 56px;
}
.sec-main-outline .outline-container .lead-box p{
  text-align: center;
  font-size: 1em;
  line-height: 1.7;
  letter-spacing: 0.08em;
  margin-bottom: 1.6em;
}
.sec-main-outline .outline-container .lead-box small{
  display: block;
  text-align: center;
  font-size: 0.7em;
  line-height: 1.5;
}
.outline-container .video{
  margin: 56px auto 0;
}
.sec-cause{
  margin-top: 119px;
}
.sec-cause .lead-box{
  padding-top: 54px;
}
.sec-cause .lead-box p{
  text-align: center;
  font-size: 1em;
  line-height: 1.7;
  letter-spacing: 0.08em;
  margin-bottom: 3.3em;
}
.sec-cause .lead-box p b{
  font-size: 1.7em;
  line-height: 1.7;
}
.sec-cause .img-liposome .image-box{
  border: 1px #757682 solid;
  padding: 5px 10px 10px 10px;
  width: 540px;
  margin: 0 auto;
}
.sec-cause .img-liposome .image-box ul{
  display: flex;
}
.sec-cause .img-liposome .image-box ul li{
  position: relative;
  width: 50%;
  line-height: 57px;
  text-align: center;
  font-size: 1.6em;
  padding-bottom: 7px;
  letter-spacing: 0.2em;
}
.sec-cause .img-liposome .image-box ul li b{
  font-size: 1.3em;
}
.sec-cause .img-liposome .image-box ul li:nth-child(2):after{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 60px;
  background-color: #3B3C4C;
}
.sec-cause .summary-box{
  margin-top: 120px;
}
.sec-cause .summary-box p{
  text-align: center;
  font-size: 1em;
  line-height: 1.75;
  letter-spacing: 0.1em;
  padding-right: 1em;
}
.sec-4type{
  margin-top: 120px;
}
.sec-4type .lead-box{
  padding-top: 56px;
}
.sec-4type .lead-box p{
  text-align: center;
  font-size: 1em;
  line-height: 1.7;
  letter-spacing: 0.15em;
}
.sec-4type .image-box{
  margin-top: 38px;
}
.sec-4type .image-box ul{
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  width: 566px;
}
.sec-4type .image-box ul li{
  width: 50%;
  margin-bottom: 14px;
}
.sec-4type .image-box ul li .image img{
  display: block;
  width: 144px;
  margin: 0 auto;
}
.sec-4type .image-box ul li:nth-child(odd){
  transform: translate(3px, 0);
}
.sec-4type .image-box ul li:nth-child(even){
  transform: translate(-19px, 0);
}

.sec-4type .image-box ul li h3{
  text-align: center;
  font-size: 0.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4em;
  line-height: 1.9;
  margin-top: 26px;
  letter-spacing: 0.2em;
}
.sec-4type .image-box ul li:nth-child(n+3) h3{
  margin-top: -2px;
}
.sec-4type .image-box ul li p{
  position: relative;
  margin-top: 14px;
  text-align: center;
  font-size: 0.7em;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3em;
}
.sec-4type .image-box ul li:nth-child(n+3) p{
  margin-top: 11px;
  padding-top: 8px;
}
.sec-4type .image-box ul li p:before{
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: -10px;
  height: 214px;
  width: 1px;
  transform: translate(-50%, -50%) rotate(90deg);
  background: linear-gradient(rgba(255, 255, 255, 0) 0%, #fff 51.72%, rgba(255, 255, 255, 0) 100%);
}
.sec-discovery1{
  margin-top: 115px;
}
.sec-discovery1 .ttl-box>span{
  text-align: center;
  display: block;
  font-size: 1.9em;
  letter-spacing: 0.2em;
  margin-bottom: 29px;
}
.sec-discovery1 .lead-box{
  padding-top: 53px;
}
.sec-discovery1 .lead-box p{
  text-align: center;
  font-size: 1em;
  line-height: 1.75;
  letter-spacing: 0.14em;
  margin-bottom: 28px;
}
.sec-discovery1 .image-box{
  margin-top: 56px;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}
.sec-discovery1 .image-box img{
  display: block;
  width: 900px;
  margin: 0 auto;
}

.sec-discovery2{
  margin-top: 61px;
}
.sec-discovery2 .ttl-box h2{
  padding: 42px 26px 50px 20px !important;
}
.sec-discovery2 .ttl-box h2 span{
  line-height: 1.98 !important;
}
.sec-discovery2 .ttl-box>span{
  text-align: center;
  display: block;
  font-size: 1.9em;
  letter-spacing: 0.2em;
  margin-bottom: 29px;
}
.sec-discovery2 .lead-box{
  padding-top: 53px;
}
.sec-discovery2 .lead-box p{
  text-align: center;
  font-size: 1em;
  line-height: 1.75;
  letter-spacing: 0.14em;
  margin-bottom: 28px;
}
.sec-discovery2>.image-box{
  margin-top: 56px;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}
.sec-discovery2>.image-box img{
  display: block;
  width: 900px;
  margin: 0 auto;
}
.sec-discovery2 .detail-box{
  display: flex;
  flex-wrap: wrap;
  width: 900px;
  margin: 56px auto 0;
}
.sec-discovery2 .detail-box h3{
  font-size: 1em;
  text-align: center;
  letter-spacing: 0.08em;
  margin-top: -3px;
  width: 100%;
}
.sec-discovery2 .detail-box .comparison-box{
  text-align: center;
  width: 300px;
  padding: 0 41px 0 5px;
}
.sec-discovery2 .detail-box .comparison-box>.caption{
  display: inline-block;
  background: #323142;
  border-radius: 30px;
  margin-top: 54px;
}
.sec-discovery2 .detail-box .comparison-box>.caption span{
  display: block;
  font-size: 0.8em;
  padding: 0 22px 0 45px;
  line-height: 29px;
  margin: 0 auto;
  letter-spacing: 0.09em;
  background-image: url(/resources/images/pc/cellfate/ico_cellfate-labo-arrow.png);
  background-size: 18px 20px;
  background-repeat: no-repeat;
  background-position: 19px 4px;
}
.sec-discovery2 .detail-box .comparison-box ul{
  margin: 25px 0 0 0;
}
.sec-discovery2 .detail-box .comparison-box ul li{
  margin-bottom: 14px;
}
.sec-discovery2 .detail-box .comparison-box ul li img{
  display: block;
}
.sec-discovery2 .detail-box .comparison-box ul li .caption{
  text-align: center;
  font-size: 0.68em;
  margin-top: 16px;
  letter-spacing: 0.28em;
}
.sec-discovery2 .detail-box .graph-box{
  width: 600px;
}
.sec-discovery2 .detail-box .graph-box .image-box{
  margin: 62px 6px 0 15px;
}
.sec-discovery2 .detail-box .graph-box .caption{
  font-size: 0.7em;
  text-align: center;
  letter-spacing: 0.03em;
  margin-top: 1vw;
}
.sec-discovery2 .detail-box > .caption{
  width: 100%;
  text-align: center;
  margin-top: 22px;
  letter-spacing: 0.15em;
}
.sec-development{
  margin-top: 119px;
}
.sec-development h2{
  padding: 40px 26px 50px 20px !important;
}
.sec-development h2 span{
  line-height: 1.9 !important;
}
.sec-development .lead-box{
  padding-top: 37px;
}
.sec-development .lead-box p{
  text-align: center;
  font-size: 1em;
  line-height: 1.75;
  letter-spacing: 0.14em;
  margin-bottom: 28px;
}
.sec-development .image-box{
  margin-top: 32px;
}
.sec-development .image-box img{
  display: block;
  width: 660px;
  margin: 0 auto;
}
.sec-development .text-box {
  margin: -40px 0 136px;
}
.sec-development .text-box p{
  text-align: center;
  font-size: 1em;
  line-height: 1.75;
  letter-spacing: 0.14em;
}
.sec-development .graph-box h3{
  font-size: 1em;
  text-align: center;
  letter-spacing: 0.08em;
  margin-top: -3px;
  width: 100%;
}
.sec-development .graph-box .image-box{
  margin-top: 56px;
}
.sec-development .graph-box .image-box img{
  width: 678px;
}
.sec-development .graph-box .caption{
  margin-top: 24px;
  font-size: 1em;
  text-align: center;
  letter-spacing: 0.15em;
  line-height: 1.75;
}
.sec-development .graph-box .caption + .caption{
  margin-top: 38px;
}
.sec-development .graph-box .caption sub{
  font-size: 0.7em;
  letter-spacing: 0.15em;
  line-height: 1.75;
}
.sec-summary{
  margin-top: 42px;
}
.sec-summary h2{
  padding: 45px 26px 58px 20px !important;
}
.sec-summary .lead-box{
  padding-top: 54px;
}
.sec-summary .lead-box p{
  text-align: center;
  font-size: 1em;
  line-height: 1.75;
  letter-spacing: 0.14em;
  margin-bottom: 28px;
}
.sec-summary .lead-box sub{
  font-size: 0.7em;
  letter-spacing: 0.15em;
}
.sec-summary .image-box{
  margin-top: 56px;
}
.sec-summary .image-box img{
  display: block;
  width: 600px;
  margin: 0 auto;
}
.sec-summary .graph-box{
  margin-top: 56px;
}
.sec-summary .graph-box h3{
  text-align: center;
  font-size: 1em;
  letter-spacing: 0.07em;
}
.sec-summary .graph-box .image-box{
  margin: 22px 0px 0 0;
}
.sec-summary .graph-box .image-box img{
  display: block;
  width: 640px;
  margin: 0 auto;
}
.sec-summary .graph-box .caption{
  margin: 30px 0px 0 0px;
  font-size: 1em;
  text-align: center;
  letter-spacing: 0.15em;
  line-height: 1.8;
}
.sec-promise{
  position: relative;
  margin: 25vh 0;
}
.sec-promise p{
  text-align: center;
  font-size: 1.7em;
  letter-spacing: 0.11em;
  line-height: 1.92;
}

/* sec-discovery-bg */
.sec-discovery-bg {
  position: fixed;
  display: block;
  bottom: 0;
  right: 0;
  height: calc(100vh - 48px);
  width: 100vw;
  /* max-width: 750px; */
  background-image: url(/resources/images/pc/cellfate/bg_cellfate-labo-discovery.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 80%;
  z-index: -1;
  opacity: 0;
}


.block-footer{
  margin-top: 0;
  z-index: 1;
}