@charset "utf-8";

/* scroll */
.mouse{
  width: 42px;
  height: 88px;
  position: absolute;
  bottom: 20px;
  right: 13px;
  z-index: 15;
}
.mouse:after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}
.mouse:after{
  background-color: #fff;
  width: 3px;
  height: 3px;
  border-radius: 100%;
  animation: trackBallSlide 7s linear infinite;
}
.scroll_text{
  font-size: 10px;
  color:#fff;
  letter-spacing: .2em;
  transform: rotate(-90deg);
  position: absolute;
  z-index: 15;
  bottom: 130px;
  right: 8px;
  animation: colorText 7s ease-out infinite, nudgeText 7s ease-out infinite;
}
@media screen and (min-width:768px) {
  .mouse{
    width: 52px;
    right: 35px;
  }
  .mouse:after{
  width: 5px;
  height: 5px;
  }
  .scroll_text{
    font-size: 12px;
    right: 30px;
  }
}

/* Animations */

@keyframes colorText{
  21% {
    opacity: 0.2;
  }
  30% {
    opacity: 1;
  }
  51% {
    opacity: 0.2;
  }
  60% {
    opacity: 1;
  }
  81% {
    opacity: 0.2;
  }
  90% {
    opacity: 1;
  }
} 

@keyframes trackBallSlide{
  0%{
    opacity: 1;
    transform: scale(1) translateY(-30px);
  }
  6%{
    opacity: 1;
    transform: scale(0.9) translateY(1px);
  }
  14%{
    opacity: 0;
    transform: scale(0.5) translateY(50px);
  }
  15%, 19%{
    opacity: 0;
    transform: scale(0.5) translateY(-30px);
  }
  28%, 29.99%{
    opacity: 1;
    transform: scale(1) translateY(-30px);
  }
  30%{
    opacity: 1;
    transform: scale(1) translateY(-30px);
  }
  36%{
    opacity: 1;
    transform: scale(0.9) translateY(5px);
  }
  44%{
    opacity: 0;
    transform: scale(0.5) translateY(50px);
  }
  45%, 49%{
    opacity: 0;
    transform: scale(0.5) translateY(-30px);
  }
  58%, 59.99%{
    opacity: 1;
    transform: scale(1) translateY(-30px);
  }
  60%{
    opacity: 1;
    transform: scale(0.9) translateY(-30px);
  }
  66%{
    opacity: 1;
    transform: scale(0.9) translateY(5px);
  }
  74%{
    opacity: 0;
    transform: scale(0.5) translateY(50px);
  }
  75%, 79%{
    opacity: 0;
    transform: scale(0.5) translateY(-30px);
  }
  88%, 100%{
    opacity: 1;
    transform: scale(1) translateY(-30px);
  }
}
@keyframes nudgeText {
  0%{
    transform: translateY(0) rotate(-90deg);
  }
  20%{
    transform: translateY(3px) rotate(-90deg);
  }
  30%{
    transform: translateY(0) rotate(-90deg);
  }
  50%{
    transform: translateY(3px) rotate(-90deg);
  }
  60%{
    transform: translateY(0) rotate(-90deg);
  }
  80%{
    transform: translateY(3px) rotate(-90deg);
  }
  90%{
    transform: translateY(0) rotate(-90deg);
  }
}

/* FV */
.sec_fv{
  position: relative;
}
.first-view {
  position: relative;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.first-view li {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}
.sec_fv figure{
  position: relative;
  width:100%;
  height: 100%;
}
.fv-image {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}
.fv-image.active {
  opacity: 1;
  z-index: 2;
}

.fv-ttl{
  position:absolute;
  top:21%;
  left:49.5%;
  transform: translate(-50%, -50%);
  width:50vw;
  height:auto;
  z-index: 10;
}
.fv-ttl img{
  width:100%;
  height:100%;
  object-fit: cover;
}
@media screen and (min-width:768px){
  .fv-image {
    object-position: 80% center;
  }
  .fv-ttl{
    top:44%;
    left: 28%;
    width: 33vw;
  }
}
@media screen and (min-width:1200px) {
  .fv-image {
    object-position: center center;
  }
  .fv-ttl{
    top:44%;
    left:25%;
    width:20vw;
  }
}

/* ----- MAIN ----- */

.wrap_main_concept{
  background-image: url(../images/bg_water.jpg);
  background-size: cover;
  background-repeat: no-repeat; 
  width:100%;
  padding:170px 0 200px;
}
.sec_concept p, .sec_concept h2, .sec_concept h3{
  font-size: 0;
  color:transparent;
  background-size: contain; 
  background-position: center center;
  background-repeat: no-repeat;
  margin:auto;  
}
.sec_concept .lead {
  background-image: url(../images/top_lead.png);
  width:100%;
  height:4.5vw;
}
.sec_concept h2 {
  background-image: url(../images/logo_or.svg);
  width:50%;
  height:10vw;
  margin: 16vw auto 17vw;
}
.sec_concept h2:after{
  content: "";
  display: block;
  background-image: url(../images/skinvill_ja_or.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 40%;
  height: 30%;
  margin: 13vw auto 0;
}
.sec_concept .sentence {
  background-image: url(../images/top_concept.png);
  width:95%;
  height:50vw;
}
.wrap_sub_concept{
  width: 80%;
  margin: auto;
  padding: 0 0 100px;
}
.sub_concept_txt, .sub_concept_img{
  width:100%;
}
.wrap_sub_concept .sub_concept_ttl{
  background-image: url(../images/hada-ondo.png);
  background-position: left;
  width:100%;
  height:12vw;
}
.wrap_sub_concept .sub_concept_sentence{
  background-image: url(../images/sub_concept.png);
  background-position: left;
  width: 100%;
  height: 180px;
  margin: 20px 0 0 0;
}
.sub_concept_img{
  position: relative;
}
.sub_concept_img::after{
  content: "";
  display: block;
  position: absolute;
  top: 2%;
  left: 0;
  background-image: url(../images/skinwarmth.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 70%;
  height: 45%;
}
.sub_concept_img img{
  width: 100%;
  object-fit: contain;
  margin-left: 60px;
  margin-top:30px;
}

/* 流れるテキスト */
.marquee {
  display: flex;
  width: 100%;
  overflow: hidden;
  margin-bottom: 110px;
}

.marquee span {
  flex-shrink: 0;
  white-space: nowrap;
  animation: marquee 50s linear infinite;
  font-size: 10vw;
  height: 10vw;
  padding-top: 2vw;
  opacity: 0.2;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@media screen and (min-width:768px){
  .wrap_main_concept{
  padding:170px 0 18vw;
  }
  .sec_concept .lead {
    height:3vw;
  }
  .sec_concept h2 {
    height:6vw;
    margin: 9vw auto 12vw;
  }
  .sec_concept h2:after{
    margin: 8vw auto 0;
  }
  .sec_concept .sentence {
    width:80%;
    height:23vw;
  }
  .wrap_sub_concept{
    width: 1080px;
    padding: 0 0 140px 180px;
  }
  .sub_concept_txt, .sub_concept_img{
   width:50%;
  }
  .wrap_sub_concept .sub_concept_ttl{
    height:7vw;
  }
  .wrap_sub_concept .sub_concept_sentence{
  width: calc(100% - 100px);
  height: 250px;
  }
  .sub_concept_img img{
    margin-left: -100px;
  }
  .sub_concept_img::after{
    top: 58%;
    left: -150px;
    width: 55%;
  }
  .marquee {
    margin-bottom: 150px;
  }
  .marquee span {
    font-size: 5vw;
    height: 5vw;
  }
}

/* スキンビルのひみつbnr */ 

.sec_secret_bnr {
  margin: 0 auto 100px;
}
.secret_bnr {
  background-image: url(../images/bg_stripe_or.svg);
  background-size: 20px 20px;
  background-repeat: repeat;  
  border-radius: 40px;
  padding:50px 40px 20px;
  justify-content: space-around;
  align-items: center;
  margin: auto 20px;
}
.secret_ttl {
  margin: 0 auto 10px;
}
.secret_ttl_en {
  color:#fff;
  font-size:45px;
  line-height: 1em;
  letter-spacing: .02em;
  text-align: center;
}
.secret_ttl_ja {
  color: #fff;
  font-size: 14px;
  text-align: center;
  letter-spacing: .24em;
  margin-top: 0.5em;
}
.secret_tubeimage {
  width:180px;
  height:auto;
  margin:auto;
}
.secret_link {
  color:transparent;
  font-size:0;
  width:90px;
  height:90px;
  position:relative;
}
.secret_bnr:hover .secret_tubeimage {
  transform-origin: bottom center;
  animation: swing-cute-speedup 0.9s ease-out;
}

@keyframes swing-cute-speedup {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(-1.5deg); }
  30%  { transform: rotate(1.5deg); }
  45%  { transform: rotate(-1deg); }
  60%  { transform: rotate(1deg); }
  70%  { transform: rotate(-0.5deg); }
  80%  { transform: rotate(0.5deg); }
  90%  { transform: rotate(-0.25deg); }
  100% { transform: rotate(0deg); }
}

.secret_link::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../images/viewmore_btn_wh.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: transform 0.5s ease-in-out;;
}

.secret_link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 12px;
  background-image: url(../images/arw_or.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* hoverで背景回転 */
.secret_bnr:hover .secret_link::before {
  transform: rotate(180deg);
}


@media screen and (min-width:768px){
  .sec_secret_bnr {
    margin: 200px auto 250px;
  }
  .secret_bnr { 
    border-radius: 70px;
    padding: 20px 20px 20px 60px;
    margin: auto;
  }
  .secret_ttl {
    margin: 0 0 3%;
  }
  .secret_ttl_en {
    font-size:65px;
    text-align: left;
  }
  .secret_ttl_ja {
    font-size: 17px;
  }
  .secret_tubeimage {
    width:50%;
  }
  .secret_link {
    width:106px;
    height:106px;
  }
  .secret_link::after {
    width: 13.5px;
    height: 18.5px;
  }
}
@media screen and (min-width:1000px){
  .secret_bnr {
    padding:0 40px 0 80px;
    height: 327px;
    justify-content: space-between;
  }
  .secret_tubeimage {
    width:360px;
    margin: -6% 0 0 -2%;
  }
}

/* LINE UP ---　style_common.cssへ記述 */ 

/* TOPICS */ 

.sec_topics {
  background-color: #feefd8;
} 
.link_topics {
  color:transparent;
  font-size:0;
  width:90px;
  height:90px;
  position:relative;
}
.link_topics::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../images/viewall_btn_or.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: transform 0.5s ease-in-out;;
}
.link_topics::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 12px;
  background-image: url(../images/arw_wh.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* hoverで背景回転 */
.btn_to_topics:hover .link_topics::before {
  transform: rotate(180deg);
}
@media screen and (min-width:768px){
  .link_topics {
    width:106px;
    height:106px;
  }
  .link_topics::after {
    width: 13.5px;
    height: 18.5px;
  }
}
@media screen and (min-width:1000px){
  .wrap_list_topics {
    width: calc(900px + 106px);
    margin-left: calc(50vw - 450px);
    justify-content:space-between;
    flex-wrap: nowrap;
  }
  .list_topics {
    flex-wrap: nowrap;
  }
  .btn_to_topics {
    margin-top: -70px;
  }
}