/*
margin,padding,top,right,bottom,left,gap
min(2.56cqw, 20px);
min(3.85cqw, 30px)
min(5.13cqw, 40px)
min(6.41cqw, 50px)
min(10.26cqw, 80px)
*/
.pdp-wrap.retinol-pdrn-toner .pdp__inner{
  --gt-ttl-color: #00AF73;
  --gt-font-color: #3C3C3C;
  color: var(--gt-font-color);
  max-width: 780px;
  margin: 0 auto;
  container-type: inline-size;
  background-color: var(--BG, #F4F3F0);
  font-family: "Pretendard JP";
  text-align: center;
  container-type: inline-size;
  figure{
    margin: 0;
    display: flex;
    justify-content: center;
  }
  .main__logo{
    width: clamp(220px, 56.41cqw, 440px);
    margin: 0 auto clamp(16px, 4.1cqw, 32px);
  }
  .main__logo img{
    display: block;
    width: 100%;
    height: auto;
  }
  .main__movie{
    padding: 0 min(5.13cqw, 40px);
    video{
      display: block;
      width: 100%;
      max-width: 700px;
      height: auto;
      margin-inline: auto;
    }
  }
  .main__img{
    padding: 0 min(5.13cqw, 40px);
  }
  img{
    width: 100%;
    max-width: max-content;
    height: auto;
  }
  sup{
    font-size: 50%;
    vertical-align: super;
  }
  .annotation{
    font-size: min(2.051cqw, 16px);
    line-height: 1.375;
  }
  .note{
    font-size: min(1.79cqw, 14px);
    line-height: 1.2;
    text-align: left;
    padding: 0 min(5.13cqw, 40px);
    span {
      display: block;
      text-indent: -2em;
      margin-left: 2em;
      letter-spacing: 0.2px;
    }
    span:not(:last-child){
      margin-bottom: min(1.03cqw, 8px);
    }
  }

  .main_visual{
    position: relative;
    .main__txt{
      position: absolute;
      top: min(7.69cqw, 60px);
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      color: #fff;
    }
    .main__lead{
      font-size: min(4.87cqw, 38px);
      font-weight: 500;
      line-height: 1.26;
    }
    h2{
      font-size: min(7.05cqw, 55px);
      font-weight: 700;
      line-height: 1.31;
      letter-spacing: -0.01em;
      span{
        font-size: min(3.85cqw, 30px);
        font-weight: 700;
        line-height: 1.93;
      }
    }
  }
  .main01{
    padding: min(10.26cqw, 80px) min(5.13cqw, 40px);
    background: #2A49C3;
    .main__txt {
      margin-inline: calc(min(5.13cqw, 40px) * -1);
    }
    .main__headline{
      display: inline-block;
      padding: min(1.03cqw, 8px) min(2.05cqw, 16px);
      background: #F9FFA6;
      color: #2A49C3;
      font-size: min(6.92cqw, 54px);
      font-weight: 700;
      line-height: 1;
      margin-bottom: min(5.13cqw, 40px);
      white-space: nowrap;
    }
    .main__headline--01{
      margin-bottom: min(2.05cqw, 16px);
    }
    .main__lead{
      color: #F9FFA6;
      font-size: min(5.13cqw, 40px);
      font-weight: 700;
      line-height: 1.4;
    }
  }
  .main04{
    padding: min(10.26cqw, 80px) min(5.13cqw, 40px);
    .main__lead{
      font-size: min(5.13cqw, 40px);
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.02em;
      margin-bottom: min(3.08cqw, 24px);
    }
    .main__headline{
      display: inline-block;
      padding: min(0.77cqw, 6px) min(2.05cqw, 16px);
      background: #FFEA81;
      font-size: min(7.44cqw, 58px);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -0.02em;
    }
    .main__headline--01{
      margin-bottom: min(1.54cqw, 12px);
    }
  }
  .main05{
    .main__num{
      width: min(9.87cqw, 77px);
      margin-bottom: min(3.08cqw, 24px);
    }
    .main__txt{
      padding: 0 min(5.13cqw, 40px);
      text-align: left;
    }
    .main__txt--01{
      margin-bottom: min(7.69cqw, 60px);
      .main__lead{
        font-size: min(5.13cqw, 40px);
        font-weight: 700;
        line-height: 1.25;
        margin-bottom: min(3.08cqw, 24px);
      }
      .main__headline{
        display: inline-block;
        padding: min(0.26cqw, 2px) min(2.05cqw, 16px);
        background: #2A49C3;
        color: #fff;
        font-size: min(7.69cqw, 60px);
        font-weight: 700;
        line-height: 1.17;
      }
    }
    .main__txt--02{
      margin: min(10.26cqw, 80px) 0 min(4.1cqw, 32px);
      .main__lead{
        color: #2A49C3;
        font-size: min(5.13cqw, 40px);
        font-weight: 700;
        line-height: normal;
        margin-bottom: min(3.08cqw, 24px);
        span{
          color: #3C3C3C;
        }
      }
      .main__catch{
        color: #3C3C3C;
        font-size: min(4.1cqw, 32px);
        font-weight: 400;
        line-height: normal;
        margin-bottom: min(2.05cqw, 16px);
      }
      .main__headline{
        display: inline-block;
        padding: min(0.51cqw, 4px) min(1.54cqw, 12px);
        background: #2A49C3;
        color: #FFF;
        font-size: min(4.62cqw, 38px);
        font-weight: 700;
        line-height: normal;
        margin-bottom: min(3.08cqw, 24px);
        white-space: nowrap;
      }
      .main__desc{
        color: #2A49C3;
        font-size: min(6.41cqw, 50px);
        font-weight: 800;
        line-height: 1.4;
      }
    }
  }
  .main06{
    .main__txt{
      text-align: left;
      padding: min(10.26cqw, 80px) min(5.13cqw, 40px) min(5.13cqw, 40px);
    }
    .main__num{
      width: min(11.15cqw, 87px);
      margin-bottom: min(3.08cqw, 24px);
    }
    .main__headline{
      color: #3C3C3C;
      font-size: min(4.62cqw, 36px);
      font-weight: 700;
      line-height: normal;
      letter-spacing: -0.02em;
      margin-bottom: min(3.08cqw, 24px);
      span{
        display: inline-block;
        padding: min(0.51cqw, 4px) min(2.05cqw, 16px);
        background: #2A49C3;
        color: #FFF;
        font-size: min(4.62cqw, 36px);
        font-weight: 700;
        line-height: normal;
        margin-right: min(1.03cqw, 8px);
      }
    }
    .main__lead{
      color: #3C3C3C;
      font-size: min(6.41cqw, 50px);
      font-weight: 800;
      line-height: 1.24;
    }
  }
  .main07{
    .main__txt{
      text-align: left;
      padding: min(10.26cqw, 80px) min(5.13cqw, 40px) min(5.13cqw, 40px);
    }
    .main__num{
      width: min(11.41cqw, 89px);
      margin-bottom: min(3.08cqw, 24px);
    }
    .main__lead{
      color: #3C3C3C;
      font-size: min(5.13cqw, 40px);
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.02em;
      margin-bottom: min(2.05cqw, 16px);
    }
    .main__headline{
      color: #2A49C3;
      font-size: min(7.69cqw, 60px);
      font-weight: 800;
      line-height: normal;
      margin-bottom: min(2.05cqw, 16px);
    }
    .main__catch{
      color: #3C3C3C;
      font-size: min(4.62cqw, 36px);
      font-weight: 500;
      line-height: 1.33;
    }
    .main__img{
      margin-top: min(5.13cqw, 40px);
    }
  }
  .main08{
    padding-bottom: min(10.26cqw, 80px);
    .main__txt--01{
      text-align: left;
      padding: min(10.26cqw, 80px) min(5.13cqw, 40px) min(5.13cqw, 40px);
      .main__num{
        width: min(11.54cqw, 90px);
        margin-bottom: min(3.08cqw, 24px);
      }
      .main__catch{
        color: #3C3C3C;
        font-size: min(5.13cqw, 40px);
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: -0.02em;
        margin-bottom: min(2.05cqw, 16px);
      }
      .main__lead{
        color: #2A49C3;
        font-size: min(7.69cqw, 60px);
        font-weight: 800;
        line-height: 1.13;
      }
    }
    .main__txt--02{
      padding: min(5.13cqw, 40px) 0 min(3.08cqw, 24px);
      .main__lead{
        font-size: min(4.62cqw, 36px);
        font-weight: 500;
        line-height: 1.2;
        span{
          display: block;
          color: #2A49C3;
          font-size: min(7.05cqw, 55px);
          font-weight: 700;
        }
      }
    }
    .main08__img{
      margin-bottom: min(10.26cqw, 80px);
    }
  }
  .main09{
    padding: min(10.26cqw, 80px) min(5.13cqw, 40px) min(5.13cqw, 40px);
    background: #2A49C3;
    .main__headline{
      display: inline-block;
      padding: min(1.03cqw, 8px) min(3.08cqw, 24px);
      background: #F9FFA6;
      color: #2A49C3;
      font-size: min(6.41cqw, 50px);
      font-weight: 700;
      line-height: 1;
      margin-bottom: min(3.08cqw, 24px);
    }
    .main__catch{
      color: #FFF;
      font-size: min(4.36cqw, 34px);
      line-height: 1.29;
      margin-bottom: min(4.1cqw, 32px);
    }
    .main09__img{
      width: 100%;
      aspect-ratio: 695.334 / 636.771;
      overflow: hidden;
      padding: 0;
      margin: 0 auto;
      img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: center 3%;
      }
    }
  }
  .main10{
    padding: min(10.26cqw, 80px) min(5.13cqw, 40px);
    .main__lead{
      color: #3C3C3C;
      font-size: min(4.1cqw, 32px);
      line-height: 1.56;
      margin-bottom: min(3.08cqw, 24px);
      span{
        font-size: min(5.13cqw, 40px);
        font-weight: 700;
        line-height: 1.25;
      }
    }
    .main__headline{
      display: inline-block;
      padding: min(1.03cqw, 8px) min(3.08cqw, 24px);
      background: #2A49C3;
      color: #FFF;
      font-size: min(7.69cqw, 60px);
      font-weight: 700;
      line-height: 1;
      margin-bottom: min(4.1cqw, 32px);
    }
    .main__img{
      padding: initial;
    }
  }
  .main11{
    position: relative;
    .main__txt{
      position: absolute;
      bottom: min(10.26cqw, 80px);
      padding: 0 min(6.15cqw, 48px);
    }
    .main__lead{
      font-size: min(4.1cqw, 32px);
      font-weight: 500;
      line-height: 1.43;
      letter-spacing: -0.01em;
      span{
        font-size: min(4.62cqw, 36px);
        font-weight: 700;
        line-height: 1.39;
      }
    }
    .main__leadSub{
      font-size: min(4.62cqw, 36px);
      font-weight: 500;
      line-height: 2.38;
      margin-bottom: min(2.05cqw, 16px);
    }
    figure{
      width: min(71.15cqw, 555px);
      margin: min(3.08cqw, 24px) auto 0;
    }
    .main__add{
      font-size: min(2.05cqw, 16px);
      line-height: normal;
      letter-spacing: -0.02em;
      margin-top: min(2.05cqw, 16px);
    }
  }
  .main12{
    padding: min(5.13cqw, 40px);
    .main__txt{
      padding: min(5.13cqw, 40px) min(3.08cqw, 24px);
      background: #E8ECFF;
    }
    .main__lead{
      color: #182693;
      font-size: min(5.13cqw, 40px);
      font-weight: 700;
      line-height: 1.25;
      margin-bottom: min(4.1cqw, 32px);
    }
    .main12__list{
      text-align: left;
    }
    .main12__item{
      display: flex;
      align-items: flex-start;
      gap: min(1.03cqw, 8px);
      font-size: min(3.08cqw, 24px);
      font-weight: 500;
      line-height: 1.33;
      letter-spacing: -0.0001em;
    }
    .main12__item::before{
      content: "";
      flex: 0 0 min(3.46cqw, 27px);
      width: min(3.46cqw, 27px);
      aspect-ratio: 1 / 1;
      margin-top: 0.15em;
      background-image: url(/cdn/shop/files/retinol-pdrn-toner_checkbox.webp?v=1779072209);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
    .main12__item:first-child{
      letter-spacing: -0.1em;
      margin-bottom: min(4.1cqw, 32px);
    }
  }
  .main13{
    padding: min(5.13cqw, 40px) min(5.13cqw, 40px) min(7.69cqw, 60px);
    text-align: left;
    .main__lead{
      color: #3C3C3C;
      font-size: min(5.38cqw, 42px);
      font-weight: 700;
      line-height: normal;
      margin-bottom: min(3.08cqw, 24px);
    }
    .main__desc{
      color: #3C3C3C;
      font-size: min(3.85cqw, 30px);
      line-height: 1.4;
      letter-spacing: 0.01em;
    }
  }
  .main14{
    padding-bottom: min(7.69cqw, 60px);
  }
}