/* CSS Document */
@import url('common1.css');
@import url("https://www.doggyman.com/css/product/noto-sans.css");

/* 共通 */

#topimage{ position:relative; }
body{ line-break: strict; }
/*modal
--------------------------------------------------*/
picture{ line-height: 0; display: block;}

#stickBtn , #pasteBtn { position:absolute; }
#stickBtn { left:3%;  }
#pasteBtn { right:3%; }


/*btn*/
#topimage div{ background:#fef6f8; padding: 10px 20px; display: flex; justify-content: center;}
#rabbitBtn.mainBtn a{ border:1px solid #efadc1; }
#hamsterBtn.mainBtn a{ border:1px solid #feda6d; }

.mainBtn a{ border-radius:8px; position:relative; background:#fff;
box-sizing: border-box; display: inline-block; text-align: center;
}



.mainBtn a:after{ 
	border-style: solid;
	border-width:0 2px 2px 0;
content:"";
display: block;
height: 6px;
width: 6px;
margin-left: -4px;
position: absolute;
right: 10px;
top: 35%;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}


#rabbitBtn.mainBtn a:after{ border-color:#e9518e; }
#hamsterBtn.mainBtn a:after{ border-color:#ef8037; }

#aboutBox{ border:2px solid #ddd;}

#aboutBox, #rabbitPoint,.rabbitMemo,#hamsterMemo{  border-radius: 20px; 
	margin-right:auto;margin-left:auto;
  box-sizing: border-box;
}

#aboutBox dd{ color: #121212; }



#aboutBox, #rabbitPoint,.rabbitMemo{ background: url(../image/rabbitBg.gif) 0 0 repeat; }

#rabbitPoint,.rabbitMemo,#hamsterMemo{ position: relative; }

.rabbitMemo picture,#hamsterMemo picture{ position: absolute; }

#hamsterMemo picture{ bottom:-9px  }

#aboutBox dt{ margin-bottom:5px; text-align: center; }
#aboutBox span,.rabbitTitle, .rabbitcircle li:nth-child(odd),
#rabbitcircle2 li{ color: #e9518e; }

#memo{ position: relative; padding:30px 0 0 100px; 
	display: flex; 	align-items: center;
}

#memo::before{ left:0; position: absolute; content: ""; background: url(../image/memo.png) 0 0 no-repeat; 
	width: 85px; height: 50px;
}

#gourmetWrap{ margin-bottom: 80px; }
#gourmetWrap h3, .bacteriaTxt{ text-align: center;}
.rabbitTitle{ display: block; font-weight: 500;  }

.bacteriaTxt{  font-weight: 500; }

.txtlabel{ 
	background: linear-gradient(transparent 60%, #ff0 0%);
	display: inline; padding: 0 1px 0; font-weight: 500; }


#bacteriaImg, .rabbitcircle,#rabbitcircle2,#hamstercircle{ 
	margin-left: auto; margin-right:auto;
	display: flex; text-align: center; justify-content: space-between;}

#bacteriaImg li{ width: 33.3%; }
#bacteriaImg li span{ display: block; }

 .rabbitcircle, #rabbitcircle2, #hamstercircle{  font-weight: 600; }

.rabbitcircle li, #rabbitcircle2 li, #hamstercircle li{
	border-radius: 50%; 
	display: flex;
	justify-content: center;
	align-items: center;
    }

 .rabbitcircle li p, #rabbitcircle2 li p, #hamstercircle li p{width: 100%;}

.rabbitcircle li:nth-child(odd),#rabbitcircle2 li:nth-child(odd){ background: #fdf2f5;  }
.rabbitcircle li:nth-child(even){ background: #f5eff7; color:#934897 }


#choose h4{ text-align: center; margin-bottom: 40px; }

#maintenance picture,
#senior picture{ text-align: center; }



#maintenance li picture,
#senior li picture{ display: flex; align-items: center; }

#maintenance li picture,#rabbit .quantity{ background: #e9518e; }
#senior li picture{ background: #934897;  }


#senior li p{ position: relative;  line-height: 1.4em; font-weight: 500;}
#senior li p::before{ position: absolute; content: "※";  }


.subjectBox{ display: flex; font-weight: 500; justify-content: center; align-items: center;  }
.subjectBox dt{ background:#008fd1; color:#fff;  text-align: center; }
.subjectBox dd{ color: #008fd1; font-weight: 600;}

#rabbitcircle2 li:nth-child(even){ background: #ffe8f1 }
#rabbitcircle2 li:last-child, #hamstercircle li:last-child{ position: relative; }
#rabbitcircle2 li:last-child:after,
#hamstercircle li:last-child:after{ content: ""; position: absolute; left:30%; 
	width: 121px; height: 71px;
	background: url(../image/eatImg.png) 0 0 no-repeat; }

#rabbitItem, #hamsterItem{ background-repeat: no-repeat ; background-position:  0 bottom ;}

#rabbitItem{ background-image: url(../image/jellyBg.png) ; background-color: #fffcfd;   }

#rabbitItem h5, #hamsterItem h5{ display: flex; justify-content: center; align-items: center; }
.itemBox { display: flex; justify-content: space-evenly; align-items: baseline;}

.quantity{ color: #fff; border-radius: 10px;  }


/*ハムちゃんぴゅ～れ*/
#hamster .quantity{ background: #e38b06; }
#hamsterMemo{ background: url(../image/hamsterBg.gif) 0 0 repeat; }
#hamstercircle li{ color:#ed6d1e }
#hamstercircle li:nth-child(odd){ background: #fffbea }
#hamstercircle li:nth-child(even){ background: #fff5ce }


#hamsterItem{ background-image: url(../image/pureeImg.png) ; background-color: #fffff3;   }



/*PC
----------------------------------------------------*/
@media screen and (min-width:1081px),print{
#topimage{ margin-bottom:50px; }
.mainBtn a{  padding:12px 40px; width: 240px;}

#aboutBox{ width: 900px;}
#aboutBox, #rabbitPoint,.rabbitMemo,#hamsterMemo{  padding: 30px 40px; font-size: 1.25em; margin-bottom: 50px;}
.bacteriaTxt .brtxt, #bacteriaImg span .txtbr{ display: none; }
#bacteriaImg{ width: 590px;  }

.subImg{ margin-bottom: 60px; }
#bacteriaImg, .rabbitcircle, #rabbitcircle2, #hamstercircle{ margin-bottom: 50px; }
.rabbitcircle, #rabbitcircle2, #hamstercircle{ width: 780px; }
.rabbitcircle li,#rabbitcircle2 li, #hamstercircle li{ font-size: 1.2em; height: 240px;width:240px;}


.rabbitcircle li .txtbr{ display: none; }

#rabbitPoint{ width: 850px; }

#rabbitPoint picture,.rabbitMemo picture,#hamsterMemo picture{ right: 20px; }
#rabbitPoint picture{ top:-20px }
.rabbitMemo picture{ top:30px }
}



/*Tab&Phone
--------------------------------------------------*/
@media screen and (max-width:1080px),print{
	#topimage{ margin-bottom:5%; }
	#aboutBox,.rabbitMemo,#hamsterMemo{  font-size: 1.1em; margin-bottom: 8%;}
	.rabbitMemo,#hamsterMemo{  padding:  3% 18% 3% 3%;}

	#aboutBox{ width: 90%; padding:  3%;}
	#aboutBox span{ line-height: 1.5em; }
	#bacteriaImg{ width: 100%; }
	#bacteriaImg li:nth-child(2),
	.rabbitcircle li:nth-child(2),
	#rabbitcircle2 li:nth-child(2), #hamstercircle li:nth-child(2) { margin:0 2% }
	#bacteriaImg span{ font-size: 0.9em; line-height: 1.2em; }
	.subImg{ margin-bottom: 5%; }


	.rabbitcircle li,#rabbitcircle2 li, #hamstercircle li{ width: 50%; }
	#hamstercircle li{ padding: 8% 0; }
	.rabbitcircle li .txtbr1{ display: none; }

	#rabbitPoint{ width: 85%; }
	#rabbitPoint picture{ width: 40%;}
	

}

/*Tab
--------------------------------------------------*/
@media screen and (max-width:1080px) and (min-width:781px){
.mainBtn a{  padding:5% 0; width: 280px; }


.rabbitcircle, #rabbitcircle2, #hamstercircle{ width: 100%; }
#senior picture{ height: 295px; }
.rabbitcircle li,#rabbitcircle2 li, #hamstercircle li{ font-size: 2vw;}
.rabbitcircle li{ padding: 8% 0; }

.rabbitMemo picture { top:0 }
.rabbitMemo picture,#hamsterMemo picture{ right: -3%; }
#rabbitPoint{  padding: 3% 19% 3% 3%; }
#rabbitPoint picture{ top:-2%; right: -16%; }
#senior li p::before{  left:20px; }

#rabbitcircle2 li{ padding: 8% 0; }

}



@media screen and (min-width:781px){
#rabbitBtn.mainBtn a{ margin-right: 20px;}	

#chooseItem{ display: flex; justify-content: space-evenly;}
#maintenance,#senior { width: 42%; }
#maintenance picture{ margin-bottom: 60px; }
#senior picture{ margin-bottom: 30px; }
#senior li p{ padding-left: 36px; }

#maintenance li picture,
#senior li picture{padding: 0 20px; height: 40px; margin-bottom: 8px;}

#choose{ margin-bottom: 120px; padding-top: 60px; }

.rabbitTitle{ margin-bottom: 5px; font-size: 1.2em; }
.bacteriaTxt{ font-size: 1.2em;margin-bottom: 40px; padding-top: 20px; }
#rabbitItem span,#hamsterItem span{ font-size: 1.1em; }

#rabbitPoint picture{ position: absolute; }
#rabbitcircle2 li:last-child:after,
#hamstercircle li:last-child:after{  bottom:0;}

#rabbitItem, #hamsterItem{ padding: 50px 0 ; margin-bottom: 100px;}
.quantity{  padding: 3px 18px; margin-left: 20px; }

.subjectBox{ font-size: 1.2em;  margin-bottom: 20px; padding-top: 30px; }
.subjectBox dt{  width: 100px; margin-right: 20px; }

#rabbitItem h5, #hamsterItem h5{ margin-bottom: 40px;}
}


/*Phone
--------------------------------------------------*/
@media screen and (max-width:780px){

.mainBtn a{ padding: 6% 13% 6% 3%; width: 100%; }
.mainBtn a::after{ height: 4px; width: 4px; }
.mainBtn img{ width: 80%; }
#rabbitBtn.mainBtn { margin-right: 2%;}

.rabbitcircle{ margin-bottom: 6%; }
#rabbitcircle2, #hamstercircle{ margin-bottom: 10vw; }
.rabbitcircle li{ padding: 6.5vw 0; }

#gourmetWrap h3 picture{ padding: 0 4%; }

#rabbitlife, #hamster{ margin-top:-16%; padding-top: 16%; }

#maintenance li picture,
#senior li picture{padding: 0 4% ; height: 7vw; margin-bottom: 10px;}
#rabbitItem span,#hamsterItem span{ font-size: 0.9em; }

#maintenance picture,
#senior picture{ margin-bottom: 4%; }
#maintenance{ margin-bottom: 8%; }

.rabbitTitle{ margin-bottom: 2%; font-size: 3vw }

.bacteriaTxt{ font-size: 1.1em;  margin-bottom: 8%; padding-top: 4%;  }

#rabbitcircle2 li{ padding: 7% 0; }

.rabbitcircle li,#rabbitcircle2 li, #hamstercircle li{ font-size: 2.3vw;}
#rabbitPoint{  padding: 3% }
#rabbitPoint p{ margin-bottom: 20px; }
#rabbitPoint picture{ margin:0 auto }

#choose{ margin-bottom: 8%; padding-top: 6%; }
#choose picture{ width: 80%; margin: 0 auto;}
#chooseItem ul{ padding-top: 3%; }

#senior li p::before{  left: 8vw; }

.rabbitMemo picture{ width: 17%; bottom:2%  }
.rabbitMemo picture,#hamsterMemo picture{ right:0 }
#hamsterMemo picture{ width: 22%; }

#rabbitItem, #hamsterItem{ padding: 4% 0 ; margin-bottom: 8%;}
#rabbitItem h5, #hamsterItem h5{ margin-bottom: 4%;}
#rabbitItem h5 picture, #hamsterItem h5 picture{ width: 50%; text-align: right;  }

.quantity{  padding: 0.5% 3vw; margin-left: 20px }


.subjectBox{ font-size: 1.1em;  margin-bottom: 3%; padding-top: 4%; }
.subjectBox dt{  width: 105px; margin-right: 2%; }
.subjectBox dd{ line-height: 1.4em; }

.itemBox { padding: 0 4% ; }
.itemBox li:nth-child(2){ margin: 0 3%; }


}



@media screen and (min-width:641px) and (max-width:780px)  {
#senior li p{ padding-left: 11vw; }
#rabbitcircle2 li:last-child:after,
#hamstercircle li:last-child:after{  bottom:-7%;  }

}

@media screen and (max-width:640px){
.bacteriaTxt .brtxt,
#senior li p br,#rabbitPoint .txtbr{ display: none; }
#senior li p{ padding-left: 13vw; }

#rabbitcircle2 li:last-child:after,
#hamstercircle li:last-child:after{  bottom:-7vw; background-size: contain; width: 66%;
	max-height: 71px;
	height: 50%; }

}

@media screen and (max-width:480px){
.subjectBox{ flex-wrap: wrap; }
.subjectBox dt{ margin:0 0 2%; width: 100%; }
}