@charset "UTF-8";

/* sass */
.u-ft-xxs { font-size: 1rem !important; }
.u-ft-xs { font-size: 1rem !important; }
.u-ft-s { font-size: 1.2rem !important; }
.u-ft-m { font-size: 1.4rem !important; }
.u-ft-l { font-size: 1.6rem !important; }
.u-ft-xl { font-size: 1.8rem !important; }
.u-ft-xxl { font-size: 2.0rem !important; }
.clearfix:after { display: block; content: ''; clear: both; }
.u-ta-l { text-align: left !important; }
.u-ta-c { text-align: center !important; }
.u-ta-r { text-align: right !important; }
.u-ta-l-c { text-align: left !important; }
.u-ta-l-r { text-align: left !important; }
.u-ta-c-l { text-align: center !important; }
.u-ta-c-r { text-align: center !important; }
.u-ta-r-l { text-align: right !important; }
.u-ta-r-c { text-align: right !important; }
.u-disp-n { display: none !important; }
.u-disp-b { display: block !important; }
.u-disp-i-n { display: inline !important; }
.u-disp-ib-n { display: inline-block !important; }
.u-disp-b-n { display: block !important; }
.u-disp-n-i { display: none !important; }
.u-disp-n-ib { display: none !important; }
.u-disp-n-b { display: none !important; }
.u-br-sp { display: inline !important; }
.u-br-pc { display: none !important; }
.u-mg0 { margin: 0 !important; }
.u-mgt0 { margin-top: 0 !important; }
.u-mgb0 { margin-bottom: 0 !important; }
.u-mg-auto { margin-left: auto !important; margin-right: auto !important; }
.u-mgt-xxs { margin-top: 5px !important; }
.u-mgt-xs { margin-top: 10px !important; }
.u-mgt-s { margin-top: 15px !important; }
.u-mgt-m { margin-top: 20px !important; }
.u-mgt-l { margin-top: 25px !important; }
.u-mgt-xl { margin-top: 30px !important; }
.u-mgt-xxl { margin-top: 40px !important; }
.u-mgb-xxs { margin-bottom: 5px !important; }
.u-mgb-xs { margin-bottom: 10px !important; }
.u-mgb-s { margin-bottom: 15px !important; }
.u-mgb-m { margin-bottom: 20px !important; }
.u-mgb-l { margin-bottom: 25px !important; }
.u-mgb-xl { margin-bottom: 30px !important; }
.u-mgb-xxl { margin-bottom: 40px !important; }

.u-pd0 { padding: 0 !important; }
.u-pdt0 { padding-top: 0 !important; }
.u-pdb0 { padding-bottom: 0 !important; }
.u-pdt-xxs { padding-top: 5px !important; }
.u-pdt-xs { padding-top: 10px !important; }
.u-pdt-s { padding-top: 15px !important; }
.u-pdt-m { padding-top: 20px !important; }
.u-pdt-l { padding-top: 25px !important; }
.u-pdt-xl { padding-top: 30px !important; }
.u-pdt-xxl { padding-top: 40px !important; }
.u-pdb-xxs { padding-bottom: 5px !important; }
.u-pdb-xs { padding-bottom: 10px !important; }
.u-pdb-s { padding-bottom: 15px !important; }
.u-pdb-m { padding-bottom: 20px !important; }
.u-pdb-l { padding-bottom: 25px !important; }
.u-pdb-xl { padding-bottom: 30px !important; }
.u-pdb-xxl { padding-bottom: 40px !important; }

/* header-logo */
.uc-lyt-container.uc-header-logo{ display: none; }
.uc-lyt-container.uc-header-logo.uc-is-fixed{ display: block; }

/* container */
.uc-page-body .thmp-ped-container-st .uc-lyt-row{ padding: 0; }
.uc-page-body .thmp-ped-container-st  .uc-lyt-col{ padding: 0 3vw; }

.thmp-ped-bg-pt1{
  background: #28d1fb url(/content/dam/sites/th_mamypoko_com/images/inovation/premium-extra-dry/bg-thmp-ped-01.png) no-repeat center top;
  background-size: 100% auto;
  padding: 10vw 0;
}

.thmp-ped-bg-pt3{
  background: #edfaff url(/content/dam/sites/th_mamypoko_com/images/inovation/premium-extra-dry/bg-thmp-ped-03.png) no-repeat center top;
  background-size: 100% auto;
  margin-top: -10vw;
  padding: 20vw 0 20vw;
}

.thmp-ped-bg-pt4{
  background: #d0f3ff url(/content/dam/sites/th_mamypoko_com/images/inovation/premium-extra-dry/bg-thmp-ped-04.png) no-repeat center top;
  background-size: 100% auto;
  margin-top: -10vw;
  padding-top: 5vw;
  padding-bottom: 10vw;
}

.thmp-ped-bg-pt5{
  background: transparent url(/content/dam/sites/th_mamypoko_com/images/inovation/premium-extra-dry/bg-thmp-ped-05.png) no-repeat center top;
  background-size: 100% auto;
  margin-top: -10vw;
  padding-top: 20vw;
  padding-bottom: 10vw;
  border-bottom: #D0F3FF 4px dashed;
}

.thmp-ped-bg-pt6{
  background: transparent url(/content/dam/sites/th_mamypoko_com/images/inovation/premium-extra-dry/bg-thmp-ped-06.png) no-repeat center center;
  background-size: 100% auto;
  padding-top: 10vw;
  padding-bottom: 10vw;
}

.thmp-ped-bg-pt7{
  background: transparent url(/content/dam/sites/th_mamypoko_com/images/inovation/premium-extra-dry/bg-thmp-ped-07.png) no-repeat center top;
  background-size: cover;
  padding-top: 10vw;
  padding-bottom: 10vw;
}

/* hdg */
.thmp-ped-hdg-lv1{ margin-bottom: 0; }
.thmp-ped-hdg-lv1 img{ width: 100%; }

.thmp-ped-hdg-lv2-01{ margin-bottom: 0; }
.thmp-ped-hdg-lv2-01 img{ width: 720px; height: auto; }

.thmp-ped-hdg-lv2-02{ margin-bottom: 0; }
.thmp-ped-hdg-lv2-02 img{width: 763px; height: auto;}

.thmp-ped-hdg-lv2-03{ margin-bottom: 0; }
.thmp-ped-hdg-lv2-03 img{ width: 721px; height: auto; }

.thmp-ped-hdg-lv2-04{ margin-bottom: 0; }
.thmp-ped-hdg-lv2-04 img{ width: 720px; height: auto; }

.thmp-ped-hdg-lv2-05{ margin-bottom: 0; }
.thmp-ped-hdg-lv2-05 img{ width: 905px; height: auto; }

/* img */
.thmp-ped-img-pt1{ 
  text-align: center;
  margin-top: 3vw;
  background: transparent url(/content/dam/sites/th_mamypoko_com/images/inovation/premium-extra-dry/bg-thmp-ped-02.png) no-repeat center center;
  background-size: contain;
}
.thmp-ped-img-pt1 img{ width: 642px; height: auto; }

/* txt */
.thmp-ped-txt-pt1{ margin-top: 3vw; }
.thmp-ped-txt-pt1 p{
  font-size: 1.8rem;
  color: #003E95;
}

.thmp-ped-txt-pt2{ margin-top: 30vw; }
.thmp-ped-txt-pt2 p{
  font-size: 1.8rem;
  color: #003E95;
}

.thmp-ped-txt-pt3 p{
  font-size: 1.8rem;
  color: #003B90;
  font-weight: 700;
}
.thmp-ped-txt-pt3 p b{ color: #FD4D99; }

.thmp-ped-txt-sub p{
  font-size: 1.4rem;
  color: #707070;
}

.thmp-ped-col-pt1{ color: #39BDFD; font-weight: 500; }
.thmp-ped-col-pt2{ color: #FD4D99; font-weight: 500; }
.thmp-ped-txt-pt4{ margin-top: 3vw; }
.thmp-ped-txt-pt4 p{
  font-size: 1.5rem;
  font-weight: 500;
  color: #fff;
  text-shadow: 0px 3px 6px #00C7F8;
}

/* box */
.thmp-ped-box-pt1{
  position: relative;
  margin: 0 auto;
}

.thmp-ped-box-pt1 .thmp-ped-box-txt{
  background: #1aa0f1;
  border-radius: 20px;
  padding: 15px;
  width: 100%;
  margin-left: 0;
  box-shadow: 5px 5px 0 rgba(116,220,255,1);
}

.thmp-ped-box-pt1 .thmp-ped-inner-txt{
  border: #fff 2px dashed;
  border-radius: 20px;
  padding: 15px 15px 8vw;
}

.thmp-ped-box-pt1 .thmp-ped-inner-txt .CMP-CM10-text p{
  font-size: 1.7rem;
  color: #fff;
}

.thmp-ped-box-pt1 .thmp-ped-inner-txt .CMP-CM10-text + .CMP-CM10-text{ margin-top: 20px; }

.thmp-ped-box-pt1 .thmp-ped-box-img{
  position: absolute;
  width: 34%;
  bottom: -20vw;
  left: -5vw;
}

.thmp-ped-box-pt2{
  position: relative;
  margin: 0 auto;
  text-align: center;
}

.thmp-ped-box-pt2 .thmp-ped-box-img{
  position: absolute;
  width: 42%;
  bottom: -30vw;
  left: -5vw;
}

.thmp-ped-box-pt2 .thmp-ped-box-mov{
  margin-top: 6vw;
}

.thmp-ped-box-pt2 .thmp-ped-box-mov img{
  box-shadow: 0px 2px 6px 0px rgba(73,213,248,0.6);
  border: #49D5F8 3px solid;
  border-radius: 15px;
}

.thmp-ped-box-pt3{
  position: relative;
  max-width: 946px;
  margin: 0 auto;
}

.thmp-ped-box-pt3 .thmp-ped-box-pkg{
  width: 53.5%;
  margin-left: 46.5%;
  margin-top: 3vw;
}

.thmp-ped-box-pt3 .thmp-ped-box-img{
  position: absolute;
  width: 43.5%;
  bottom: 0;
  left: 0;
}

/* grid */
.thmp-ped-grid-pt1{
  margin: 6vw auto 0;
}

.thmp-ped-grid-pt1 .uc-lyt-grid-col-3{
  flex: 0 0 calc(50% - 6px);
  max-width: calc(50% - 6px);
  margin-left: 3px;
  margin-right: 3px;
}

.thmp-ped-grid-pt1 .thmp-ped-grid-txt-pt1,
.thmp-ped-grid-pt1 .thmp-ped-grid-txt-pt2,
.thmp-ped-grid-pt1 .thmp-ped-grid-txt-pt3,
.thmp-ped-grid-pt1 .thmp-ped-grid-txt-pt4{ text-align: center; margin: 3vw 0 6vw; }
.thmp-ped-grid-pt1 .thmp-ped-grid-txt-pt1 img{ width: 105px; height: auto; }
.thmp-ped-grid-pt1 .thmp-ped-grid-txt-pt2 img{ width: 171px; height: auto; }
.thmp-ped-grid-pt1 .thmp-ped-grid-txt-pt3 img{ width: 176px; height: auto; }
.thmp-ped-grid-pt1 .thmp-ped-grid-txt-pt4 img{ width: 208px; height: auto; }

.thmp-ped-grid-pt1 .thmp-ped-grid-img{ text-align: center; }
.thmp-ped-grid-pt1 .thmp-ped-grid-img img{
  width: 205px;
  height: auto;
  border-radius: 15px;
  border: #fff 3px solid;
  box-shadow: 0px 2px 6px 0px rgba(73,213,248,0.6);
}

.thmp-ped-grid-pt2{
  margin: 6vw auto 0;
  align-items: center;
}

.thmp-ped-grid-pt2 .uc-mod-media-01{ margin-bottom: 0; }
.thmp-ped-grid-pt2 .thmp-ped-txt-pt3{ margin-top: 3vw; }
.thmp-ped-grid-pt2 .thmp-ped-txt-sub{ margin-top: 1vw; }
.thmp-ped-grid-pt2.thmp-ped-grid-rev .thmp-ped-txt-pt3{ margin-top: 3vw; }

/* other */
.thmp-ped-btn-st{
  width: 40%;
  margin: 3vw auto 0;
}
.thmp-ped-btn-st a img{ transition: opacity .3s;}



@media print, all and (min-width: 769px) { 

  .u-ta-l-c { text-align: center !important; }
  .u-ta-l-r { text-align: right !important; }
  .u-ta-c-l { text-align: left !important; }
  .u-ta-c-r { text-align: right !important; }
  .u-ta-r-l { text-align: left !important; }
  .u-ta-r-c { text-align: center !important; }
  .u-disp-i-n { display: none !important; }
  .u-disp-ib-n { display: none !important; }
  .u-disp-b-n { display: none !important; }
  .u-disp-n-i { display: inline !important; }
  .u-disp-n-ib { display: inline-block !important; }
  .u-disp-n-b { display: block !important; }
  .u-br-sp { display: none !important; }
  .u-br-pc { display: inline !important; }
  a img.u-btn { opacity: 1.0; transition: opacity 0.3s; }
  a:hover img.u-btn { opacity: 0.8; }
  img.u-btn { opacity: 0.3; }
  .u-mg0 { margin: 0 !important; }
  .u-mg-auto { margin-left: auto !important; margin-right: auto !important; }
  .u-mgt-xxs { margin-top: 10px !important; }
  .u-mgt-xs { margin-top: 20px !important; }
  .u-mgt-s { margin-top: 30px !important; }
  .u-mgt-m { margin-top: 40px !important; }
  .u-mgt-l { margin-top: 50px !important; }
  .u-mgt-xl { margin-top: 60px !important; }
  .u-mgt-xxl { margin-top: 80px !important; }
  .u-mgb-xxs { margin-bottom: 10px !important; }
  .u-mgb-xs { margin-bottom: 20px !important; }
  .u-mgb-s { margin-bottom: 30px !important; }
  .u-mgb-m { margin-bottom: 40px !important; }
  .u-mgb-l { margin-bottom: 50px !important; }
  .u-mgb-xl { margin-bottom: 60px !important; }
  .u-mgb-xxl { margin-bottom: 80px !important; }
  .u-pd0 { padding: 0 !important; }
  .u-pdt-xxs { padding-top: 10px !important; }
  .u-pdt-xs { padding-top: 20px !important; }
  .u-pdt-s { padding-top: 30px !important; }
  .u-pdt-m { padding-top: 40px !important; }
  .u-pdt-l { padding-top: 50px !important; }
  .u-pdt-xl { padding-top: 60px !important; }
  .u-pdt-xxl { padding-top: 80px !important; }
  .u-pdb-xxs { padding-bottom: 10px !important; }
  .u-pdb-xs { padding-bottom: 20px !important; }
  .u-pdb-s { padding-bottom: 30px !important; }
  .u-pdb-m { padding-bottom: 40px !important; }
  .u-pdb-l { padding-bottom: 50px !important; }
  .u-pdb-xl { padding-bottom: 60px !important; }
  .u-pdb-xxl { padding-bottom: 80px !important; }

  /* [PC]container */
  .uc-page-body .thmp-ped-container-st .uc-lyt-row{ max-width: 1366px; }
  .uc-page-body .thmp-ped-container-st .uc-lyt-col{ padding: 0 50px; }

  .thmp-ped-bg-pt1{ padding: 4.5vw 0 0; }
  
  .thmp-ped-bg-pt3{
    margin-top: -11vw;
    padding: 18vw 0 15vw;
  }
  
  .thmp-ped-bg-pt4{
    margin-top: -5vw;
    padding-top: 0vw;
    padding-bottom: 10vw;
  }
  
  .thmp-ped-bg-pt5{
    margin-top: -10vw;
    padding-top: 10vw;
    padding-bottom: 8vw;
  }
  
  .thmp-ped-bg-pt6{
    background-size: 80% auto;
    padding-top: 6vw;
    padding-bottom: 10vw;
  }
  
  .thmp-ped-bg-pt7{
    padding-top: 10vw;
    padding-bottom: 10vw;
  }

  /* [PC]img */
  .thmp-ped-img-pt1{ margin-top: 1vw; }

  /* [PC]txt */
  .thmp-ped-txt-pt1{ margin-top: 1vw; }
  .thmp-ped-txt-pt1 p{ font-size: 2.4rem; }
  .thmp-ped-txt-pt2{ margin-top: 4vw; }
  .thmp-ped-txt-pt2 p{ font-size: 2.4rem; }
  .thmp-ped-txt-pt3 p{ font-size: 2.4rem; }
  .thmp-ped-txt-sub p{ font-size: 1.5rem; }
  .thmp-ped-txt-pt4{ margin-top: 1vw; }
  .thmp-ped-txt-pt4 p{ font-size: 3.0rem; }

  /* [PC]box */
  .thmp-ped-box-pt1{ max-width: 1100px; }
  .thmp-ped-box-pt1 .thmp-ped-box-txt{
    padding: 25px;
    width: 75%;
    margin-left: 25%;
    box-shadow: 10px 10px 0 rgba(116,220,255,1);
  }
  .thmp-ped-box-pt1 .thmp-ped-inner-txt{ padding: 15px; }
  .thmp-ped-box-pt1 .thmp-ped-box-img{ bottom: -3vw; left: 0vw;}

  .thmp-ped-box-pt2 .thmp-ped-box-mov{ margin-top: 3vw; padding: 0 15vw; }
  .thmp-ped-box-pt2 .thmp-ped-box-img{ width: 24%; bottom: -1vw; left: 1vw; }

  /* [PC]grid */
  .thmp-ped-grid-pt1{
    max-width: 904px;
    margin-top: 4vw;
  }

  .thmp-ped-grid-pt1 .uc-lyt-grid-col-3{
    flex: 0 0 calc(25% - 6px);
    max-width: calc(25% - 6px);
  }
  .thmp-ped-grid-pt1 .thmp-ped-grid-txt-pt1,
  .thmp-ped-grid-pt1 .thmp-ped-grid-txt-pt2,
  .thmp-ped-grid-pt1 .thmp-ped-grid-txt-pt3,
  .thmp-ped-grid-pt1 .thmp-ped-grid-txt-pt4{ margin: 1vw 0 4vw; }

  .thmp-ped-grid-pt2{ max-width: 946px; margin-top: 4vw; }
  .thmp-ped-grid-pt2 .thmp-ped-txt-pt3,
  .thmp-ped-grid-pt2 .thmp-ped-txt-sub{ padding-top: 0; padding-left: 10%; }
  .thmp-ped-grid-pt2.thmp-ped-grid-rev .uc-lyt-grid-col-flex:first-child{ order: 2; }
  .thmp-ped-grid-pt2.thmp-ped-grid-rev .uc-lyt-grid-col-flex:last-child{ order: 1; }
  .thmp-ped-grid-pt2.thmp-ped-grid-rev .thmp-ped-txt-pt3{padding-top: 0; padding-right: 10%;}
  
  /* [PC]other */
  .thmp-ped-btn-st{width: 28%;}

}