/*
#logoset{ display: flex; justify-content: flex-end; align-items: center;}*/

#carehead{ background-image: url(../img/headBg.jpg) ; background-color:#5acbf5;position: relative;
    height: 180px;}

#carehead::before{ position: absolute; content: "";  background-repeat:no-repeat ;}
 
#cat #carehead::before,
#dog #carehead::before{ left:50%; top:0; background-position:center 0 ;
background-size: 100%;
transform: translate(-50%, 0%);
-webkit-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%); }    

#logo{ /**/ display: flex; justify-content: center; 
 top:50%;}

#logo,
#care #logo{left: 54%; }
#cat #logo{left: 55%; }


#mainCont{ background: url(../img/mainBg.gif) center 0 no-repeat; background-size: cover; position: relative; }
#mainInner{ position: relative;margin-left:auto;margin-right: auto;}
#mainInner::before,
#mainInner::after{ position: absolute; content: ""; background-repeat: no-repeat; background-position: 0 0; }
    
#logo,
#pagetitle::before,
.subTitle::before,.subTitlecat::before{ position: absolute; content: "";  
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);  
}
#pagetitle::before,
.subTitle::before,.subTitlecat::before{left: 50%; z-index: 1;}

.conceptTxt{ margin-top: -20px; display: flex;  justify-content: center; position: relative; z-index: 1; }

#mainCont ul{ display: flex; justify-content: center;}
/*list*/
#mainCont li:not(:last-child){ margin-right: 10px; }
#mainCont li a{ position: relative; display: block;}
#mainCont li a::after {
    border-right: 2px solid #3bafe0;
    border-bottom: 2px solid #3bafe0;
    content:"";
    display: block;
    height: 12px;
    width: 12px;
    margin-left: -8px;
    position: absolute;
    left: 50%;
    bottom: -17px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

 /*おうちデンタル*/
#listdental{ position: absolute;  bottom: 20px;  }


#dentaltoy,#goods,#cat main,#matrix,#dogItem { background-position:  0 0 ; background-repeat: repeat;
     background-image: url(../img/patternBg.png);  }
.innerCont{position: relative; color: #03294d;
    border-style: solid; border-width: 5px;  background-repeat: repeat; background-position: center 0; background-color: #fff;
    background-size: contain;}



#dentaltoy .innerCont,
#dog .innerCont { border-color: #023692;
    background-image: url(../img/care/careboxBg.gif); }
    

.txtcent{ text-align: center; }
.itemtxt{  font-weight: 600; font-size:1.25em ; }
#cat .itemtxt{ margin-bottom: 20px; }
#dog .itemtxt{ margin-bottom: 30px; }
#seni .itemtxt{ margin-bottom: 35px; }

.itemList{ display: flex; justify-content: center; align-items: baseline; }
.itemList,.itemList2{text-align: center; font-weight: 600; line-height: 1.3em; }

#hapika .itemList img,
#hechima .itemList img,.itemList2 img,
#goods .itemList img,#cat .itemList img,#dog .itemList img{  margin-bottom: 15px;}

.itemList figcaption, .itemList2 figcaption { color:#0e2949; font-size: 0.94em; }
.itemList figcaption span,.itemList2 figcaption span{ color: #005bac; display: block;font-size: 0.94em; }

/*----*/
.bline,#dogItem section:not(:first-child){ border-style:dashed; border-width: 2px 0 0; }

.txtBox{ border-style: solid; border-width: 2px; padding: 20px 16px; line-height: 1.6em; }
.txtBox li{ position: relative; padding-left: 20px;}
.txtBox li:not(:last-child){ margin-bottom: 9px; }
.txtBox li::before{ position: absolute; content: ""; left:0; top:5px ; 
    background-repeat: no-repeat; background-position: 0 0; width: 13px; height: 13px;}

/*国産*/
.made{ position: relative; }
.made::after{ position: absolute; content: ""; background: url(../img/madeinjp.png) 0 0 no-repeat;
width: 86px; height: 46px; top:0; right: 0;}


.itemWrap{ display: flex; }
#care .itembox{ width: 100%; margin-right: inherit;}

@media screen and (min-width: 1081px) {
#logoset{  padding: 20px 50px 1px; }
#mainInner{ padding-top: 50px;}
#pagetitle{ background-image: url(../img/titleBg.png) ; background-size: 100%;
    height: 247px; max-width: 635px; width: 90%;
     background-repeat:  no-repeat; background-position: center 0;
    position: relative; margin-left: auto; margin-right: auto;
   display: flex;  justify-content: center;  align-items: center;}   
#pagetitle::before{  top: 30px; height: 121px;width: 120px; background-repeat:  no-repeat; background-position: 0 0;}   

.innerCont{width:1000px;max-width: 90%; padding-left: 50px; padding-right: 50px;}
#cat .itembox{ width: 50%; margin-right: 60px;}

#dogItem section{ padding-bottom: 60px; }
.innerCont,
#dogItem section:not(:first-child),.itemList{ padding-top: 60px; }
#cat .innerCont section:last-child{padding-top: 60px; margin-top: 60px; }


#cat main,
#matrix,#dogItem{ padding-top: 80px!important; }
#dentaltoy,#goods,#cat main,#matrix,#dogItem { padding-bottom: 90px; }

#listdental{right: 20px;}
}



@media screen and (min-width: 751px) {
#cat #carehead::before,
#dog #carehead::before{ background-image: url(../img/cat/catlogo.png);
    max-width: 1206px; width: 100%; height: 182px;}

}



@media screen and (max-width: 1206px) {
#logo{ width: 30%; }
#carehead{ height: 15vw; }
}


@media screen and (min-width: 751px) and (max-width: 1080px) {
#cat .itembox{ width: 56%; margin-right: 5%;}

}

@media screen and (max-width: 1080px) {
#mainInner{ padding-top: 3%;}
#pagetitle{ display: block; text-align: center; margin-bottom: 3%; }
.innerCont{width:92%; padding-left: 4%; padding-right: 4%;}
#logoset { padding: 0 3% 1px;}
/*#pagetitle::before{  background-size: 100%; width: 16%; }*/

#dogItem section:not(:last-child){ padding-bottom: 8%; }
.innerCont{ padding-top: 5%; padding-bottom: 7%;}
#care .innerCont{  padding-top:10vw; padding-bottom: 3%; }

#dogItem section:not(:first-child),.itemList,
#cat .innerCont section:last-child{ padding-top: 7%; }

#cat .innerCont section:last-child{ margin-top: 8%; }

#cat main,
#matrix,#dogItem{ padding-top: 30px!important; }
#dentaltoy,#goods,#cat main,#matrix,#dogItem { padding-bottom: 9%; }
}



@media screen and (max-width: 750px) {
#cat #carehead::before,
#dog #carehead::before{ background-image: url(../img/cat/catlogo_sp.png);
    max-width: 727px; width: 100%; height: 148px; top:10px} 


/* #pagetitle::before { background-size: 100%; width: 18%; top: 20px; height: 46%; max-height: 121px;}*/

#care .itembox,.itemWrap { display: block; }
.made::after{ background-size: 100%; width: 45px; height: 36px; }
.itemtxt{ font-size: 1.05em; line-height: 1.6em; }

.itembox h2{ max-width: 84%; }
.conceptTxt{ position: relative ; z-index: 1; padding: 0 4%;}
.txtBox li{ font-size: 0.95em; }
}

@media screen and (max-width: 640px) {
#care #logo,
#cat #logo,#dog #logo { width: 41%; max-width: 186px;}

#carehead { height: 88px;}
#pagetitle{ width: 86%;margin-left:  auto;margin-right: auto;  }
#dog #pagetitle{ margin-bottom: 20px }
#cat #pagetitle,#care #pagetitle{ margin-bottom: 20px}

#mainCont li a::after{ height: 8px; width: 8px; margin-left: -4px;}
.txtBox li::before{ background-size: 80%; max-width: 13px; width: 100%; top: 7px; }
}

@media screen and (min-width: 320px) and (max-width: 480px) {
#care .conceptTxt{  padding-bottom:4%;}
}

@media screen and (max-width: 440px) {
.itembox h2{ max-width: 100%; padding-top: 11%; } 
}


@media screen and (max-width: 375px) {
#categoryWrap dt{ height: 30px; }
#toycategory dt img{ width: 45%; max-width: 123px; }
#goodscatogory dt img{ width: 50%; max-width: 169px; }
.itemList figcaption, .itemList2 figcaption {font-size: 4vw; }
.itemList figcaption span, .itemList2 figcaption span{ line-height:1.4em }
}