.pdp-wrap .pdp__inner {
  max-width: 780px;
  margin: 0 auto;
  container-type: inline-size;
  background: #F5F5F5;
  font-family: "Pretendard JP";
}

.pdp-wrap .pdp__inner img {
  width: 100%;
  max-width: max-content;
  height: auto;
}

.pdp-wrap .pdp__inner sup {
  font-size: 50%;
  vertical-align: super;
}

.pdp-wrap .pdp__inner .note {
  font-size: min(2vw, 14px);

  @media screen and (min-width: 750px) {
    span {display: inline-block;}
  }
}

.green-tea-ceramide-milk {
  --gt-ttl-color: #00AF73;
  --gt-font-color: #3C3C3C;

  color: var(--gt-font-color);

  .main_visual {
    position: relative;

    .title {
      position: absolute;
      top: min(5vw, 40px);
      left: min(5vw, 5%);
      width: 74%;
    }
  }

  .intro {
    background-color: #EBEFF1;

    .intro_img {
      margin: auto;
      text-align: center;

      .note {
        margin-top: 2em;
      }

      img {
        margin: auto;
      }
    }

    .intro_img_2 {
      width: 90%;
    }

    h3 {
      color: var(--gt-ttl-color);
    }

    .intro_ttl {
      margin: 1em auto 1.4em;
      font-size: min(8.3vw, 65px);
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: -0.04em;

      &::before {
        content: "・・・";
        display: block;
        width: 1em;
        margin: auto auto 1em;
        font-size: 88%;
        letter-spacing: -0.25em;
        writing-mode: vertical-rl;
        text-orientation: upright;
      }
    }
  }

  .main {
    p {
      font-size: min(3vw, 25px);
      line-height: 1.5;
    }

    .main_number {
      font-size: min(11vw, 90px);
      font-weight: 500;
    }

    .main_ttl {
      margin-bottom: min(7.7vw,60px);
      padding-bottom: 0.2em;
      color: var(--gt-ttl-color);
      border-bottom: 1px solid var(--gt-ttl-color);
      sup {font-size: 40%;}

      .main_ttl_sholder {
        font-size: min(5.1vw, 40px);
        font-weight: 700;
      }

      .main_ttl_text {
        font-size: min(7vw, 55px);
        font-weight: 800;
        letter-spacing: -0.04em;
      }
    }
    .main_img {
        position: relative;
    }
    .main_text,.main_text_2 {
      strong {
        color: var(--gt-ttl-color);
      }
    }
    

    .main_01 {
      .main_text {
        position: absolute;
        left: 5%;
        bottom: min(7.7vw, 60px);
      }

      .main_01_inner {
        padding: min(6.6vw, 60px) 7.5% min(6.4vw, 60px) 5%;

        .note {
          margin-top: 1em;
        }
      }
    }
    .main_02{
      .main_img {background-color: #D0D9DB; }
      .main_text {
        position: absolute;
        left: 5%;
        top: min(3vw, 40px);
      }
      .main_02_inner{
        padding: min(5.1vw, 40px) 5%;
        background-color: #fff;
        h3{ 
          margin-bottom: min(5.1vw, 40px);
          text-align: center;
          span{ font-size: min(5.1vw, 40px);font-weight: 400;}
          .main_02_inner_h3{font-size: min(5.1vw, 40px);font-weight:700; color: var(--gt-ttl-color);display: block;}
        }
        img{ margin: auto auto min(7.7vw, 60px);width: 62%;}
      }
    }
    .main_03{
      /* .main_img {background-color: #D0D9DB; padding-top: 100px;} */
      .main_text {
        position: absolute;
        left: 5%;
        top: min(7.7vw, 60px);
      }
      .main_text_2{
        position: absolute;
        left: 5%;
        bottom: min(7.7vw, 60px);
      }
      .main_03_inner{
        padding: min(5.1vw, 40px) 5%;
        background-color: #fff;
        h3{ 
          margin-bottom: min(5.1vw, 40px);
          text-align: center;
          span{ font-size: min(5.1vw, 40px);font-weight: 400;}
          .main_03_inner_h3{font-size: min(5.1vw, 40px);font-weight:700; color: var(--gt-ttl-color);display: block;}
        }
        img{ margin: auto auto min(7.7vw, 60px);width: 62%;}
      }
    }

  }

  .detail{
    background-color: #DCE0E1;
    h2{ font-size: min(6.7vw, 53px); font-weight: 700; color:var(--gt-ttl-color); letter-spacing: -0.06em; margin:1em 5%; padding: min(5.1vw, 40px) 0 0; border-bottom:4px solid var(--gt-ttl-color);}
    .detail_img{ margin: min(5.1vw, 40px) auto auto; text-align: center;
    img{ margin: auto;
    &:last-of-type{margin-bottom: min(6vw, 40px);}}
    &.detail_img_3{width: 90%;}
    &.detail_img_4{width: 92%;}
  .note{margin-top: 1em;}}
  .detail_inner{
    background: linear-gradient(180deg, rgba(0, 175, 115, 0.80) -18.25%, rgba(255, 255, 255, 0.80) 113.8%);
    padding: min(7.7vw, 60px) 5% min(4vw, 20px);
    .note:first-of-type{text-align: right; margin-top: 1em;
    span{display: inline-block;}}
    .note:last-of-type{ margin-top: 3em;}
  }
  .detail_inner_ttl{
    color: #FFFF82;
    text-align: center;
    font-size: min(6.4vw, 50px);
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 0.5em;
    .detail_inner_subttl{
      display: block;
    margin-top: 1em;
    color: #FFF;
    font-size: min(3.5vw,28px);
    font-weight: 700;
    letter-spacing: -0.08em;
}
  }
  }
  .howto{
    h2{
      margin: min(5.1vw, 40px) 5%;
      color: var(--gt-ttl-color);
      font-size: min(7vw, 55px);
      font-weight: 800;
      letter-spacing: -0.04em;}
      .howto_number{
      font-size: min(11vw, 90px);
      padding: 0 min(5.1vw, 40px) 5%;
      line-height: 1;
      }
    .howto_inner{
      margin: min(5.1vw, 40px) auto min(8vw, 60px);
      p{
        margin: 0 5% 2em;
        font-size: min(3vw, 25px);
      line-height: 1.5;
      }
      .howto_img.col_2{
        display: flex;
        gap: 3%;
        justify-content: space-between;
      }
    }
  }
  .gt-foot{
    h2{
      color: var(--gt-ttl-color);
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.1em;
      text-align: center;
      margin: 1.5em auto 1em;
      .foot_subttl{font-size: min(5.1vw, 40px); display: block;}
      .foot_ttl{font-size: min(8.3vw, 65px); display: block;}
    }
  }

}