@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Mali:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Dongle:ital,wght@0,300;0,400;0,700&family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
/* CSS Document */
*{
    -webkit-text-size-adjust: none !important;
  }
  html, body, p, ol, dl, dt, dd, ul, li, td, blockquote, figure, fieldset, form, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
  }
  body, html  {overflow-x: hidden; position:relative;}
  body{
    color:#333;
    font-family: "Mali", arial, Helvetica, sans-serif, Tahoma ;
    font-size:1rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -moz-pre-wrap: break-word;
    padding:0;
    margin:0;
    min-width: 320px;
    padding-right: 0 !important;
  }
  a {text-decoration:none; cursor:pointer;}
	a:hover { text-decoration: none;}
	a img{border:none; cursor:pointer;}
	a input, a button, a:hover input, a:hover button, input:hover, button:hover{ text-decoration:none !important;}
	.img_click, onclick {cursor:pointer;}
  .main{
    max-width:1004px;
    margin:0px auto;
  }
  
  ul, li{
    list-style: none;
    padding:0;
    margin: 0;
  }
  img {
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;}
 form { margin:0; padding:0} 


.mali-extralight {font-family: "Mali", cursive; font-weight: 200;font-style: normal;}
.mali-light {font-family: "Mali", cursive; font-weight: 300;font-style: normal;}
.mali {font-family: "Mali", cursive; font-weight: 400;font-style: normal;}
.mali-medium {font-family: "Mali", cursive; font-weight: 500;font-style: normal;}
.mali-semibold {font-family: "Mali", cursive; font-weight: 600;font-style: normal;}
.mali-bold {font-family: "Mali", cursive; font-weight: 700;font-style: normal;}

.sarabun-extralight {font-family: "Sarabun", sans-serif;font-weight: 200;font-style: normal;}
.sarabun-light {font-family: "Sarabun", sans-serif;font-weight: 300;font-style: normal;}
.sarabun {font-family: "Sarabun", sans-serif;font-weight: 400;font-style: normal;}
.sarabun-medium {font-family: "Sarabun", sans-serif;font-weight: 500;font-style: normal;}
.sarabun-semibold {font-family: "Sarabun", sans-serif;font-weight: 600;font-style: normal;}
.sarabun-bold {font-family: "Sarabun", sans-serif;font-weight: 700;font-style: normal;}
.sarabun-extrabold {font-family: "Sarabun", sans-serif;font-weight: 800;font-style: normal;}

.dongle-light {font-family: "Dongle", sans-serif;font-weight: 300;font-style: normal;}
.dongle {font-family: "Dongle", sans-serif;font-weight: 400;font-style: normal;}
.dongle-bold {font-family: "Dongle", sans-serif;font-weight: 700;font-style: normal;}

.txt-border { text-shadow: rgb(255, 255, 255) 2px 0px 0px, rgb(255, 255, 255) 1.75517px 0.958851px 0px, rgb(255, 255, 255) 1.0806px 1.68294px 0px, rgb(255, 255, 255) 0.141474px 1.99499px 0px, rgb(255, 255, 255) -0.832294px 1.81859px 0px, rgb(255, 255, 255) -1.60229px 1.19694px 0px, rgb(255, 255, 255) -1.97998px 0.28224px 0px, rgb(255, 255, 255) -1.87291px -0.701566px 0px, rgb(255, 255, 255) -1.30729px -1.5136px 0px, rgb(255, 255, 255) -0.421592px -1.95506px 0px, rgb(255, 255, 255) 0.567324px -1.91785px 0px, rgb(255, 255, 255) 1.41734px -1.41108px 0px, rgb(255, 255, 255) 1.92034px -0.558831px 0px;}
.txt-bold { font-weight: bold;}
.txt-orange { color: #f16147;}
.txt-blue { color: #3d7bc6;}
.txt-purple { color: #c144f8;}

button {
  border-radius: 20px;
  padding: 3px 15px;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
}
article {line-height: 1.5rem;}
div.zoom, button.zoom { margin: 5px;}
div.zoom:hover, button.zoom:hover { transform: scale(1.1); margin: 0px;}
/*-----Header-----*/

.wallpaper { 
  background: url(../images/sec1-wallpaper.jpg) repeat; 
  /*height: 360px;*/
  position: relative;
}
.wallpaper::after { 
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; 
  height: 60px;
  background: url(../images/sec1-floor.jpg) repeat;
  z-index: 1;
}

.section-header .main {
  position: relative; 
  z-index: 2; 
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 95%;
}
.section-header .main>div { display: inline-block; }
.section-header .main div img { vertical-align: bottom;}
.section-header .main .center { text-align: center;}
.section-header .main .center  button {background: #417bc5; border: #fff 1px solid;color: #fec538;}
.section-header .main {background: url(../images/sec1-maid.png) no-repeat right bottom; background-size: 430px;}
.section-header .maid {min-width: 190px; height: auto;}
.section-header .txt div{ display: inline-block;}
.section-header .logo .hime { max-width: 226px; height: auto;}
.section-header .logo .flag { width: 94px; vertical-align: top; height: auto;}
.section-header .shelf img { width: 220px;  height: auto;}

/*-------Shampoo-------*/
.section-shampoo {background: #fac635;}
.section-shampoo button.btn-1 {border: #2f70bb 1px solid; background: #04c39e; color: #fff;}
.section-shampoo button.btn-2 {border: #fb4d44 1px solid; background: #06bcf9; color: #fff;}
.section-shampoo .shampoo .img, .section-shampoo .cream .img{ width: 100%; max-width: 410px;  height: auto;}
.section-shampoo .shampoo , .section-shampoo .cream { text-align: center;}
.section-shampoo article { font-size: 0.8rem;}


/*-------Cleaner-------*/
.section-cleaner { background: #2e6fbe; color: #fff;}
.section-cleaner article { font-size: 0.85rem;}
.section-cleaner .feature { background: #fff; border-radius: 60px; border:#04c39e 2px solid; max-width: 678px; width: 100%; padding: 0.5rem; margin-left: auto; margin-right: auto; font-weight: 500;}
.section-cleaner .feature li{ display: inline-block;}
.section-cleaner .feature li::after{
  content: ""; background: url(../images/sec3-foot-s.svg) no-repeat; width: 16px; height: 16px; background-size: cover; display: inline-block;
  margin-left: 5px; margin-right: 5px;
}
.section-cleaner .feature li:nth-of-type(3)::after, .section-cleaner .feature li:last-of-type::after { display: none;}
.section-cleaner .product {background: url(../images/sec3-dog.png) no-repeat; background-position: left 10px bottom -55px; position: relative;  background-size: 1000px;}
.section-cleaner .dongle {font-size: calc(3.375rem + 1.5vw); line-height: 2.5rem;}

.section-cleaner .content {position: relative;}
.section-cleaner .content::before, .section-cleaner .content::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 0;
  height: 100%; background: url(../images/sec3-foot-b.svg) no-repeat; 
  background-size: contain; background-repeat: no-repeat;
}
.section-cleaner .content::before {left: 10px; top: 35%; width: 80px; transform: scaleX(-1); }
.section-cleaner .content::after {right: 10px; top: 45%; width: 100px; }
.section-cleaner .content article {position: relative; z-index: 1;}

.section-cleaner .floor .title { background: #f39bff; color: #fff; display: inline-block; padding: 0.5rem; box-shadow: 3px 3px 0 #fff;}
.section-cleaner .floor .small { font-size: 0.75rem;}
.section-cleaner .floor button { background: #fbc736; color: #fff; border: #fff 1px solid;}
.section-cleaner .floor .board { font-weight: bold;}
.section-cleaner .floor .bottle img { width: 270px;  height: auto;}
.section-cleaner .spray { min-height: 350px;}
.section-cleaner .spray .title { background: #fac635; color: #2e6fbe; display: inline-block; padding: 0.5rem 1rem 0.5rem 0.5rem; box-shadow: 3px 3px 0 #fff;}
.section-cleaner .spray .small { font-size: 0.75rem;}
.section-cleaner .spray button { background: #f39bff; color: #fff; border: #fff 1px solid;}
.section-cleaner .spray .pic { position: absolute; z-index: 1; bottom: 70px; right: 100px;}
.section-cleaner .spray .bottle { position: absolute; z-index: 2; bottom: 25px; right: 310px;}
.section-cleaner .spray .bottle img { width: 130px;  height: auto;}
.section-cleaner .spray .board { position: absolute; z-index: 5; bottom: 0; right: 90px; transform: scale(0.8); font-weight: bold; padding-bottom: 60px;}
.section-cleaner .spray .cat { position: absolute; z-index: 7; bottom: 5px; right: 0;}
.section-cleaner .spray .btn-more { position: absolute; z-index: 7; bottom: 5px; right: 110px; width: 210px; text-align: center;}

/*-----Diaper-----*/
.section-diaper { background: #fcaed2; position: relative;}
.section-diaper .dongle {
  font-size: calc(3.375rem + 1.5vw);
  line-height: 2.5rem;
  color: #2A91BA;
  text-shadow: rgb(255, 255, 255) 4px 0px 0px, rgb(255, 255, 255) 3.87565px 0.989616px 0px, rgb(255, 255, 255) 3.51033px 1.9177px 0px, rgb(255, 255, 255) 2.92676px 2.72656px 0px, rgb(255, 255, 255) 2.16121px 3.36588px 0px, rgb(255, 255, 255) 1.26129px 3.79594px 0px, rgb(255, 255, 255) 0.282949px 3.98998px 0px, rgb(255, 255, 255) -0.712984px 3.93594px 0px, rgb(255, 255, 255) -1.66459px 3.63719px 0px, rgb(255, 255, 255) -2.51269px 3.11229px 0px, rgb(255, 255, 255) -3.20457px 2.39389px 0px, rgb(255, 255, 255) -3.69721px 1.52664px 0px, rgb(255, 255, 255) -3.95997px 0.56448px 0px, rgb(255, 255, 255) -3.97652px -0.432781px 0px, rgb(255, 255, 255) -3.74583px -1.40313px 0px, rgb(255, 255, 255) -3.28224px -2.28625px 0px, rgb(255, 255, 255) -2.61457px -3.02721px 0px, rgb(255, 255, 255) -1.78435px -3.57996px 0px, rgb(255, 255, 255) -0.843183px -3.91012px 0px, rgb(255, 255, 255) 0.150409px -3.99717px 0px, rgb(255, 255, 255) 1.13465px -3.8357px 0px, rgb(255, 255, 255) 2.04834px -3.43574px 0px, rgb(255, 255, 255) 2.83468px -2.82216px 0px, rgb(255, 255, 255) 3.44477px -2.03312px 0px, rgb(255, 255, 255) 3.84068px -1.11766px 0px, rgb(255, 255, 255) 3.9978px -0.132717px 0px,
  rgb(83, 8, 45) 10px 0px 7px;
  }
  .section-diaper article{ font-size: 0.8rem;}
  .section-diaper .feature { z-index: 3; position: relative;}
  .section-diaper .feature li{ margin-bottom: 1rem; display: flex; gap: 1rem;  font-weight: 500;
    background: #dd6bcd; border-radius: 50px; padding: 0.5rem 1rem; align-self: center; align-items: center;
    box-shadow: #af4ba5 3px 3px 0px; cursor: pointer; }
  /*.section-diaper .feature li .fs-6{ line-height: 0.5rem;}*/
  .section-diaper .feature li .fs-6{margin-top: -5px;}
  .section-diaper .feature li img { width: 32px; height: 32px;}
  .section-diaper .dog{ position: absolute; right: 0; bottom: 30px; z-index: 10;}
  .section-diaper .foot-1{ position: absolute; bottom:10%; left: -5%; z-index: 0; transform: rotate(45deg);}
  .section-diaper .foot-1 img { width: 100px; height: auto;}
  .section-diaper .foot-2{ position: absolute; left:40%; bottom: 5%; z-index: 0;}
  .section-diaper .foot-2 img { width: 80px; height: auto;}
  .section-diaper .foot-3{ position: absolute; right: 30px; top: 30%; z-index: 0;}
  .section-diaper .foot-3 img { width: 80px; height: auto;}
  .section-diaper .foot-4{ position: absolute; right: 7%; bottom: 30px; transform: rotate(30deg); z-index: 0;}
  .section-diaper .foot-4 img { width: 60px; height: auto;}
  .section-diaper .product, .section-diaper .board { position: relative; z-index: 2;}

/*---Footer----*/ 
.section-footer {background: #a4eeff; position: relative;} 
.section-footer .btn-outline { border: #175dcc 2px solid; color: #175dcc; background: none; border-radius: 50px; font-weight: 600;     
  font-size: 2.5rem; line-height: 1.5rem; padding: 7px 15px 0 15px;}
.section-footer .tel a{ color: #333; font-weight: 600; }
.section-footer .contact { z-index: 100; position: relative;}
.section-footer .park { z-index: 1; position: relative;/* min-height: 400px;*/}
.section-footer .cloud { position: absolute; right: -13%; bottom: 25%;  z-index: 2;}
/*.section-footer .floor-lower { position: absolute; left: 0; bottom: 0; z-index: 5;}*/
.section-footer .floor-lower { position: relative; z-index: 5; margin-top: -180px;}
.section-footer .floor-upper { position: absolute; right: 0; bottom: 0;  z-index: 10;}
.section-footer .dog { position: absolute; right: 15%; bottom: 5%;  z-index: 12;}
.section-footer .white-dog { position: absolute; left: -15px; bottom: 0;  z-index: 14;}
.section-footer .bush { position: absolute; right: 0; bottom: 0; z-index: 16;}
.section-footer .qrcode { position: absolute; left: 160px; bottom: 2%;  z-index: 18; font-size: 12px;}


.pd-img { width: 100%; max-width: 800px; display: block;  height: auto;}


@media only screen and (max-width: 1024px) { 
  .section-shampoo .cream .img{right: -40px; position: relative;}
  .section-shampoo .cream { text-align: right;}
  .section-shampoo .shampoo .img{left: -40px; position: relative;}
  .section-shampoo .shampoo { text-align: left;}
}

@media only screen and (min-width: 767px) { 
  .section-header .maid img { display: none;}
}
@media only screen and (min-width: 1px) and (max-width: 900px){
  .section-footer .floor-lower { margin-top: -100px;}
  .section-footer .cloud {right: -20%; bottom: 20%;}
}
@media only screen and (min-width: 768px) and (max-width: 865px){
/*-----Header-----*/

.section-header .center { margin-left: -4vw;}
.section-header .center img.px-3 {padding-left:0 !important;}


}

@media only screen and (min-width: 641px) and (max-width: 820px){
body, html  {overflow-x: hidden !important; position:relative;}
.main{
  width:100%;
  margin:0px auto;
  padding: 0;
}
.disPad { display:none}

}

@media only screen and  (max-width: 607px){
  .section-cleaner .feature li:nth-of-type(3)::after { display: inline-block;}
 /* .section-cleaner .content::after, .section-cleaner .content::before { display: none;}*/
 .section-cleaner .content::before {left: 10px; top: 47%; width: 60px;}
 .section-cleaner .content::after {right: 10px; top: 52%; width: 80px; }

}
@media only screen and (min-width: 1px) and (max-width: 767px){
.main{
  width:100%;
  /*max-width:640px;*/
  min-width:300px;
  margin:0px auto;
  border-radius: 0px;	
  -moz-border-radius:0px; 
  -webkit-border-radius:0px;
  padding: 0;
}
.disPhone { display:none}

/*-----Header-----*/
.section-header .main {display: block; background: none; padding-bottom: 340px; }
.section-header .main>div { display: block; }
.section-header .logo .flag { width: 75px; vertical-align: top; height: auto;}
.section-header .maid img { display: block;  width: 344px; height: auto;}
.section-header .shelf {position: absolute; z-index: 3; bottom: 20px;}
.section-header .shelf img { width: 176px;  height: auto;}
.section-header .sofa {display: none;}
.section-header .maid {position: absolute; z-index: 7;  bottom: 0px; right: 0;}

/*-----Cleaner-----*/

.section-cleaner .product { background-position: top 30% left 10px;}
.section-cleaner .floor .bottle {padding-left: 25%;}
.section-cleaner .spray .pic { bottom: 70px; right: 20px;}
.section-cleaner .spray .bottle {bottom: 25px; right: auto; left: 5%;}
.section-cleaner .spray .board{ bottom: 0; right: 40px;}
.section-cleaner .spray .btn-more { right: 60px;}
.section-cleaner .spray .cat { bottom: 5px; right: -50px;}

.section-cleaner .feature li::after, .section-cleaner .feature li:nth-of-type(3)::after {
  display: none;
}
.section-cleaner .feature li::before{
  content: ""; background: url(../images/sec3-foot-s.svg) no-repeat; width: 16px; height: 16px; background-size: cover; display: inline-block;
  margin-left: 5px; margin-right: 5px;
}

/*-----Diaper-----*/
.section-diaper .feature { width: 320px; height: auto;}
.section-diaper .dog { bottom: 50px;}
.section-diaper .foot-1 { bottom: auto;}
.section-diaper .foot-2 { bottom: auto; top: 0%;}
.section-diaper .foot-3 { right: -10px; top: 50%;}
.section-diaper .foot-4 { bottom: 1%;}





@supports (-webkit-touch-callout: none) 
  {
	strong, h1,h2,h3,h4,h5, .b {letter-spacing: -0.5px;} 
  }
  
}
@media only screen and (min-width: 1px) and (max-width: 640px){
  .section-footer .park {position: relative;}
  .section-footer .cloud { right: -35%; bottom: 40%;}
  .section-footer .floor-lower {margin-top: 0;}
  .section-footer .floor-lower::after{ display: block; content: ""; width: 100%; height: 250px; background: #78a861; position: relative; margin-top: -2px;}
  .section-footer .dog { right: 5%; bottom: 35%; z-index: 7; }
  .section-footer .white-dog {left: -15px; bottom: 250px;}
  .section-footer .qrcode { left: 10px; bottom: 2%;}
}
@media only screen and (min-width: 520px) and (max-width: 767px){
  .section-header .sofa {position: absolute; z-index: 5;  bottom: 0px; display: block; margin-left: 25vw;}

  .section-cleaner .product {background-position: top 20% left -10%;}
  .section-cleaner .floor .bottle {padding-right: 15%;}
  .section-cleaner .spray .pic { bottom: 70px; right: 130px;}
  .section-cleaner .spray .bottle {bottom: 25px; right: auto; left: 10%;}
  .section-cleaner .spray .board { bottom: 0; right: 120px;}
  .section-cleaner .spray .btn-more { bottom: 0; right: 140px;}
  .section-cleaner .spray .cat { bottom: 5px; right: 30px;}
}

@media only screen and (min-width: 1px) and (max-width: 460px){

  /*-----Cleaner-----*/
  .section-cleaner .content::before {left: 10px; top: 35%; width: 40px;}
  .section-cleaner .content::after {right: 10px; top: 42%; width: 60px; }

    /*---Footer----*/ 
    .floor {zoom: 90%;}
}

@media only screen and (min-width: 1px) and (max-width: 360px){

  /*-----Header-----*/
  .section-header .main { padding-bottom: 300px; }
  .section-header .logo .px-3 { width: 200px; height: auto;}
  .section-header .logo .flag { width: 56px; height: auto;}
  .section-header .shelf img { width: 154px; height: auto;}
  .section-header .maid img { width: 300px; height: auto;}

  /*-----Cleaner-----*/
  /*.section-cleaner .main .product img{transform: scale(0.7);}*/
  .section-cleaner .product {
    background-position: top 30% left 20px;
    background-size: 230%;}
  .section-cleaner .spray {min-height: 320px;}
  .section-cleaner .spray .bottle { left: 0;}

  /*-----Diaper-----*/
  .section-diaper .feature { width: auto;}
  .section-diaper .dog { right:-10px}


  /*---Footer----*/ 
  .floor {zoom: 80%;}
}



@media only screen and (min-width: 819px) {
 .disPC {display:none}
}
 
@media only screen and (max-width: 820px) {
 .disNone {display:none}
}