@charset "euc-jp";


/*
  Made by Elly Loel - https://ellyloel.com/
*/
*{margin:0;padding:0;line-height:calc(0.25rem+1em+0.25rem)}*,::before,::after{box-sizing:border-box}*:where(:not(fieldset,progress,meter)){border-width:0;border-style:solid;background-origin:border-box;background-repeat:no-repeat}
html{block-size:100%;-webkit-text-size-adjust:none}
@media(prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}
body{text-rendering:optimizeSpeed;min-block-size:100%}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,svg,video){block-size:auto;max-inline-size:100%}:where(svg){stroke:none;fill:currentColor}:where(svg):where(:not([fill])){stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}:where(svg):where(:not([width])){inline-size:5rem}:where(input,button,textarea,select),:where(input[type="file"])::-webkit-file-upload-button{color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit;word-spacing:inherit}:where(textarea){resize:vertical}
@supports(resize:block){:where(textarea){resize:block}}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}
h1{font-size:2em}:where(ul,ol){list-style-position:inside}:where(ul,ol)[role="list"]{list-style:none}
a:not([class]){text-decoration-skip-ink:auto}:where(a[href],area,button,input,label[for],select,summary,textarea,[tabindex]:not([tabindex*="-"])){cursor:pointer;touch-action:manipulation}:where(input[type="file"]){cursor:auto}:where(input[type="file"])::-webkit-file-upload-button,:where(input[type="file"])::file-selector-button{cursor:pointer}
@media(prefers-reduced-motion:no-preference){:focus-visible{transition:outline-offset 145ms cubic-bezier(0.25,0,0.4,1)}:where(:not(:active)):focus-visible{transition-duration:0.25s}}:where(:not(:active)):focus-visible{outline-offset:5px}:where(button,button[type],input[type="button"],input[type="submit"],input[type="reset"]),:where(input[type="file"])::-webkit-file-upload-button,:where(input[type="file"])::file-selector-button{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;text-align:center}:where(button,button[type],input[type="button"],input[type="submit"],input[type="reset"])[disabled]{cursor:not-allowed}
a{text-decoration: none; color: black;}
h1,h2,h3,h4,h5,h6{font-size: unset;font-weight: unset;}
li{list-style: none;}
img{width: 100%;}

.smp{display: none !important;}

/*-----------------------------------------------------------------------------------------
base
----------------------------------------------------------------------------------------*/

body{background-color: #e3dfd6;font-size: 16px;
  font-family: "Noto Sans JP", sans-serif;
}

.c_cat a,.c_pick a,.c_food a,.c_event a,.c_top a{color: #f5f5f5;}

a:hover img{opacity: 0.8;}
:hover{transform: 1s;}

/*-----------------------------------------------------------------------------------------
common
----------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------
blockcolor
----------------------------------------------------------------------------------------*/
.c_cat{background-color: #ce537a;color: #f5f5f5;}
.c_pick{background-color: #3a88a3;color: #f5f5f5;}
.c_event{background-color: #69a468;color: #f5f5f5;}
.c_food{background-color: #af93bf;color: #f5f5f5;}
.c_top{background-color: #d7ab42;color: #f5f5f5;}

#bl_food .point{color: #af93bf;}
#bl_cat .point{color: #ce537a;}
#bl_pick .point{color: #3a88a3;}
#event .point{color: #69a468;}

main #bl_cat .itemlist li a:hover{color: #ce537a;}
main #bl_food .itemlist li a:hover{color: #af93bf;}
main #bl_pick .itemlist li a:hover{color: #3a88a3;}

/*-----------------------------------------------------------------------------------------
text
----------------------------------------------------------------------------------------*/


/*ブロック*/

h1{    width: calc(100% - 20%);
  margin: 10%;}
h2{        font-weight: 600;padding: 0.5rem;width: 80%;
  margin: auto;}

/*商品名*/
h3{        font-weight: 200;
  font-size: 40px;}

  p{    line-height: 2rem;}

/*-----------------------------------------------------------------------------------------
header
----------------------------------------------------------------------------------------*/
header{
  width: 300px;
  position: fixed;
  right: calc(50% + 750px / 2);
  height: 100vh;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 90;
}

#logo{    margin-right: -58px;}


/*-----------------------------------------------------------------------------------------
main
----------------------------------------------------------------------------------------*/
main [id^="bl_"]{margin: 0;width: 100%;padding: 0;}
#bl_cat{
  background-image: 
  url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/image.wowma.click/44587536/image/pet-newitem/back_catgif.gif),
  url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/image.wowma.click/44587536/image/pet-newitem/back_catgif.png);
  background-attachment: fixed,fixed;
  background-size: 100%,100%;
  background-position: bottom,bottom;
}
.ver_cat #bl_pick{  
  background-image: 
  url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/image.wowma.click/44587536/image/pet-newitem/back_catgif2.png),
  url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/image.wowma.click/44587536/image/pet-newitem/back_catgif2.gif);
  background-attachment: fixed,fixed;
  background-size: 100%,100%;
  background-position: bottom,bottom;
}

.ver_pet #bl_pick{  
  background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/image.wowma.click/44587536/image/pet-newitem/back_pick.png);
  background-attachment: fixed;
  background-size: 100%;
  background-position: bottom;
}
.pet-kan #bl_pick{  
  background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/image.wowma.click/44587536/image/pet-newitem/back_pick.png);
  background-attachment: fixed;
  background-size: 100%;
  background-position: bottom;
}


.line_top{position: absolute;
  top: -95px;
  width: 100%;
  left: 0;}

/*--------------block_wrap-------------*/
main .block_wrap{        
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;}

/*--------------contents-------------*/
main .contents{        
  width: 750px;
  margin: auto;
  text-align: center;
  padding: 0px 50px 50px;
  box-sizing: border-box;
  position: relative;
  background-color: #f5f5f5;
}

main .contents h2{position: sticky;top: 0px;        z-index: 100;        border-radius: 0px 0 20px 20px;}

/*--------------itemlist-------------*/
main .itemlist ul{display: flex;  justify-content: center;      flex-wrap: wrap;}
main .itemlist ul li{
  width: calc(100% / 2 - 20px);
  margin: 10px;
  padding: 10px;
}

main .itemlist_pick{
  margin: 10px 0 50px;}
  main .itemlist_pick ul{        flex-wrap: nowrap;}
  main .itemlist_pick li{width: auto;}

  main .price{   background-color: #e5e5e5;
    display: flex;
    justify-content: center;font-size: 18px;
    justify-content: center;
    font-weight: 700;}
  main .itemimg{background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/image.wowma.click/44587536/image/pet-newitem/back_check.png);}
  main .itemlist h3{font-size: 14px;        font-weight: 500;
    margin: 10px;}

    

/*-----------------------------------------------------------------------------------------
navi
----------------------------------------------------------------------------------------*/
#navi{        justify-content: flex-end;}
#navi ul{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
margin-right: -20px;}

#navi li{width: auto;
text-align: left;
opacity: 0.9;
  margin-bottom: 5px;
position: relative;}

  #navi li a{     padding: 5px 40px 5px 20px; 
    display: block;
    height: 100%;
    width: 100%}

#navi li:hover{width: 110%;}

#navi p{display: flex;
  align-items: center;}

/*-----------------------------------------------------------------------------------------
event
----------------------------------------------------------------------------------------*/
#event{  
  width: 390px;
  position: fixed;
  z-index: 90;padding: 10px;
  border-top-right-radius: 0;
  height: 100vh;
  bottom: 0;
  left: calc(50% + 750px / 2);;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;}

  #event ul{        display: flex;
    flex-direction: row;
    flex-wrap: wrap;}
  #event li{               width: calc(100% / 3 - 8px);
    padding: 10px;
    box-sizing: border-box;
    background-color: #f5f5f5d4;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-radius: 10px;
    padding: 10px;
    margin: 4px;}



/*-----------------------------------------------------------------------------------------
footer
----------------------------------------------------------------------------------------*/
footer{
  z-index: 100;    background-color: #d7ab42;

}
footer .block_wrap{
  display: flex;
  justify-content: center;
  flex-direction: row;
}

footer p{margin: 0 10px;padding: 10px 0;}



/*-----------------------------------------------------------------------------------------
order
----------------------------------------------------------------------------------------*/
.order_wrap{display: flex;}

        /*--ver_cat-*/
        .ver_cat .order_wrap .o_cat
        {order: -2;}
        .ver_cat .order_wrap .o_pick
        {order: -1;}

        /*--ver_pet-*/
        .ver_pet .order_wrap .o_cat
        {order: -1;}
        .ver_pet .order_wrap .o_pick
        {order: -2;}

/*-----------------------------------------------------------------------------------------
effect
----------------------------------------------------------------------------------------*/

/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}