/* -----------------------
  beauty
----------------------- */
.beauty {
  position: relative;
  background: url(../img/beauty_bg.png) no-repeat top center/ 100%;
}

.beauty::before {
  content: "";
  background: url(../img/dakara.png) no-repeat top center/ 100%;
  width: min(calc(150/ 750 * 100vw), 150px);
  height: min(calc(230/ 750 * 100vw), 230px);
  position: absolute;
  top: max(calc(-31/ 750 * 100vw), -31px);
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: 2;
}

.beauty h2 {
  position: relative;
  z-index: 2;
}

.beauty h2>img:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
}

.beauty .beauty_icon li {
  position: absolute;
  width: min(calc(172/ 750 * 100vw), 172px);
}

.beauty .beauty_icon li:nth-child(1) {
  top: min(calc(284/ 750 * 100vw), 284px);
  left: min(calc(131/ 750 * 100vw), 131px);
}

.beauty .beauty_icon li:nth-child(2) {
  top: min(calc(207/ 750 * 100vw), 207px);
  right: min(calc(120/ 750 * 100vw), 120px);
}

.beauty .beauty_icon li:nth-child(3) {
  top: min(calc(434/ 750 * 100vw), 434px);
  right: min(calc(40/ 750 * 100vw), 40px);
}

.beauty .beauty_icon li:nth-child(4) {
  top: min(calc(662/ 750 * 100vw), 662px);
  right: min(calc(129/ 750 * 100vw), 129px);
}

.beauty .beauty_icon li:nth-child(5) {
  top: min(calc(534/ 750 * 100vw), 534px);
  left: min(calc(46/ 750 * 100vw), 46px);
}

.beauty_pic {
  position: relative;
}

.beauty_pic li {
  margin-bottom: min(calc(232/ 750 * 100vw), 232px);
}

.beauty_pic li:nth-child(n+2) .b_pic{
  position: absolute;
  top: 0;
}
.b_pic {
  position: relative;
  width: min(calc(500/ 750 * 100vw), 500px);
  margin-left: min(calc(80/ 750 * 100vw), 80px);
  z-index: 2;
}

.b_pic_bg {
  position: absolute;
  width: min(calc(500/ 750 * 100vw), 500px);
  left: min(calc(170/ 750 * 100vw), 170px);
  top: min(calc(131/ 750 * 100vw), 131px);
  z-index: 1;
  opacity: 0.5;
}

.b_txt {
  position: absolute;
  width: min(calc(61/ 750 * 100vw), 61px);
  top: min(calc(201/ 750 * 100vw), 201px);
  right: min(calc(134/ 750 * 100vw), 134px);
  z-index: 2;
  clip-path: inset(0 0 100% 0);
}

.beauty_pic li .b_txt+.b_txt {
  right: min(calc(204/ 750 * 100vw), 204px);
}




.beauty_pic {
  --pic-dur: 0.9s;
  --bg-dur:  0.6s; 
  --txt-dur: 0.6s;
  --gap:     0.1s;
  --step:    2.2s;
  --bg-out:  0.5s;
  --txt-out: 0.15s;
  --txt-lead: 0.25s;
}

.beauty_pic li:nth-child(1) { --i: 0; }
.beauty_pic li:nth-child(2) { --i: 1; }
.beauty_pic li:nth-child(3) { --i: 2; }
.beauty_pic li:nth-child(4) { --i: 3; }

@keyframes revealUp {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0); }
}

@keyframes revealDown {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: .5; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}


.beauty_pic.play li .b_pic {
  clip-path: inset(100% 0 0 0);
  animation: revealUp var(--pic-dur) ease both;
  animation-delay: calc(var(--i) * var(--step));
}


.beauty_pic.play li .b_pic_bg { 
  animation: fadeIn var(--bg-dur) ease both; 
  animation-delay: calc(var(--i) * var(--step)),
    calc((var(--i) + 1) * var(--step) - var(--bg-out));
}

.beauty_pic.play li:last-child .b_txt {
  animation: revealDown var(--txt-dur) ease both;
  animation-delay: calc(var(--i) * var(--step) + var(--pic-dur) + var(--gap));
}

.beauty_pic.play li .b_txt {
  animation:
    revealDown var(--txt-dur) ease both,
    fadeOut    var(--txt-out) ease both;
  animation-delay:
    calc(var(--i) * var(--step) + var(--txt-lead)),
    calc((var(--i) + 1) * var(--step) - var(--txt-out));        
}

.beauty_pic.ready li:first-child .b_pic     { clip-path: inset(0); }
.beauty_pic.ready li:first-child .b_pic_bg  { opacity: .5; }
.beauty_pic.ready li:first-child .b_txt     { clip-path: inset(0); }

.b_pic_bg {
  transition: opacity 0.6s ease;
  opacity: 0.5; /* デフォルト状態 */
}

.b_pic_bg.is-hidden {
  opacity: 0; /* フェードアウト */
}