/*
margin,padding,top,right,bottom,left,gap
min(1.28cqw, 10px);
min(2.05cqw, 16px);
min(2.56cqw, 20px);
min(3.85cqw, 30px);
min(5.13cqw, 40px);
min(6.41cqw, 50px);
min(7.69cqw, 60px);
min(8.97cqw, 70px);
min(10.26cqw, 80px);
*/
.pdp-wrap.vita-b-pack-to-foamvita-b-pack-to-foam .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: #F3F4F0;
  font-family: "Pretendard JP";
  text-align: center;
  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(10.26cqw, 80px);
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      figure{
        width: min(23.72cqw, 185px);
        margin: 0 auto min(2.56cqw, 20px);
        img {
          display: block;
          width: 100%;
          height: auto;
        }
      }
    }
    h2{
      color: var(--VitaminC_, #FF7828);
      font-size: min(5.64cqw, 44px);
      font-weight: 700;
      line-height: 1.09;
      margin-bottom: min(1.15cqw, 9px);
      letter-spacing: 0.01em;
      span{
        font-size: min(4.10cqw, 32px);
      }
    }
    .main__catch{
      font-size: min(4.62cqw, 36px);
      font-weight: 500;
      line-height:1.22;
    }
  }
  .main01{
    position: relative;
    .main01_imgtxt{
      position: absolute;
    }
  }
  .main02{
    position: relative;
    .main__txt{
      position: absolute;
      top: min(8.97cqw, 70px);
      left: min(5.13cqw, 40px);
      text-align: left;
      .main__catch{
        font-size: min(5.13cqw, 40px);
        font-weight: 700;
        line-height: 1.3;
        margin-bottom: min(2.05cqw, 16px);
      }
      .main__headline{
        color: var(--VitaminC_, #FF7828);
        font-size: min(10.26cqw, 80px);
        font-weight: 800;
        line-height: 1.2;
        span{
          font-size: min(5.13cqw, 40px);
          font-weight: 700;
          letter-spacing: -1.2px;
          display: block;
        }
      }
    }
    .note{
      position: absolute;
      bottom: min(3.85cqw, 30px);
      color: #FFF;
      font-size: min(2.05cqw, 16px);
      line-height: 1.31;
      letter-spacing: 0.001em;
    }
  }
  .main03{
    position: relative;
    .main__headline{
      position: absolute;
      top: min(11.79cqw, 92px);
      left: 50%;
      transform: translateX(-50%);
      color: var(--VitaminC_, #FF7828);
      font-size: min(6.41cqw, 50px);
      font-weight: 700;
      line-height: 1.2;
      width: 100%;
    }
    .main03_imgtxt{
      position: absolute;
      bottom: min(8.97cqw, 70px);
    }
  }
  .main04{
    position: relative;
    .main__txt{
      position: absolute;
      top: min(8.97cqw, 70px);
      left: min(5.13cqw, 40px);
      text-align: left;
      .main__num{
        display: block;
        width: min(16.41cqw, 128px);
        height: auto;
      }
      .main__headline{
        display: inline-block;
        color: var(--VitaminC_, #FF7828);
        font-size: min(6.41cqw, 50px);
        font-weight: 700;
        line-height: 1.06;
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: auto;
        text-decoration-thickness: auto;
        text-underline-offset: 0.16em;
        text-underline-position: from-font;
        margin-bottom: min(1.28cqw, 10px);
      }
      .main__catch{
        font-size: min(5.13cqw, 40px);
        font-weight: 700;
        line-height: 1.57;
      }
    }
    .main04_move{
      display: block;
      width: 100%;
      aspect-ratio: 65 / 84;
      object-fit: cover;
    }
  }
  .main05{
    padding: min(5.13cqw, 40px);
  }
  .main06{
    position: relative;
    .main__txt{
      position: absolute;
      padding: 0 min(5.13cqw, 40px);
      bottom: min(3.85cqw, 30px);
      text-align: left;
      .main__num{
        display: block;
        width: min(15cqw, 117px);
        height: auto;
        margin-bottom: min(1.28cqw, 10px);
      }
      .main__headline{
        display: inline-block;
        color: var(--VitaminC_, #FF7828);
        font-size: min(5.90cqw, 46px);
        font-weight: 700;
        line-height: 1.15;
        border-bottom: min(0.51cqw, 4px) solid #ff7828;
        margin-bottom: min(0.51cqw, 4px);
        letter-spacing: 0.06em;
      }
      .main__catch{
        font-size: min(5.13cqw, 40px);
        font-weight: 700;
        line-height: 1.57;
        margin-bottom: min(2.31cqw, 18px);
      }
      .main__list{
        display: flex;
        flex-direction: column;
        gap: min(1.54cqw, 12px);
        margin-bottom: min(3.85cqw, 30px);
      }
      .main__item{
        display: flex;
        align-items: center;
        gap: min(1.92cqw, 15px);
        font-size: min(3.21cqw, 25px);
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: -0.01em;
      }
      .main__item::before{
        content: "";
        flex: 0 0 min(3.33cqw, 26px);
        width: min(3.33cqw, 26px);
        aspect-ratio: 1 / 1;
        background-image: url(/cdn/shop/files/vita-b-pack-to-foamvita-b-pack-to-foam_check.webp?v=1779339716);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }
      .main__itemText {
        min-width: 0;
        flex: 1;
      }
      .main__desc{
        font-size: min(3.59cqw, 28px);
        font-weight: 500;
        line-height: 1.35;
        letter-spacing: 0.01em;
      }
    }
  }
  .main07{
    background-color: #fff;
    padding: min(10.26cqw, 80px) 0 min(7.69cqw, 60px);
  }
  .main08{
    background-color: #fff;
    padding-bottom: min(10.64cqw, 83px);
    .main__headline{
      font-size: min(6.41cqw, 50px);
      font-weight: 700;
      line-height: 1.28;
      margin-bottom: min(3.85cqw, 30px);
      span{
        color: var(--VitaminC_, #FF7828);
        display: block;
      }
    }
    .main__catch{
      display: flex;
      justify-content: center;
      align-items: center;
      color: #666;
      font-size: min(2.82cqw, 22px);
      line-height: 1;
      padding-top: min(3.85cqw, 30px);
      margin-bottom: min(6.41cqw, 50px);
    }
    .main__catch::before{
      content: "";
      flex: 0 0 min(2.56cqw, 20px);
      width: min(2.56cqw, 20px);
      aspect-ratio: 1 / 1;
      background-image: url(/cdn/shop/files/vita-b-pack-to-foamvita-b-pack-to-foam_noteIcon.webp?v=1779339716);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
    .main__list{
      display: flex;
      flex-direction: column;
      gap: min(3.85cqw, 30px);
      width: min(77.18cqw, 602px);
      margin: 0 auto min(5.13cqw, 40px);
    }
    .main__item{
      display: flex;
      align-items: center;
      gap: min(1.92cqw, 15px);
      font-size: min(5.13cqw, 40px);
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.01em;
    }
    .main__item::before{
      content: "";
      flex: 0 0 min(3.33cqw, 26px);
      width: min(3.33cqw, 26px);
      aspect-ratio: 1 / 1;
      background-image: url(/cdn/shop/files/vita-b-pack-to-foamvita-b-pack-to-foam_check.webp?v=1779339716);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
    .main__itemText span{
      color: var(--VitaminC_, #FF7828);
      font-family: "Gordita", "Pretendard JP";
    }
    .note{
      color: #808080;
      font-size: min(2.05cqw, 16px);
      line-height: 1.5;
      span{
        text-indent: -1.4em;
        margin-left: 1.4em;
        letter-spacing: 0.4px;
        margin-bottom: initial;
      }
    }
  }
  .main09{
    position: relative;
    .main__txt{
      position: absolute;
      bottom: min(8.21cqw, 64px);
      text-align: left;
      padding: 0 min(5.13cqw, 40px);
      width: 100%;
      box-sizing: border-box;
    }
    .main__headline{
      color: #FFF46D;
      font-size: min(5.77cqw, 45px);
      font-weight: 700;
      line-height: 1.55;
      text-decoration-line: underline;
      text-decoration-style: solid;
      text-decoration-skip-ink: auto;
      text-decoration-thickness: auto;
      text-underline-offset: 0.16em;
      text-underline-position: from-font;
      margin-bottom: min(2.56cqw, 20px);
    }
    .main__catch{
      color: #FFF;
      font-size: min(3.59cqw, 28px);
      font-weight: 500;
      line-height: 1.21;
    }
  }
  .main10{
    padding: min(10.26cqw, 80px) 0;
    .main__headline{
      color: #FF7828;
      font-size: min(6.41cqw, 50px);
      font-weight: 700;
      line-height: 1.12;
      margin-bottom: min(7.18cqw, 56px);
    }
    img {
      display: block;
    }
    img + img{
      margin-top: min(6.41cqw, 50px);
    }
    .note{
      color: #808080;
      font-size: min(2.05cqw, 16px);
      line-height: 1.5;
      margin-top: min(5.13cqw, 40px);
      span {
        text-indent: -0.6em;
        margin-left: 0.6em;
        letter-spacing: -0.07px;
      }
    }
  }
  .main11{
    background-color: #fff;
    padding: min(10.26cqw, 80px) 0 min(5.13cqw, 40px);
    .main__headline{
      font-size: min(6.41cqw, 50px);
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: min(5.13cqw, 40px);
    }
  }
  .main12{
    padding: min(10.26cqw, 80px) 0 min(6.15cqw, 48px);
    .main__headline{
      color: #FF7828;
      font-size: min(7.69cqw, 60px);
      font-weight: 700;
      line-height: 1;
    }
    .main__catch{
      font-size: min(5.13cqw, 40px);
      font-weight: 500;
      line-height: 1.5;
    }
    .main__label{
      border-radius: 999px;
      background: var(--VitaminC_, #FF7828);
      display: flex;
      justify-content: center;
      align-items: center;
      color: #FFF;
      font-size: min(4.62cqw, 36px);
      font-weight: 700;
      line-height: 1.16;
      height: min(5.64cqw, 44px);
      margin: min(7.69cqw, 60px) auto min(3.85cqw, 30px);
    }
    .main__label--01{
      width: min(45.77cqw, 357px);
    }
    .main__label--02{
      width: min(50.38cqw, 393px);
      letter-spacing: -0.01em;
      margin-top: min(10.26cqw, 80px);
    }
    .main__desc{
      font-size: min(3.33cqw, 26px);
      font-weight: 500;
      line-height: 1.23;
      margin-top: min(5.13cqw, 40px);
    }
  }
  .main13{
    background: #E4E7EA;
    .note{
      color: #808080;
      font-size: min(2.05cqw, 16px);
      line-height: 1.5;
      padding: min(5.13cqw, 40px);
    }
  }
  .gt-foot{
    position: relative;
    .main__headline{
      position: absolute;
      top: min(8.97cqw, 70px);
      left: 50%;
      transform: translateX(-50%);
      color: #FFF46D;
      text-align: center;
      font-size: min(6.92cqw, 54px);
      font-weight: 700;
      line-height: 1.25;
      width: 100%;
    }
  }
}