@charset "Shift_JIS";

.header-info-red {display:none}

#royalcanin-cat a:hover img{ opacity:0.8;}

#roy{ 
    margin:0 auto;  
    width: 100%;
    max-width: 900px;
    margin: auto;
    font-family:"Century Gothic",Noto Sans JP,sans-serif;color:#333333;font-size: 16px;
    section{clear: both; overflow: hidden;}
}

/*------------------------スマホ設定------------------------*/

#royalcanin-cat .smp{ display: none !important;}
#royalcanin-cat #wrap{
    width: 100%;
    max-width: 900px;
    margin: auto;
}
#royalcanin-cat img {
    width: 100%;
    height: auto;
    display: block;
}
#royalcanin-cat .bot img{
    position: absolute;
    top: 0;
}
#royalcanin-cat .it3 .bot img{
    width: 100%;
}
#royalcanin-cat .it2 .bot img{
    width: 60%;
    left: 50%;
    transform: translateX(-50%);
}
#royalcanin-cat a span::after{
position: absolute;
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: .4em;
    height: .4em;
    border-top: 2px solid gray;
    border-right: 2px solid gray;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 7%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: 0.3s all;
}
/*------------------------メニュー設定------------------------*/
#royalcanin-cat .menu_inner ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
}
#royalcanin-cat .menu_inner ul li a{
    color: #fff;
    padding: .9em .9em .9em 0;
    position: relative;
    font-size: 15px;
    background: #9d9b9a;
    text-align: center;
    display: block;
}
#royalcanin-cat .menu_inner ul li a:after{
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: .4em;
    height: .4em;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 7%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: 0.3s all;
}
#royalcanin-cat .menu_inner ul li a:hover{
    color: #fff !important;
    opacity: .8;
}
/*------------------------リンク設定------------------------*/
#roy section.item li.it3 a,
#roy section.item li.it2 a,
#roy section.item li.it1 a,
#roy section.item div.type li a
    {position: absolute; width: 100%; height: 100%; top:0; left: 0;text-indent: 100%; overflow: hidden; } 

#roy li a:hover{opacity:0.4;background-color: #cccccc;}
#roy a{
    background-color: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;}


/*------------------------看板部分------------------------*/
#roy section#title {position: relative;
    h2{ float: left; border-left: 11px #d72420 solid;    color: #d72420;  padding: 0 0 0 3%; font-family: 'M PLUS 1p', sans-serif;margin: 2%;}
    div.subtitle{ float: left; width: 55%;margin: 2% }
    .cat{ width: 30%; float: right;}
}

/*------------------------メニュー------------------------*/
#roy section.menu li{ float: left; width: 50%; margin: 0;}

/*------------------------見出し・テキスト------------------------*/
#roy h3,#roy div.subtitle,#roy h4{clear: both;/* width: 100%*/}

/*見出し 大*/
#roy section.item h3{ color: white; background-color: #d72420; padding: 1%; text-align: center;font-family: 'M PLUS 1p', sans-serif;
    border-radius: 90px;        /* CSS3草案 */  
    -webkit-border-radius: 90px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 90px;   /* Firefox用 */  }

/*見出し　中*/
#roy section.item h4{ background-color: #d72420; margin: 4% 0 1%; font-weight: 900;  padding: 2% 0;  text-align: center; color: #fff;  }

/*見出し　小*/
#roy section.item h5{padding: 2% 0 1% 1%;font-size: 1em;  border-bottom: 3px solid #cccccc;/* width: 100%;*/}
#roy section.item h5:before{
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 4px;
    margin-left: 4px;
    border: transparent solid 5px;
    border-left-color: #d72420;
    vertical-align: 4px;}
#roy section.item li.age{width: 48%;}
#roy section.item li.age h5{padding: 2% 0 1% 1%;font-size: 1em;  border-bottom: 3px solid #cccccc; width: 100%;}

/*見出し下テキスト*/
#roy section.item .subtitle{ text-align: center; padding: 2%;}

/*-----------------------タイプアンカー------------------------*/
#roy section.item div.type{color: gray; font-weight: bold;}
#roy section.item div.type ul{ text-align: center;}
#roy section.item div.type ul li{
    position: relative;
    border: 2px gray solid;
    background-color: white;
    margin-right: 2%;
    margin-bottom: 2%;
    text-align: center;
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */
}
#roy section.item div.type1 ul li{  width: 18%;    padding: 2%;}
#roy section.item div.type1 ul li:nth-of-type(4n){ margin-right: 0;}
#roy section.item div.type2 ul li{  width: 45%;    padding: 2% 1% 2%; font-size: 0.9em;}
#roy section.item div.type2 ul li:nth-of-type(even){ margin-right: 0;}


/*-------------------------------------------section.item-------------------------------------------*/
#roy section.item{background-color: #f4f1ed;   box-shadow: 0 -5px 3px -3px #cccccc;}

/*商品リスト*/
#roy section.item ul{
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

/*枠*/
#roy section.item li.it3,
#roy section.item li.it2,
#roy section.item li.it1
{ background: #ccc;background-image: linear-gradient(-45deg, #d72420 10px, transparent 0) ;float: left; background-color: white;  border:1px solid #cfcfcf; margin: 2% 0;position: relative;}

/*--サイズ・価格--*/
#roy section.item div.bot{position: relative;display: inline-block;}
#roy section.item div.bot div.block{position: absolute; bottom: 0;    width: 100%; }
#roy section.item li.it3 div.bot div.price,#roy section.item li.it2 div.bot div.price{ width: 100%; clear: both;}
#roy section.item .size span{  background-color: white; opacity: 0.9;}

/*--商品名--*/
#roy section.item dl dt{ border-left: 4px #d72420 solid; padding-left: 3%; line-height: 1.2em;font-weight: bold;display: flex; align-items: center;}

/*--対象アイコン--*/
#roy section.item li.it1 dl dd:nth-of-type(1){  width: 55%; position: absolute;  top: 0;  right: 3%;  text-align: right;}
#roy section.item dl dd:nth-of-type(1){ margin: 2% 0;}
#roy section.item dl dd:nth-of-type(1) span{ opacity: 0.8; background-color: #cccccc;padding: 1% 2%; margin: 0 1% 1% 0;display: inline-block;
    border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */  }

#roy #cat section.item dl dd:nth-of-type(1) span.d1{ background-color: #81bb2e; color: white;}/*超小型犬*/
#roy #cat section.item dl dd:nth-of-type(1) span.d2{ background-color: #00964f; color: white;}/*小型犬*/
#roy #cat section.item dl dd:nth-of-type(1) span.d3{ background-color: #c5283d; color: white;}/*中型犬*/
#roy #cat section.item dl dd:nth-of-type(1) span.d4{ background-color: #1e4885; color: white;}/*大型犬*/
#roy #cat section.item dl dd:nth-of-type(1) span.chi1{ background-color: #4bb5ff; color: white;}

#roy #cat section.item dl dd:nth-of-type(1) span.chi1{ background-color: #f091af; color: white;}
#roy #cat section.item dl dd:nth-of-type(1) span.chi2{ background-color: #dc698e; color: white;}
#roy #cat section.item dl dd:nth-of-type(1) span.adu1{ background-color: #0076c2; color: white;}
#roy #cat section.item dl dd:nth-of-type(1) span.adu2{ background-color: #016353; color: white;}
#roy #cat section.item dl dd:nth-of-type(1) span.old{ background-color: #88633c; color: white;}


/*--商品画像(1列はそのまま　2・3列は背景に)--*/
#roy section.item li.it1 dl dd:nth-of-type(2){ width: 50%; float: left;}

/*#roy section.item li.it3 dl{    background-size: 100%;}*/
#roy section.item li dl{
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/*幅*/
#roy section.item li.it1{width: 100%;padding: 1.5%}
#roy section.item li.it3:nth-child(3n+1){clear: both; }
#roy section.item li.it2:nth-child(odd){margin-right: 2% !important;}
#roy section.item li.it2:nth-child(3n){clear: both;}
#roy section.item li.age:nth-child(odd){margin-right: 3% !important;}
#roy section.item li.age:nth-child(3n){clear: both;}


/*--サイズアイコン--*/
#roy section.item li.it2 .size,#roy section.item li.it3 .size{ margin: 0 0 3%;}
#roy section.item .size span{border:1px solid #cfcfcf;display: inline-block; text-align: center;}
#roy section.item li.it2 .size span:nth-child(odd){ margin-right: 2%;}
#roy section.item li.it1 .size {margin-top:9%;}
#roy section.item .size span.cle{ border: none; background-color: none;    opacity: 0;}

/*--価格プロ--*/
#roy section.item .price{ text-align: center; margin-top: 1%;margin-bottom: 1%;}
#roy section.item li.it1 .price{     position: absolute; bottom: 5%;    right: 17%;}
#roy section.item .price .prices{  display: contents;  color:#d72420; font-weight:bold;}

#roy .buy_price ul{  justify-content: center;}
#roy .buy_price .price{  display: contents;  color:#d72420; font-weight:bold;font-size: 1.7em;}
#roy .buy_price .spesicalprice,
#roy .buy_price .intax{  display: none; }

/*------------------------PC------------------------------------------------------------------------------------------------------------*/

    #roy #jump{position:fixed; bottom: 0; right: 0; width:100px;}
    #roy section#title .cat{    margin-top: -8%;} 

    /*幅*/
    #roy section.item{padding:10% 3%;  }
    #roy section.item li.it3{width: 28.6%;padding: 1.5%; }
    #roy section.item li.it2{width: 44.6%; padding: 2%; }
    #roy section.item li.it3:nth-child(3n){ margin-left: 2%;}
    #roy section.item li.it3:nth-child(3n+1){margin-right: 2%;}
    

    /*文字*/
    #roy section#title h2{font-size: 1.6em; }
    #roy section.item h3{ font-size: 1.6em;}
    #roy section.item h4{font-size: 1.2em; }
    #roy section.item .subtitle{}
/*--商品名(高さ調節)--*/
    #roy section.item dl dt{ height: 2.2em;}/*基本*/
    #roy section.item dl dt.t_3{ height: 3.5em;}/*PCで3行に合わせる*/
/*--アイコン--*/ 
    #roy section.item li.it3 dl dd:nth-of-type(1)  {font-size: 0.8em;}
    #roy section.item li.it2 dl dd:nth-of-type(1)  {font-size: 0.8em;}
    #roy section.item li.it1 dl dd:nth-of-type(1)  {font-size: 0.8em }
    
    
    /*--アイコン3行--*/
#roy section.item dl.hed dd {height: 4em;overflow: hidden;padding-bottom: 5%;}/*基本*/
#roy section.item dd.em3 {}
#roy section.item dd.em4 {height: 4.5em !important;overflow: hidden;}  
    
    
/*--サイズ--*/
#roy li.it2 div.bot{ padding-top: 100%;  width: 100%; background-size: 60%;  background-position-x: center;  background-repeat: no-repeat;}
#roy li.it3 div.bot{ padding-top: 166%;  width: 100%; background-size: 100%;  background-position-x: center;  background-repeat: no-repeat;}
    
/*--サイズ--*/
    #roy section.item .size span{font-size: 0.8em;}
    #roy section.item li.it1 dl .size span{padding: 2%;width: 18%; margin: 1% 1%;    font-weight: bold; font-size: 1em;}
    #roy section.item li.it3 .size span{padding: 2%;width: 42%; margin: 2% 1%;    font-weight: bold; font-size: 0.9em;}
    #roy section.item li.it2 .size span{ padding: 2%;width: 43.5%; margin: 2% 0 1% 0.5%;  font-weight: bold;}
    #roy section.item .it3 .size span:nth-child(odd){ margin-right: 2% !important;}
    
/*--価格プロ--*/
    #roy section.item .prices{font-size: 1.8em; } 

/*------------------------TOPへ戻る------------------------*/
#roy .pagetop{
    position: fixed;
    bottom: 4.5em;
    right: 1em;
    z-index: 3;
}
#roy .pagetop a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    font-size: 1em;
    font-weight: lighter;
    background-color: #222222c7;
    border-radius: 80px;
    width: 5.3em;
    height: 5.3em;
    line-height: 1.3em;
    transition: 0.3s all;
}

#roy .pagetop a:hover{
    color: #fff !important;
    opacity: .8;
    transform: translateY(-2px);
}


/* 20260715 T.ABE ADD [画像追加・修正] STA  */
#menu img{
    width: 100%;
    margin-top: 1rem;
}
/* 20260715 T.ABE ADD [画像追加・修正] END  */