@charset "Shift_JIS";


body {color: #222;}

#pet-member {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  text-align: center;
}
#pet-member .smp{display: none;}

#pet-member .bg_left{
  position: fixed;
 mix-blend-mode: overlay;
  top: 5vh;left: -5%;
  max-width: 627px;width: 30%}
#pet-member .bg_right{
  position: fixed;
 mix-blend-mode: overlay;
  top: 5vh;right: -5%;
  background-size: cover;
  max-width: 627px;width: 30%;}


#pet-member img {width: 100%;}

#pet-member a:hover,
#pet-member a:hover img {opacity: 0.8;}

#pet-member .flex{display: flex;justify-content: center;}
#pet-member .flex_c{display: flex;flex-direction: column;}
#pet-member .clm1{
  padding-top: 20px;
  width: 100%;margin: auto;    display: flex;justify-content: center;}
#pet-member .wrap_12{    margin: auto;width: 100%;max-width: 980px;position: relative;}

main#wrapper{padding: 0 !important;max-width: 100% !important;}

/*------------------------------------------
decolation
------------------------------------------*/
#pet-member #nav_area{ 
    background-position: bottom;
    background-repeat: repeat-x;
}
#pet-member #cate1{ 
  background-color: #84e4d8d9;
  background: linear-gradient(to top, #83e5d6, #8cdce3);
  & .c_text > p:first-of-type{color:#89e0de!important;}
}
#pet-member #cate2{ 
  background-color: #95df7ad9;
  background: linear-gradient(to top, #95de79, #92e289);
  & .c_text > p:first-of-type{color:#95de79!important;}
}
#pet-member #cate3{ 
  background-color: #fee37ad9;
  background: linear-gradient(to top, #ffe57e, #f8d455);
  & .c_text > p:first-of-type{color:#fad962 !important;}}



/*------------------------------------------
text_deco
------------------------------------------*/
#pet-member .hot{    
  font-size: 1.6em;
  font-weight: 900;}
#pet-member .mini{font-size: 0.8em;}

#pet-member .bg_tex{position: absolute;color: #ffffff8a;}

/*-----*/
#pet-member .pkn {
  color: #e63b48;
	display: flex;
	justify-content: center;
	align-items: center;
}

#pet-member .pkn::before,
#pet-member .pkn::after {
	content: '';
	width: 2px;
	height: 1em;
	background-color:  #e63b48;;
}

#pet-member .pkn::before {
	margin-right: 1em;
	transform: rotate(-35deg)
}
#pet-member .pkn::after {
	margin-left: 1em;
	transform: rotate(35deg)
}



/*------------------------------------------
info
------------------------------------------*/
#pet-member .info{    
  display: flex;
  flex-direction: column;
  align-items: center; 
   & .pkn{color: #222 !important;margin-top: 3em;}
   & .pkn::before{background-color: #222;}
   & .pkn::after{    background-color: #222;}
  
  }


  
  #pet-member #title .info{      
    /*position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 147px;*/
    z-index: 100;}

#pet-member .btn_area {
  position: relative;
  display: inline-block;
  font-weight: bold; 
  line-height: 1.5;
  padding: 10px 60px 10px 70px;
  transition: 0.3s;
  text-decoration: none;
  color: #fff; 
  border-radius: 60px;
  background: #e63b48; 
  box-shadow: 0 5px 0 #be303b;
  margin-left: 10px;
  margin-top: 20px;
}

#pet-member .btn_area .entry {
  font-size: 23px;
}



#pet-member .btn_area:hover {
  transform: translate(0, 3px);
  background: #e63b48; 
  box-shadow: 0 2px 0 #be303b;
}



/*------------------------------------------
info>fixed
---------------------------------

#pet-member .fixed .btn_area2:hover {
  transform: translate(0, 3px);
  background: #e63b48; 
  box-shadow: 0 2px 0 #be303b;
}
---------*/

/*------------------------------------------
title
------------------------------------------*/
#pet-member #title{
& h1{        
  width: 80%;
  margin: 0.5em auto 0;
  max-width: 696px;
  position: relative;
z-index: 99;}

}

/*------------------------------------------
main>nav
------------------------------------------*/
#pet-member #nav_area{      
  padding: 3em 0 5em;
  & p {font-size: 1.2em; line-height: 1.2em;}
  & h2{margin-bottom: 0.5em;}}
#pet-member nav ul
{    justify-content: center;
  gap: 3em;
  width:70%;
  margin: auto;
  & p{ padding: 0.5em 0;}}

/*------------------------------------------
catebox
------------------------------------------*/


#pet-member .cate_box .wrap_12{     padding: 3em 0;}
#pet-member .cate_box .wrap_12 > div 
{    display: flex;
      justify-content: space-evenly;
      align-items: center;}

#pet-member .cate_box .c_image{
  width: calc(100% - 60%);    
  box-sizing: border-box;
  & img{  
    width: 80%;
    max-width: 350px;
    border-radius: 5px;
    overflow: hidden;
  }
}

#pet-member .cate_box .c_text{
  width: calc(100% - 40%);
    display: flex;
    flex-direction: column;
      & .pkn{color: white;}
      & > p:first-of-type{ font-size: 5em;font-weight: 900;        text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;}
      & h2{    color: white;  font-size: 2.6em; margin-bottom: 0.5em;        line-height: 1.2em;}

}

/*--cate2---*/
#pet-member #cate2{
  & .c_image{   animation: float 3s ease-in-out infinite;}
  
  & ul{width: 100%;gap: 1em;}
  & li{    border-radius: 90px;
    border: 4px solid white;
    display: flex;
    height: 184px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 1em;
    width: 13em;
    box-sizing: border-box;
    color: white;}
    .c2_2{max-width: 554px;
      width: 80%;
      margin: auto;}
}

@keyframes float {
  0% {
    transform: translateY(0) rotate(353deg);
  }
  50% {
    transform: translateY(-20px) rotate(353deg);
  }
  100% {
    transform: translateY(0) rotate(353deg);
  }
}

/*--cate3---*/
#pet-member #cate3 .clm1{
  & ul{
        gap: 1em;
        display: flex;
        width: 80%;
        text-align: center;
      }

  & li{
        width: calc(100% / 2);
        display: flex;
        margin: 0 auto;
      }
}

#pet-member #cate3 .item{
  display: flex;
  flex-direction: column;
  background-color: #f38885;

  &.no_event {
    background-color: #f38885;
    width: 80%;
    margin: 0 auto;
    padding: 1rem 0;
    color: #FFF;
  }

  & ul{
        gap: 1em;
        display: flex;
        width: 90%;
        padding: 0 20px 20px;
        text-align: center;
      }

  & p.item-name{
      line-height: 1.2em;
      font-size: 1em;
      margin-bottom: 2%;
    }

  & li{
    width: calc(100% / 2);
    display: flex;
    margin: 0 auto;
    background: #ffffff;
  }

  .item__title {
    color: #FFF;
    font-size: 1.2rem;
    position: relative;
    display: flex;
    align-items: center;
    padding: .5em 0;

    .emoji {
      font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
      position: absolute;
      left: -3.3rem;
      font-size: 1.8em;
      margin-top: -.5rem;
    }
  }

  .item__coupon {
    background: #ffffff;
    color: #e63b48;
    border: 3px solid;
    padding: .8em 2.5em;
    border-radius: 100vw;
    margin: 2rem 0 .5rem;
    font-size: 1.2rem;
    font-weight: 600;
    box-shadow: 0 1px 0 #e63b48;
  }

  .item__coupon__kome {
    font-size: .8rem;
    margin-bottom: .5rem;

    & a {
      font-size: 1em;
      color: #0064ff;
      margin: 0 .3em;
      border-bottom: 1px solid;
    }
  }
}

#pet-member #cate3 .clm1 ul li.sale_day div.c3_text {
  background-color:#f38885;
}
#pet-member #cate3 .clm1 ul li.sale_day div.c3_text p {
  color:#fff;
}

#pet-member #cate3 .clm1 ul li.sale_day div.c3_text p.hot {
  color:#ffea00;
}

#pet-member #cate3 .c3_day{
  width: 30%;    
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; 
  & .hot{font-size: 2em !important; line-height: 1em;
    & span{font-size: 0.5em;}}
  }
#pet-member #cate3 .c3_text{
  width: 100%;
  background-color: #fff;
  padding: 1em;
    & .hot{color: #e63b48;line-height: 1em;font-size: 2em !important; }
}
#pet-member #cate3 .c3_text a{
  display: block;
}
#pet-member #cate3 .c3_text .point {
  background-color: #ea0012;
  color:#fff;
}

#pet-member #cate3 .c3_text .price {
  font-size: 1.5em;
  font-weight: bold;
  color: #ea0012;
}

/*------------------------------------------
.others
------------------------------------------*/
#pet-member .others {
  display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      padding: 3em 0;
  & ul {
    display: flex;
    gap: 10px;
  }
  & .pkn{color: #222 !important;margin-top: 3em;}
  & .pkn::before{background-color: #222;}
  & .pkn::after{    background-color: #222;}
}

/* 250324 add toshima sta */
.header-info-red {
  display: none;
}
/*------------------------------------------
.confirm
------------------------------------------*/
#pet-member .confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -10px;
  .btn_area {
    margin-top: 5px;
    margin-left: 0;
  }
}
/*------------------------------------------
.stamp-card
------------------------------------------*/
#pet-member .stamp-card {
  width: 100%;
  box-sizing: border-box;
  margin-top: 3em;
  max-width: 460px;

  .title {
    color: #FFF;
    margin-bottom: 2%;
  }
  .stamp-card__inner {
    width: 100%;
    margin: 0 auto;
    .card-img {
      width: 100%;
      margin: 0 auto 3%;
      border-radius: 5px;
      overflow: hidden;
    }
    ul{
      display: flex;
      margin: 0 auto 1%;
      gap: 2px;
      li{        
        width: calc(100% / 3);
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #fbeb64;
        border-radius: 8px;
        .hot {
          margin-top: -10px;
          margin-bottom: 0;
      }
      }
    }
    & small {
      display: none;
      font-size: .8em;
    }
  }
  
}
.c_text small {
  display: block;
  font-size: .8em;
}

#pet-member .cate_box .wrap_12 > div.target-product {
  background: #FFF;
  border-radius: 5px;
  margin: 1.5em 0 .3em;
  flex-wrap: wrap;
  padding: 1.5em 1em 2.5em;
  box-sizing: border-box;

  .target-product__title {
    color: #79c55f;
    font-size: 1.5em;
    font-weight: 600;
    text-align: center;
    margin-bottom: .5em;
    display: block;
    width: 100%;
  }
  .target-product__content {
    display: block;
    width: 50%;

    .target-product__text {
      max-width: max-content;
      margin: 0 auto 2%;
      padding: 0 .3em .4em;
      display: flex;
      align-items: center;
      text-align: start;
    }
    .target-product__link {
      display: block;
      width: 90%;
      margin: 0 auto;
    }
    .target-product__linktext {
      color: #717171;
    }
    .batch {
      display: block;
      width: 7rem;
      margin-right: .3rem;
    }
  }
  .target-product__content-1 {
    width: 30%;
    margin-top: 1rem;
  }
  .target-product__content-2 {
    width: 60%;
  } 
}
#pet-member .flex li{
  flex: 1;
}
/* 250324 add toshima end */