@charset "euc-jp";
/* ///////////////////////////////

ペットカテゴリー

SP用

///////////////////////////////
*/
body{background:none;}
#pageContents{background: #fff!important; width:100%!important;float: none!important;}

/*●Mainctg*/
#Mainctg{}
#Mainctg p{padding:5% 5% 10%; text-align:left;}
#Mainctg p br{display:none}

.single-item2 {max-width: 950px; margin: 0 auto;position:relative;}
.slick_container {width:950px; margin:0 auto; position:relative;}

.slidebox {width:100%; margin:0 auto;position:relative;}
.slider {margin: 0 ; overflow:hidden}
.slider img {width: auto;height: auto;}
.slick-slide{display: none; float: left;height: 100%;min-height: 1px;}

#pageContents a#modal-open2{display:block}
.bnrbox{margin:0 10% 30px}

#pageContents h2{border-bottom:none!important; padding:0; margin:0!important;}

/*●Menuctg*/
#Menuctg{ background-size:100%!important; width:100%!important; margin-bottom:100px; overflow:hidden; padding-bottom:50px; position:relative}
#Menuctg h2{border:none!important;; text-align:center; margin:30px 25% 20px!important;}
#Menuctg .ac-content h3{padding: 10px 17%; margin:0 0; background:inherit}
.update{position:absolute; top:0; right:0px; width:28%}

ul.petmenuBox{background:#fff;border-radius:10px;overflow:hidden;padding: 3%;margin: 0;text-align: center;}
ul.petmenuBox li{float:left;border-bottom:1px dashed #333;border-right:1px dashed #333;width: 50%; background:none!important}
ul.petmenuBox li a{display:block; margin:10px 0}
ul.petmenuBox li:nth-child(2n){border-right:none;}
ul.petmenuBox li.noline{border-bottom:none;}
.ac-content ul li {background:none!important}
	
.ac-content div{ font-size:15px; border-bottom: 1px dashed #333; margin:0 10% 0}
h3.open_h3{display: block; cursor: pointer; padding: 10px 30px; position: relative; padding-left: 20px;}
.open_h3:after, 
.open_h3.active:after {}
.open_h3.active::after{
display: block; content: ""; position: absolute; top: 50%; right: 10px; width: 0; height: 0; margin: -3px 0 0 0; border-top: 8px solid #23c7df; border-left: 8px solid transparent; 
-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.open_h3::after {
display: block; content: ""; position: absolute; top: 50%; right: 10px; width: 0; height: 0; margin: -3px 0 0 0; border-top: 8px solid #23c7df; border-left: 8px solid transparent;
-webkit-transform: rotate(135deg); transform: rotate(135deg);}



/*●modal*/
#modal-content {width: 100% ; margin: 0 2% ; border: 10px solid #529a9f; border-radius:10px; position:absolute; top:30px; display: none; z-index: 999999999 ; background:#fff}
#modal-content-innar{margin:0 auto; width:100%;}
#modal-overlay {z-index: 99999998 ; display: none!important; position:fixed ; top:0 ; left:0 ; width:100% ; height:120% ; background-color: rgba( 0,0,0, 0.75 ) ;}
#modal-content h2{border:none!important; margin:0 10px!important}

#modal-content ul{overflow:hidden;width: 100%; margin: 0 auto;}
#modal-content ul li{margin: 30px 0; text-align:center}
#modal-content ul li h3{display:block; background:inherit!important}
#modal-content ul li p{background:#eee; border-radius:5px; padding:10px 20px; text-align:left; line-height:1.5em; margin:10px; font-size:13px }
#modal-content-innar p{text-align:right; padding:2% 5%}
#modal-content img {width:auto!important}

 
#modal-close{text-align:right; display:block; width:20px;}


.button-link {color: #00f ;text-decoration: underline ;}
.button-link:hover {cursor: pointer ; color: #f00 ;}



/*●ctgCnt　*/
.itemctg_new{margin:30px auto 50px; }
.itemctg_new ul.itemCnt{}
.itemctg_new ul.itemCnt li{padding:0 0 30px; position:relative}
.itemctg_new ul.itemCnt li img{width:188px}
.itemctg_new ul.itemCnt p{margin-top:10px; font-size:14px; line-height:20px; text-align:left} 
.itemctg_new ul li.dogcat span{background-size:60px!important; width:60px!important; height:60px!important; position:absolute; bottom:60px; right:0; border-radius:30px; z-index:999998;
  overflow: hidden; text-indent: 100%; white-space: nowrap;} 
.itemctg_new ul li.dog span{background-size:60px!important; width:60px!important; height:60px!important; position:absolute; bottom:60px; right:0; border-radius:30px; z-index:999998;
  overflow: hidden; text-indent: 100%; white-space: nowrap;} 
.itemctg_new ul li.cat span{background-size:60px!important; width:60px!important; height:60px!important; position:absolute; bottom:60px; right:0; border-radius:30px; z-index:999998;
  overflow: hidden; text-indent: 100%; white-space: nowrap;} 
.itemctg_new ul li.mot span{background-size:60px!important; width:60px!important; height:60px!important; position:absolute; bottom:60px; right:0; border-radius:30px; z-index:999998;
  overflow: hidden; text-indent: 100%; white-space: nowrap;} 
.itemctg_new ul li.dogcat mark{background:#51ade2; border-radius:3px; padding:0px 5px; position:absolute; top:5px; right:5px; font-size:9px; color:#fff; z-index:999999}
.itemctg_new ul li.dog mark{background:#0fb9e9; border-radius:3px; padding:0px 5px; position:absolute; top:5px; right:5px; font-size:9px; color:#fff; z-index:999999}
.itemctg_new ul li.cat mark{background:#39e28a; border-radius:3px; padding:0px 5px; position:absolute; top:5px; right:5px; font-size:9px; color:#fff; z-index:999999}
.itemctg_new ul li.mot mark{background:#92cc46; border-radius:3px; padding:0px 5px; position:absolute; top:5px; right:5px; font-size:9px; color:#fff; z-index:999999}
.itemctg_new ul li mark.newicon{background:#fff95a; border-radius:6px; padding:0px 5px; position:absolute; top:5px; right:5px; font-size:14px; color:#000; z-index:999999}


.itemctg{margin:30px auto 50px;} 
.itemctg ul li{ position:relative}
.itemctg ul.itemCnt img.itemImg{width:200px; border-radius:100px} 
.itemctg ul.itemCnt p{margin-top:10px; font-size:14px; line-height:20px; text-align:center} 
.itemctg ul.itemCnt a p{text-decoration:underline}
.itemctg ul li mark.newicon{background:#fff95a; border-radius:6px; padding:2px 10px; position:absolute; top:5px; left:5px; font-size:14px; color:#000; z-index:999999}

.itemctg_new h2,.itemctg h2{background:#c9e7ef; padding:20px 0 !important; text-align:center; font-size:1.2em; font-weight:bold; margin-bottom:10px;}


/*●brandctg*/
#brandctg{ margin-bottom:50px}
#brandctg h2{margin:0 25% 10px!important; text-align:center}
#brandctg div{background:#f0f0f0; padding:20px 0;}
#brandctg ul{background:#fff; overflow:hidden; padding:10px 5%}
#brandctg ul li{float:left;border-right:1px dashed #ccc;border-bottom:1px dashed #ccc;padding: 2% 10%;width: 50%;}
#brandctg ul li:nth-child(2n){border-right:none;}
#brandctg ul li:nth-child(4n):nth-child(odd){border-bottom:none;}








/* ///////////////////////////////


ペットカテゴリー

SP用

///////////////////////////////

/*●Mainctg*/
.petevCnt #Mainctg{}
.petevCnt #Mainctg p{ text-align:center}
.petevCnt #Mainctg p b{font-weight:bold; color:#ff9966}
.petevCnt #Mainctg p span{display:block; margin-top:10px;}
.petevCnt #Mainctg p.hint {margin:0px 0 30px; padding:0}
.petevCnt #Mainctg p br{display:inline}


dl.att{margin:90px 5% 60px; border:1px solid #ccc; padding:20px}
dl.att dt{font-size:16px; font-weight:bold; margin:0 0 20px}
dl.att dd{font-size:14px; font-weight:500; margin:0 0 10px}















/*ブロックごとに現れる 用*/
.animate_item{position: absolute; top: 0; left: 0;z-index:996;opacity:0;}
.animate_item.fadeIn{-webkit-animation-duration: 2.4s; animation-duration: 2.4s; -webkit-animation-fill-mode: both; animation-fill-mode: both;
-webkit-animation-name: fadeIn; animation-name: fadeIn; z-index:997;}
.animate_item.fadeOut{ -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both;
-webkit-animation-name: fadeOut; animation-name: fadeOut; z-index:996;}

@-webkit-keyframes fadeIn{
	from{opacity: 0;}
	to{opacity: 1;}
}
@keyframes fadeIn{
	from{opacity: 0;}
	to{opacity: 1;}
}
@-webkit-keyframes fadeOut{
	from{opacity: 1;}
	to{opacity: 0;}
}
@keyframes fadeOut{
	from{opacity: 1;}
	to{opacity: 0;}
}
.movebox{transition: 0.8s; opacity: 0; transform: translate(0,60px); -webkit-transform: translate(0,60px); }
.moveboxon{opacity: 1.0; transform: translate(0,0); -webkit-transform: translate(0,0);}

@keyframes fadein {
from {opacity:0;}
to {}
}


@media screen and (orientation: landscape) {
}

@media (min-width: 480px) and (max-width:767px) {

}

@media (min-width: 768px){
}