@charset "utf-8";
/*基本*/

/*mb*/
@media screen and (max-width:767px){

  .mo_top { z-index: -1 ; position:absolute ; top: 44px ; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none; background-size: 100%; }	
  .m_repeat_bg { z-index: -2 ; position:absolute ; top: 0 ;left:0;width:100%;height: 100%;background-repeat:repeat-y;background-position: center top;pointer-events:none;background-size: 100%;}

  .Area_hero {
    position: relative;
    aspect-ratio: 960 / 893;
    /*overflow: hidden;*/
  }

/*dog*/
  .Area_hero--PD.dog {
    z-index: 5;
    position: absolute;
    top: 40vw;
    right: 43vw;
    width: 30%;
  }

/*cat*/
  .Area_hero--PD.cat {
    z-index: 4;
    position: absolute;
    top: 47vw;
    right: 14vw;
    width: 35%;
  }

/* 副標題 */
.Area_hero--title {
  position: absolute;
  top: 31vw;
  right: 19vw;
  width: 60%;
  .swiper-pagination {
    display: none;
  }
}

/* 主標 */
.Area_hero--logo {
  position: absolute;
  top: 4vw;
  left: 10vw;
  width: 80%;
}

/* date */
.Area_hero--tag {
  position: absolute;
  top: 7.5vw;
  right: 10vw;
  width: 22%;
}

  .Area_drawing-area-2x1.item .PD_layout-CSSBG_01 .PD .PD_img {margin:2vw 2vw ;width: 90%;}
  .Area_drawing-area-2x1.item .PD_into {margin-left:2vw ;margin-top:1vw ;width: 91%;}

  .Area_title_lbtclass h3 { top: 1.5vw; }
  .Area_pd-D3_01 .PD_layout .PD h3 { top: 8.5vw; }
  
}

/*pc*/
@media screen and (min-width: 768px) {

  .bg_01 { z-index: -3 ; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
  .bg_deco02 { z-index: -2 ; position:absolute ; top: 900px ; left: 0px ; width:100%; height:100%; background-position:center top; background-repeat:repeat-y; transition:0.5s linear; pointer-events:none;  }
  .pc_repeat_bg { z-index: -4 ; position:absolute ; top: 0 ; left: 0 ; width:100%; height:100%; background-position:center top; background-repeat:repeat-y; transition:0.5s linear; pointer-events:none;}

  .Area_hero {
    position: relative;
    aspect-ratio: 960 / 900;
    /*overflow: hidden;*/

  }

  .Area_hero img {width:100%;}

/*dog*/
  .Area_hero--PD.dog {z-index:7 ;
    z-index: 5;
    position: absolute;
    top: 372px;
    right: 419px;
    width: 300px;
  }

/*cat*/
  .Area_hero--PD.cat {z-index:6 ;
    z-index: 4;
    position: absolute;
    top: 430px;
    right: 129px;
    width: 346px;
  }

/* 副標題 */
.Area_hero--title {z-index:5 ;
  position: absolute;
  top: 295px;
  right: 219px;
  width: 518px;
  .swiper-pagination {
    display: none;
  }
}

/* 主標 */
.Area_hero--logo {z-index:4 ;
  position: absolute;
  top: 45px;
  left: 96px;
  width: 779px;
}

/* date */
.Area_hero--tag {
  position: absolute;
  top: 79px;
  right: 96px;
  width: 197px;
}

  .Area_drawing-area-2x1.item .PD_layout-CSSBG_01 .PD .PD_img {margin:20px 23px 0;width: 90%;}
  .Area_drawing-area-2x1.item .PD_into {margin-left:13px ;margin-top:34px ;width: 94%;}
  .Area_drawing-area-2x1.item .PD_layout .PD p {height: 4em;line-height: 4em;color: #d62672;
}
  .Area_brand-1-plus-2 .b_box .PD_layout.PD_layout-D3_02 ul li .PD h3 {font-size: 40px;text-align: left;}

  .Area_title_lbtclass h3 {top: 14px; }

}









.Area_drawing-area-2x1.item .PD_layout[data-pd-h3="5"] .PD h3 span {
  display: inline-block;
  padding: 0 .5em;
  max-width: 85%;
  border-radius: 4px;
  color: #00b8ff;
  background-color: rgb(255 255 255 / 0%);
}


.Area_brand-1-plus-2 .b_box .PD_layout.PD_layout-D3_02 {background: #00000000 url(logo_text_bg.png?t=1783582638167)top center no-repeat;background-size:100%;}


.PD_layout.PD_layout-coupon3 .PD .divine_coupon, .PD_layout.PD_layout-coupon3 .PD .threshold {  color: #000000;  }








/*跳跳跳*/
.uptodown {-webkit-animation-duration: 1.5s;  animation-duration: 1.5s;  -webkit-animation-name: uptodown;  animation-name: uptodown;  -webkit-animation-iteration-count: infinite; /*animation-iteration-count:infinite;*/ -webkit-animation-direction: alternate;animation-direction: alternate;}
@-webkit-keyframes uptodown { 

 0%    { transform: translate(0,0px) ;}
 10%    { transform: translate(0,0px) ;}
 15%    { transform: translate(0,-10px) ;}
 20%    { transform: translate(0,0px) ;}
 100%  { transform: translate(0,0px) ;}
	
}

/*飄-上下*/
.uptodown-play { -webkit-animation:uptodown-play 0.5s ease-in-out infinite alternate;
  animation:uptodown-play 0.5s ease-in-out infinite alternate;}
@-webkit-keyframes uptodown-play { 
0%   { -webkit-transform: translate(0,10px); } 
100% { -webkit-transform: translate(0,0);}
}
@keyframes uptodown-play { 
0%   { transform: translate(0,-10px);} 
100% { transform: translate(0,0);}
}

.uptodown-play2 { -webkit-animation:uptodown-play 0.8s ease-in-out infinite alternate;
  animation:uptodown-play 0.8s ease-in-out infinite alternate;}
@-webkit-keyframes uptodown-play { 
0%   { -webkit-transform: translate(0,10px); } 
100% { -webkit-transform: translate(0,0);}
}
@keyframes uptodown-play { 
0%   { transform: translate(0,-10px);} 
100% { transform: translate(0,0);}
}