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

/* 共通 */
#topimage{ margin-bottom:50px;}

picture{ display: block; line-height: 0; }

/*modal
--------------------------------------------------*/
.mov01{ text-align: center; margin:0 auto 3%; }

#btnSet{ display: flex; background: url(../image/btnBg.gif) 0 0 repeat;
	justify-content: center; padding:20px 0; margin-bottom: 5px;
}

#topimage p{ line-height: 1.2em; }

/*btn*/
.mainBtn a{ border-width: 1px 0; border-style: solid; background: #fff; 
	display: inline-block; text-align: center; position: relative;
}

#dogBtn.mainBtn a{ border-color: #8c7510; }
#dogBtn.mainBtn a:after{ border-right: 2px solid #8c7510; border-bottom: 2px solid #8c7510; }

#catBtn.mainBtn a{ border-color: #ae504f; }
#catBtn.mainBtn a:after{ border-right: 2px solid #ae504f; border-bottom: 2px solid #ae504f; }

.mainBtn a:after{ 
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);
}



#conceptWrap{ background: url(../image/conceptBg.gif) 0 0 repeat; box-sizing: border-box;
}

#conceptBox{ background:#fff; border-radius: 20px;box-shadow: #cf948d 0 1px 4px; border: #dbc0b7 1px solid;
	position: relative; }

#conceptBox h3{ position: absolute; top: -20px; left: -10px; }

#conceptAbout{ color:#213329; font-weight: 700; }




#materialBox{ background:#ded2c2; padding:10px 15px;  box-sizing: border-box; }
#material{ border:1px solid #913e24;}
#material dt{ text-align: center; }
#materialImg{ display: flex; }


/*DOG*/
.dogTitle, .catTitle{ color:#fff;  letter-spacing: 4px; font-weight: 500;}
.dogTitle{ background:#8c7410; }
.catTitle{ background:#ae504f; }

#dog .itemWrap::before,
#cat .itemWrap::before{ position: absolute; content:"";}

#dog .itemWrap::before{ 
 background:url(../image/dogImg1.png) 0 0 no-repeat; }

.itemWrap, #dog dd, #cat dd{ position: relative; }

.itemWrap{ background: url(../image/itemBg.gif) 0 0 repeat; box-sizing: border-box; }

.itemWrap h3{ position: absolute; left:0; }

.itemWrap dt.itemTitle{ border-style: dotted; border-width: 0 0 2px 0; position: relative;}

#dog dt.itemTitle{ border-color: #8c7410; }
.itemWrap dd:not(:last-child) { margin-bottom: 30px;}

.itemWrap dd h5{  color: #333; text-align: left; font-weight: 500;
line-height: 1.2em; }
.itemWrap dd span{ font-weight: normal; font-size: 1em; margin-left: 10px; font-weight: 300;}

.itemWrap dd h5, .itemWrap dd h5:before{ position: absolute; content: ""; }

.itemWrap dd h5:before{ top: -45px; right: 0;  width: 419px; height:35px; 
	 background-position: 0 0; background-repeat: no-repeat; }

.materialBox { position: absolute; z-index: 0; }
.materialBox dt{ margin-left: -5px; font-size: 0.9em;}
.materialBox dd{ font-size: 0.95em; }
.materialBox p{ line-height: 1.3em; margin-bottom: 10px;  /*text-shadow: 2px -1px 0px #fff;*/}
.materialBox ul{ display: flex;  }
.materialBox li:first-child{ margin-right: 10px; }

#cat .itemWrap::before{ 
	background:url(../image/catImg1.png) 0 0 no-repeat; }

#cat dt.itemTitle{ border-color: #ae504f; }
.clean span{ background: #fff; border-radius: 4px; position: absolute;  display: block; line-height: 0;}



/*PC
----------------------------------------------------*/
@media screen and (min-width:1081px),print{
#dogBtn.mainBtn a{margin-right: 65px;}

.orTxt{ font-size:1.2em; }

#conceptWrap{ padding: 35px 40px; margin-bottom: 50px; }
#conceptBox{ padding: 30px 40px 30px 50px; }
#conceptAbout{ font-size:1.5em;  padding-top: 50px; margin-bottom: 20px; }
#concepttxt{ line-height: 1.7em; font-size: 1.1em;  padding-top: 20px;}
.itemWrap dd h5{  font-size: 1.5em;  top:30px; left:30px; display: flex; font-weight: 600;}
.itemWrap section:not(:last-child) ,
.itemWrap section dl:not(:last-child) { margin-bottom:80px }

#materialBox{  margin-bottom: 160px;}
#materialImg{  padding-top: 20px; }

.dogTitle, .catTitle{ margin-bottom: 30px; font-size: 1.5em; padding: 8px 20px 3px; font-weight: 600;}
.itemWrap::before{ top: -62px;	right: 50px; }


#dog .itemWrap::before { width: 197px; height: 206px; }
#cat .itemWrap::before{ width: 216px; height: 224px;  }
.itemWrap dt.itemTitle{ padding: 0 15px 8px; margin-bottom: 30px;}
.materialBox {	bottom: 25px; left: 30px;}
.clean span{ padding:5px; bottom: 8px; right: 2%; }
}





/*Tab&Phone
--------------------------------------------------*/
@media screen and (max-width:1080px),print{
#dogBtn.mainBtn {margin-right: 3%;}

/*modal
--------------------------------------------------*/
.mov01{ width: 90%; margin: 0 auto 5%; }

#conceptWrap{ padding: 3% 4% 5%; margin-bottom: 5%; }
#conceptBox{ padding: 3% 4% 3% 5%; }
#concepttxt{ line-height: 1.8em; padding-top: 4%;  }
#conceptBox h3 picture{ width:48vw; }
#conceptAbout{  padding-top: 12vw; line-height: 1.4em;}

#conceptBox div dd picture{ width: 100%; }
#materialBox{  margin-bottom: 16%;}

#dogIcon, #catIcon{ padding-top:19%; margin-top: -19%; }

#dog .itemWrap::before { max-width: 197px; max-height: 206px;}
#cat .itemWrap::before{ max-width: 216px; max-height: 224px;  }
.itemWrap::before{ top: -32px; 	right: -30px; background-size: 70% auto!important;  width: 35%; height: 35%;}


.dogTitle, .catTitle{ margin-bottom: 5%;  padding: 1% 3% 0.5%;}
.itemWrap dt.itemTitle{ padding: 0 0 2%; margin-bottom: 4%;}

.itemWrap dd h5{  top:3%; left:3%;}
.itemWrap dd.noitem p{ top: 34%; }

.itemWrap dd {  background: #fff; }
.itemWrap section:not(:last-child) ,
.itemWrap section dl:not(:last-child) { margin-bottom:10% }

.itemWrap dd .materialBox dd{ background: none; padding:0 }
.materialBox { bottom:2%; left:2% }
.clean span{ padding:0.5% 2%;  bottom: 1vw; right: 2%; }
}

/*Tab
--------------------------------------------------*/
@media screen and (max-width:1080px) and (min-width:781px){
.mainBtn a{  padding: 5% 2%; width: 280px; }
#conceptAbout{ font-size: 2.3vw; margin-bottom: 8%; }
#conceptBox div dl{ width: 60%; }
#conceptBox div picture{ width: 40%; }

.dogTitle, .catTitle{ font-size: 1.25em; }
.itemWrap dd { padding: 6% 0 20%;}
#material div{ margin-right: 6%; }
#materialImg li{ width: 48%; }
#materialImg li:first-child{ margin-right: 2%; }

#materialImg{  padding-top: 3% }
}

@media screen and (max-width:1080px) and (min-width:641px){
.itemWrap dd h5{  font-size: 1.3em; }
}


@media screen and (min-width:781px){	
.sp{ display:none; }
#conceptBox div{ display: flex; justify-content: space-between;}
#material{  padding:50px 40px; display: flex; justify-content: space-around; align-items: center;}
#material dt{  margin-bottom: 20px; }
#materialImg{ justify-content: space-between;  }


#dogIcon{ top: -52px; }
#catIcon{ top: -58px; }
.itemWrap{ margin-bottom: 110px; padding: 110px 40px 50px;}
}

@media screen and (min-width:481px){
.mainBtn a{ padding:10px 0; width: 190px;  }
}

/*Phone
--------------------------------------------------*/
@media screen and (max-width:780px){
.mainBtn a::after{ height: 4px; width: 4px; }
.mainBtn img{ width: 50%; }
#btnSet{ margin-top: -1px; }
#conceptAbout{ font-size:3.8vw; text-align: center; margin-bottom: 4%; 
	padding-top: 18%; line-height: 1.5em;}

#conceptBox dl{ margin-bottom: 3%; }
#conceptBox picture{ width: 80%; margin:0 auto; text-align: center; }
#concepttxt {line-height: 1.5em; font-size: 0.9em;  }

#material{  padding: 8%; text-align: center; }
#material dt{  margin-bottom: 8%; }
#materialImg{  padding-top: 10%; margin-bottom: 10%;  justify-content: center;  }
#materialImg li:first-child{ margin-right: 4%; }
#materialItem{ width: 70%;  margin: 0 auto; }


.dogTitle, .catTitle{ font-size: 3vw; }
#dogIcon img,
#catIcon img{ width: 100px; }
#dogIcon {	top: -34px;}
#catIcon {	top: -39px;}

.itemWrap{ margin-bottom: 11vw; padding: 90px 4% 5%}
.itemWrap dt.itemTitle picture{ background-size: contain; width: 70%; }
.itemWrap dd { padding-bottom: 32.5%; }
}

@media screen and (max-width:640px){
.itemWrap dd h5{  font-size: 3vw; }
.itemWrap dd h5:before{ background-size: contain; top: -40px;
	background-position: right 17px; width: 200px;}
.materialBox{ font-size: 2vw; }
.materialBox dd ul{ width: 64%; }
}

@media screen and (max-width:480px){
.mainBtn{ width: 50%; }
#dogBtn.mainBtn{ margin-left: 5%; }
#catBtn.mainBtn{ margin-right: 5%; }
.mainBtn a{ padding: 6% 0; width: 100%; }
/**/
.clean span{ width: 10%; }
.itemWrap {	margin-bottom: 20vw;}
}