<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "EUC-JP";
*{    margin: 0;
    padding: 0;    
    text-align: center;

    /* font-size: 16px; */}

body{	font-family: sans-serif ;    color: #333333;    padding-top: 0;}
ul{margin: 0;padding: 0;}
li{float: left;list-style: none;}
a{text-decoration:none; }


/*=======================================▼PCスマホ切り替え▼=======================================*/
@media screen and (min-width: 1025px) {
.smp{display: none;}
.pc{display: block;}
.pad{display: none;}
.prices{font-size: 1.2em;}
.prices span{font-size: 1.5em;bottom: 23% !important;}

}
@media screen and (max-width: 767px) {
    .pc { display: none !important; }
    .smp { display: block !important; }
    .pad { display: none !important; }
}    
@media screen and (min-width: 768px) and (max-width: 1024px){
    .pc { display: none !important; }
    .smp { display: none !important; }
    .pad { display: block !important; }
}    

  



#petkannohi{
    overflow: hidden;
    background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/image.wowma.jp/44587536/image/petkannohi/back.jpg),url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/image.wowma.jp/44587536/image/petkannohi/back2.jpg);
    background-position: left bottom,right top;
    background-repeat: no-repeat;
    background-color: white;
    position: relative;
    }

#petkannohi .main{width: 900px;padding: 0;}
#petkannohi .main{ margin: auto;overflow: hidden; background-color: white;  box-shadow:
    0 1.9px 2.5px rgba(0, 0, 0, 0.057),
    0 5px 6.1px rgba(0, 0, 0, 0.076),
    0 10.1px 11.4px rgba(0, 0, 0, 0.086),
    0 19.2px 19.8px rgba(0, 0, 0, 0.092),
    0 38.4px 34.8px rgba(0, 0, 0, 0.1),
    0 101px 74px rgba(0, 0, 0, 0.13);}
/* @media (min-width: 900px){#petkannohi .main{width: 900px;padding: 0;}}
 */


/*======================================================*/
/*看板*/
/*======================================================*/

#petkannohi .kanban img{width: 100%;}
#petkannohi .main &gt; :first-of-type.kanban{margin-bottom: 0;margin-top: 0 !important;border-top: 0;padding-top: 0;}

#petkannohi .kanban p{
    font-size: 1.5em;
    padding: 1%;
    background-color: #dee3e9;
    width: 25%;
    margin: 0 auto;
    font-weight: bold;
    border-radius: 90px;
    z-index: 100;
    display: inline;
    }
#petkannohi .kanban p::before,#petkannohi .kanban p::after {
    content: '';
    border: 1px solid #000;
    top: 48%;
    position: absolute;
    display: inline;
    width: 7.5vw;
}
#petkannohi .kanban p::before{left: -55%;z-index: -100;}
#petkannohi .kanban p::after{right: -55%;z-index: -100;}
p.get{position: relative;}

/*======================================================*/
/*クーポン*/
/*======================================================*/
#petkannohi .coupon{    display: inline-block;}
#petkannohi .coupon img{width: 100%;}
#petkannohi .coupon li{width: calc(100% / 3 - 4%); padding: 2%;}
#petkannohi .coupon img:hover{opacity: 0.8; background-color: white;}


/*======================================================*/
/*商品群*/
/*======================================================*/
#petkannohi ul.itemlist{ display: inline-block;}
#petkannohi ul.itemlist li{width: calc(100% / 3 - 4%); padding: 2%;}
#petkannohi .prdisp-taxin{    color: #dd3737;font-family: 'Staatliches', cursive;}
#petkannohi .value{font-size: 2em;}
#petkannohi ul.itemlist img:hover{opacity: 0.8; background-color: white; }
#petkannohi ul.itemlist img{border-radius: 10px;}


/*======================================================*/
/*動き*/
/*======================================================*/

/*-------------------表示------------------------------*/
/* .scr-target {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
}
.scr-target.is-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: 1s;
} */


#wrap ul{display: flex;justify-content: space-around;}
#wrap li.pic {width: 40%;}
#wrap li.pic img{width: 100%;}
#wrap li.txt {width: 60%;display: flex;flex-direction: column;flex-wrap: nowrap;align-items: center;position: relative;height: 100%;}
#wrap li.txt h4 {width: 100%;font-size: 1.5em;font-weight: 600;}
#wrap li.txt img{width: 85%;margin: 6% auto;}
#wrap li.txt p{ font-size: 1.2em;padding: 2% 3%;font-weight: 600;border-radius: 50px;color: #fff;}
#wrap li.txt a{width: 100%;}
#wrap li.txt p:hover{transform:translateY(5px);transition-duration:  0.3s;color: #fff68a;}
#wrap li.txt .coupon_link1 p {background-color: #333;/* margin: 5% auto 0; */}
#wrap li.txt .coupon_link2 p {background-color:  #8cc4df;}
#wrap li.txt .coupon_link3 p {background-color: #73d3c0;}


#wrap li.txt div h4{border-bottom: 2px dashed #000;width: 75%;margin: 0 auto;color: #333333;}
#wrap li.txt div:last-child{margin: 0 auto;width: 85%;}


.panel {
  display: none;
}
.panel.is-show {
  display: block;
}

.panel {
  background-color: #fff;
  height: auto;
  overflow: auto;
  padding: 2% 3% 2% 3%;
  opacity: 1;
  transition: .5s opacity;
}
.panel.one{
  border: 5px solid #e86a78!important;
}

.panel.eleven{
  border: 5px solid #8cc4df!important;
}

.panel.twenty{
  border: 5px solid #73d3c0!important;
}
  
.panel ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  flex-direction: row;
}
.panel ul .pic {
  text-align: justify;
}
.panel ul .txt {
  margin: 0 auto!important;
}
.panel ul li &gt; img{
  width: 88%;
}


  .tab {
    color: #fff;
    margin-top: -0.5rem;
    transition: margin .3s;
    align-items: center;
    display: flex;
    justify-content: center;
    background-color: #b7bcc1;
    text-align: center;
    padding: 0.8rem 1rem 0.1rem;
    order: -1;
    z-index: 1;
    cursor: pointer;
    display: flex;
    border-radius: 15px 15px 0 0;
    position: relative;
    width: 29%;
    font-size: 2rem;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    margin: 0.5rem 0 0 0;
    font-size: 1.8em;
    font-weight: bold;
    }

  #tab-group-wrap ul li.is-active{
    background-color: #e86a78;
    margin-top: -0.5rem;
  }

  #tab-group-wrap ul li.is-active:nth-child(2){
    background-color: #8cc4df;
  }

  #tab-group-wrap ul li.is-active:nth-child(3){
    background-color: #73d3c0;
  }

 

  .syouhin{
    border-bottom: 2px dashed #000;
    width: 75%;
    margin: 0 auto;
    color: #333333;
    font-size: 24px;
  }

  .yudou{
    background-color: #333;
    font-size: 1.2em;
    padding: 2% 3%;
    font-weight: 600;
    border-radius: 50px;
    color: #fff;
  }

  .samune1{
    margin: 6% auto;
  }

  #tab-group-wrap{
    max-width: 96%;
    margin: 0 auto;
    background-color: #dee3e9;
    flex-wrap: wrap;
    position: relative;
    width: 900px;
    padding: 3% 2% 10% 2%;
  }

  .tab-group{
    display: flex;
    justify-content:space-between;
  }

  #coupon11{
    background-color: #dee3e9;
    padding: 5% 0 10%;
    border-top: 3px dashed #fff;
  }
  
  #coupon22{
    background-color: #dee3e9;
    padding: 5% 0 10%;
    border-top: 3px dashed #fff;
  }

/*--------▲タブ切り替え▲---------- */


/*------------------------------------------------*/
/*    フッター      */
/*------------------------------------------------*/
#foot {
    width: 100%;
    background-color: #eb6877;
    padding: 0.8% 0;
    position: relative;
    margin: 0 auto;
    justify-content: center;
}
#foot &gt; div:last-child {
    /* margin: 0 30px; */
    padding: 0 8%;
}
#foot &gt; div:first-child {
    /* margin: 0 30px; */
    padding: 0 8%;
}

#foot p{
    padding: 0;
    color: #fff;
    padding: 0;
    color: #fff;
    /* background-color: #a5a5a5; */
    width: 100%;
    font-size: 1em;
}
#petkannohi .usa img{  width: 100%;}

#petkannohi .usa{
   width: 5%;
   position: absolute;
   bottom: 2%;
   /* left: -10%; */
   animation: 8s usatobi 0.5s forwards infinite linear;
   z-index: 1000;
}

@keyframes usatobi{
    0% {left: -20vw;  bottom: 2%;  opacity: 0%;}
    5% {left: 0vw;  bottom: 2%;  opacity: 100%;}
    20% {left: 20vw;  bottom: 3%;  opacity: 100%;}
    40% {left: 45vw;  bottom: 2%;  opacity: 100%;}
    60% {left: 70vw;  bottom: 3%;  opacity: 100%;}
    90% {left: 100vw;  bottom: 2%; opacity: 100%;}
    100% {left: 200vw;  bottom: 3%; opacity: 0%;}

}


/*------------------------------------------------*/
/* topへもどる      */
/*------------------------------------------------*/
#page_top{
    width: 3.5vw;
    height: 3.5vw;
    position: fixed;
    right: 1%;
    bottom: 1%;
    background: #e86a78;
    opacity: 0.6;
    border-radius: 50%;
  }
  #page_top a{
    position: relative;
    display: block;
    width: 6vw;
    height: 6vw;
    text-decoration: none;
  }
  #page_top p{
    position: absolute;
    bottom: 5.5vh;
    left: 0.8vw;
    font-size: 1vw;
    color: #fff;
    font-weight: 500;
  }
  #page_top a::before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f106';
    font-size: 2.2vw;
    color: #fff;
    position: absolute;
    width: 6vw;
    height: 6vw;
    top: 0vh;
    bottom: 0;
    right: 0;
    left: -1.2vw;
    /* margin: auto; */
    text-align: center;
  }
      

/*======================================================*/
/*       スマホ         */
/*======================================================*/
@media (max-width: 767px){
    body {width: 100%;}
    #petkannohi{ max-width: 100%;}
    #petkannohi .main{margin: auto; width: 100%;}

    .tab-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 3% 2% 10% 2%;
        position: relative;
        width: 100%;
        max-width: 96%;
        margin: 0 auto;
    }
    #tab-group-wrap ul li.is-active {
        margin-top: -0.05rem;
        transition: margin .3s;
        align-items: center;
        display: flex;
        justify-content: center;
    }    

    .tab{
      text-align: center;
      padding: 0.4rem 0 0.1rem;
      order: -1;
      z-index: 1;
      cursor: pointer;
      display: flex;
      border-radius: 10px 10px 0 0;
      position: relative;
      width: 32%;
      font-size: 2rem;
      flex-direction: row;
      flex-wrap: nowrap;
      margin: 0.5rem 0.2rem 0;
      font-size: 1em;
      font-weight: bold;
  }
  .panel {
      padding: 2% 0% 2% 3%;
    }
  
    .tab-label::before, .tab-label2::before, .tab-label3::before {
        position: absolute;
        content: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/image.wowma.jp/44587536/image/petkannohi/uo01s.png);
        top: -135%;
        left: 35%;
        width: 100%;
        transition: margin .3s;
        top: -6vw;
        left: 10vw;
    }
    .tab-switch:checked+.tab-label::before, .tab-switch:checked+.tab-label2::before, .tab-switch:checked+.tab-label3::before {
        position: absolute;
        content: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/image.wowma.jp/44587536/image/petkannohi/uo02s.png);
        top: -6vw;
        left: 10vw;
        width: 100%;
        transition: margin .3s;
        z-index: 100;
    }

    #wrap li.txt h4 {
        width: 100%;
        font-size: 1em;
        font-weight: 600;
    }
    #petkannohi ul.itemlist li {
        width: calc(100% / 3 - 2%);
        padding: 1%;
        margin: 0 auto;
    }
    .yudou{
        font-size: 0.7em;
        padding: 2% 3%;
        font-weight: 500;
        color: #fdf686;
        }

    .samune1{
      width: 85%
    }
    .syouhin{
      font-size: 16px;
    }
    .panel ul li &gt; img{
      width: 100%;
    }
    .smp1{
    width: 85%;
    margin: 0 auto;
    }
    .panel ul .pic {width: 45%;padding: 0;margin: auto 0;}
    .panel li.txt { width: 55%;
      display: flex;
      align-items: center;}
    #wrap li.txt img {width: 90%;}    
    #petkannohi .kanban p {width: 50%;font-size: 1.2em;}
    #petkannohi .kanban p::before, #petkannohi .kanban p::after {width: 18vw !important;}
    #petkannohi .kanban p::before {left: -28%;} 
    #petkannohi .kanban p::after {right: -28%;} 


    #petkannohi .usa {
        width: 15%;
        animation: 3s usatobi 0.3s forwards infinite linear;
        bottom: 5%;
    }
    @keyframes usatobi{
        0% {left: -20vw;  bottom: 2%;  opacity: 0%;}
        5% {left: 0vw;  bottom: 2%;  opacity: 100%;}
        20% {left: 20vw;  bottom: 1%;  opacity: 100%;}
        40% {left: 45vw;  bottom: 2%;  opacity: 100%;}
        60% {left: 70vw;  bottom: 1%;  opacity: 100%;}
        90% {left: 100vw;  bottom: 2%; opacity: 100%;}
        100% {left: 200vw;  bottom: 1%; opacity: 0%;}
    
    }
    
    #foot { padding: 1.8% 0;}
    #foot p { font-size: 1em;}
   
/*------------------------------------------------*/
/* topへもどる      */
/*------------------------------------------------*/
#page_top{
    width: 10vw;
    height: 10vw;
    right: 1%;
    bottom: 1%;
  }
  #page_top a{
    width: 10vw;
    height: 10vw;
    text-align: center;
  }
  #page_top p{
    top: 2.5vh;
    left: 0vw;
    font-size: 0.7em;
    color: #fff;
    position: relative;
    width: 10vw;
    height: 10vw;
    text-align: center;
  }
  #page_top a::before{
    content: '\f106';
    font-size: 1.5em;
    color: #fff;
    position: absolute;
    width: 10vw;
    height: 10vw;
    top: 0vh;
    bottom: 0;
    right: 0;
    left: 0;
    /* margin: auto; */
  }



}




/*======================================================*/
/*       タブレット       */
/*======================================================*/
@media screen and (min-width: 768px) and (max-width: 1024px){
    body {width: 100%;}
    #petkannohi{ max-width: 100%;}
    #petkannohi .main{margin: auto; width: 100%;}

    .tab-label, .tab-label2, .tab-label3 {width: 28% !important; font-size: 1.3em !important;}
    .tab-label::before, .tab-label2::before, .tab-label3::before {
     top: -6vw !important;  left: 10.5vw !important;}
    .tab-switch:checked+.tab-label::before, .tab-switch:checked+.tab-label2::before, .tab-switch:checked+.tab-label3::before {
     top: -6vw !important;left: 10.5vw !important;}

     .tab-wrap {width: 100%; background-color: #dee3e9;}
    section { padding: 5% 2%; margin: 0 auto;}
    section:last-of-type{ padding: 5% 2% 10%;}

    #petkannohi .kanban p {width: 40%;font-size: 1.5em;}
    #petkannohi .kanban p::before, #petkannohi .kanban p::after {width: 18vw !important;}
    #petkannohi .kanban p::before {left: -35%;} 
    #petkannohi .kanban p::after {right: -35%;} 
    #wrap li.txt img { width: 80%;}

    #petkannohi .usa {
        width: 10%;
        animation: 4s usatobi 0.3s forwards infinite linear;
        bottom: 5%;
    }
    @keyframes usatobi{
        0% {left: -20vw;  bottom: 2%;  opacity: 0%;}
        5% {left: 0vw;  bottom: 2%;  opacity: 100%;}
        20% {left: 20vw;  bottom: 1%;  opacity: 100%;}
        40% {left: 45vw;  bottom: 2%;  opacity: 100%;}
        60% {left: 70vw;  bottom: 1%;  opacity: 100%;}
        90% {left: 100vw;  bottom: 2%; opacity: 100%;}
        100% {left: 200vw;  bottom: 1%; opacity: 0%;}
    }
    

/*------------------------------------------------*/
/* topへもどる      */
/*------------------------------------------------*/
#page_top{
    width: 7vw;
    height: 7vw;
    right: 1%;
    bottom: 3.5%;
  }
  #page_top a{
    width: 7vw;
    height: 7vw;
  }
  #page_top p{
    top: 2.8vh;
    left: 0vw;
    font-size: 1em;
    color: #fff;
    width: 7vw;
    height: 7vw;
  }
  #page_top a::before{
    font-size: 2.2em;
    color: #fff;
    width: 7vw;
    height: 7vw;
    top: -0.2vh;
    bottom: 0;
    right: 0;
    left: 0vw;
    /* margin: auto; */
  }




 /* デバイス横向きで 画面の横幅が 768px以上 1024px以下の場合のスタイルを記述*/

@media screen and (min-width: 768px) and (max-width: 1368px) and (orientation: landscape) {
 
#page_top{
    width: 5vw;
    height: 5vw;
    right: 1%;
    bottom: 1.5%;
  }
  #page_top a{
    width: 7vw;
    height: 7vw;
  }
  #page_top p{
    top: 3.5vh;
    left: -1vw;
    font-size: 0.8em;
    color: #fff;
    width: 7vw;
    height: 7vw;
  }
  #page_top a::before{
    font-size: 2.2em;
    color: #fff;
    width: 7vw;
    height: 7vw;
    top: 0vh;
    bottom: 0;
    right: 0;
    left: -1vw;
    /* margin: auto; */
  }
 
}

@media only screen and (min-width: 540px) and (max-width: 720px) and (orientation: landscape){
#page_top{
    width: 7vw;
    height: 7vw;
    right: 1%;
    bottom: 1.5%;
  }
  #page_top a{
    width: 7vw;
    height: 7vw;
  }
  #page_top p{
    top: 3vh;
    left: 0vw;
    font-size: 0.5em;
    color: #fff;
    width: 7vw;
    height: 7vw;
  }
  #page_top a::before{
    font-size: 1.5em;
    color: #fff;
    width: 7vw;
    height: 7vw;
    top: 0vw;
    bottom: 0;
    right: 0;
    left: 0vw;
  }
}
}</pre></body></html>