#basicMain{ text-align: center;}
#basicWrap{ color: #211515; }
#basicCont::before, #basicCont::after{  z-index: -1;  }

#basicCont,#supervision,
.pointImg,.pointTxtWrap li, #development,.teacherBox dd,
#site li{ position: relative; }

.pointTitle{ position: relative;display: flex; align-items: center;
     background-position: 0 bottom;
}

.pointTitle, .teacherTitle,.teacherBox dl{
     background-repeat: no-repeat; }

.point{ z-index: -1;display: flex; justify-content: center; }

#basicCont::before,#basicCont::after,
 .point, .point::before,
 #developmen::before,#developmen::after,
 .pointTxtWrap li::before, .pointImg::after,.teacherBox dd::after,
 #development::before,#development::after,#supervision::after,
 #site li::before{ 
    background-repeat: no-repeat; position: absolute; content: "";  }

 .point, .point::before,
 #basicCont::before,#basicCont::after{ background-position: 0 0;}


.pointTxtWrap{ background: #fff; }
.pointTxtWrap dt{ color:#bf6a6b; background-position: 0 bottom;
background-image: url(../image/pointtxtline.png) ; }

.pointTxtWrap li,#noticebox{ font-weight: 500; }

.redTxt{ color: #b70000; }
#noticebox{ background: #f4fff2;}

/*side*/
aside{ border:1px solid #848b96  ; background: #fff; box-sizing: border-box;}
.teacherBox dt span{ display: block; }
#development{  background-position: center 0; 
    background-image:url(../image/teacherTitle.svg) ; }

#development,
#supervision{ font-weight: 600; }
#development::before,
#development::after{ background-position: 0 0; }

#development::before{ background-image: url(../image/star1.svg);
    right: 5px; top: 45px; width: 15px;height: 27px; }

#development::after{ 
    background-image: url(../image/star2.svg);
     bottom: -25px; width: 23px;height: 24px; }


.teacherTitle{ color:#5a3b2c }
.teacherTitle, .teacherBox dl{ text-align: center; position: relative; }

.teacherBox dl{ background-position: center bottom; }
.teacherBox dt{ background-repeat: no-repeat; background-position: center bottom;}

.teacherBox dd::after,#supervision::after{ 
    background-position: center bottom;
    left: 50%; bottom: -20px;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%); }

#cat .teacherBox dd::after{ background-image: url(../image/phimg.svg);
    width: 210px; height: 54px;  }
#dog .teacherBox dd::after{ background-image: url(../image/phimg.png);
    width: 214px; height: 68px;  }

#site li{ padding-left: 25px; margin-top: 8px; }
#site li::before{ background-image:url(../image/siteIcon.png) ;
left:0; top:8px; width: 15px; height: 14px;}
#site li a{ line-height: 1.6em;
    word-wrap:break-word ; color: #211515;  display: block; }
#site li span{ display: block; color: #5a3b2c;}
#site li a:hover{ color: #5a3b2c; }

/*pc-----------------------------------------------------*/
@media screen and (min-width: 1731px) {
    #basicCont::after{width: 524px;}
    #cat #ladle,#cat #whisk, #dog #whisk{ left:2%;}
    #cat #ladle{ top:15%; }
    #cat #whisk{top:28%;}
    #cat #dot{left:20px; top:50%}
    #dog #dot{left:39px; top:50%}
    #dog #whisk{top:28%;}

    #cat #mitton{top:45%;right:120px}
    #cat #bowl{top:55%; right:235px}
}


@media screen and (min-width: 1301px) and (max-width: 1730px) {
    #cat #ladle,#cat #whisk{ left:1%; width: 10%;}
    #cat #ladle{ top:15% }
    #cat #whisk{top:23%;}
    #dog #whisk{top:14%; left:2vw; width: 10%;}
    #dog #dot{left:0; top:41.4%;width: 17%;}

}

@media screen and (min-width: 1081px) and (max-width: 1300px) {
    #cat #ladle,#cat #whisk,#dog #whisk{ left:0.5%; width: 6%;}
    #cat #ladle{ top:15% }
    #cat #whisk{top:28%;}
    #dog #whisk{top:15%;}
    #dog #dot{left:0; top:41%;width: 17%;}

}

@media screen and (min-width: 1081px) and (max-width: 1730px) {
    #basicCont::before/*, #basicCont::after*/{ background-size: 15vw; }
    #basicCont::after{ max-width: 524px; width: 40% ; }
    #cat #dot{left:0; top:50%;width: 10%;}

    #cat #mitton{top:45%;right:2%}
    #cat #bowl{top:55%; right:3%}
}


@media screen and (min-width: 1081px) {
.pointImg dd picture, #attitude, #hospital,#catbasicImg div,
#dog #danger{ position: absolute;}

#development,
#supervision{ font-size:1.25em }
#basicCont::before{ background-image: url(../image/blcircle.png);
    width: 339px; height: 595px; top: -130px; }
#cat #basicCont::after{  top: 420px; }
#basicCont::after{ height: 577px; right: 0;
    background-image: url(../image/circle1.png); }

#dog #basicCont::after{  top: 550px; }

#cat.catbasic main,
#dog.dogbasic main{ padding-top: 85px; }
#basicWrap{ padding-top: 80px; }
#basicpointWrap{ width: 690px; font-size: 1.125em;}
.pointTxtWrap dt{ background-repeat: no-repeat; 
font-size: 1.166em; line-height: 1.6em; padding-bottom: 10px;  margin-bottom: 15px; }

.point picture { padding-top: 45px; }
.pointTitle{ background-image: url(../image/pointline.png) ;
    height: 150px; margin-bottom: 20px; padding: 0 10px; }
.titletxt{ margin-left: 130px; }

.pointBox{ margin-bottom: 60px; }
.point{ background-image: url(../image/pointCircle.svg) ;
    width: 105px; height: 105px;  }

.point::before{ background-image:url(../image/point.svg) ; width: 52px; height: 13px; top:25px}
.pointaboutTxt{ line-height: 1.8em; margin-bottom: 20px;}

.pointTxtWrap{ margin-bottom: 20px; }

.pointTxtWrap dd p{ margin-bottom: 2px; }

.pointTxtWrap li{ padding-left: 30px; line-height: 1.6em;}
.pointTxtWrap li:not(:last-child){ margin-bottom: 2px; }
#point3.pointTxtWrap li:not(:last-child){ margin-bottom: 15px; }

.pointTxtWrap li::before{ background-image: url(../image/pointIcon.png);
    left:0; top:8px; width: 14px; height: 15px;  }

#cat #danger, #cat #attitude, #cat #hospital{right: 60px;}
#cat #danger{ top: 70px; }
#serious{ bottom: 35px; right: 50px;}
#basicpointWrap .notice{ padding-left: 25px; margin-left: 40px; font-size: 0.88em;}
#attitude{ top: -120px; }
#hospital{ top: 25px; }

#noticebox{ padding:20px 30px; margin-top: 30px;  }


/*dog------------------------------------*/
#point2txt .pointaboutTxt{ width: 495px; }
#dog #danger{ right: 40px; top: 120px; }
#dog #attitude{right: 10px; top: 40px;}
#dog #hospital{right: 15px;}
#dog #point4{ width: 440px; }

/*side*/
aside{ width: 248px; padding:20px 9px;}
#development{ padding-top: 60px; margin-bottom: 20px;}

#development::after{ left: 10px;}
.teacherTitle{ font-size: 1.25em; }

.teacherBox{ margin-bottom: 20px; }
.pointTxtWrap{ /*font-size: 1.125em;*/ line-height: 1.8em; }

.teacherBox dt{ background-image:url(../image/name.png) ; font-size: 1.125em;
    line-height: 1.6em;  padding:30px 0 13px;}
.teacherBox dl{ background-image:url(../image/namedot.svg) ; 
padding-bottom: 12px; margin-bottom: 25px;}
#teacherTxt{ margin-top: 10px; }

#cat .teacherBox dd::after{ background-image: url(../image/phimg.svg);
    width: 210px; height: 54px;  }
#dog .teacherBox dd::after{ background-image: url(../image/phimg.png);
    width: 214px; height: 68px;  bottom: -28px;}

#supervision{ margin-bottom: 25px; padding-top: 25px;}
#supervision::after{ background-image: url(../image/drtitle.png); 
width: 170px; height: 34px; bottom: -20px;}

}


@media screen and (min-width: 768px) and (max-width: 1080px) {
#basicpointWrap{ width: 64%; }
aside{ width: 32%; margin-left: 4%;  padding: 3% 2%;}
.teacherBox dt{  background-size: 100%;}
#teacherTxt{ margin-top: 10px; }
}

@media screen and (min-width: 768px) {
#basicWrap{ display: flex; justify-content: space-between; align-items: flex-start;}
.teacherBox p, #site{ padding: 0 9px; }
}

@media screen and (min-width: 641px){
  .pointTxtWrap{ padding: 25px 40px;}
  .pointTitle{height: 150px; }
}

@media screen and (min-width: 641px) and (max-width: 1080px) {
.pointaboutTxt,.pointTxtWrap dd,.pointTxtWrap{font-size: 1.1em; line-height: 1.7em;}

.pointTxtWrap dt{ font-size: 1.125em; line-height: 1.2em; }

.titletxt{ margin-left: 150px;}
.point, .point::before{ background-size: 100%; }
.point::before{ width: 45%; top:35px}
.point picture{ padding-top: 55px; }
#point1{ width: 9%; }
.point{max-width: 126px;}
.pointTxtWrap li::before{ top:8px;}
#basicpointWrap li.pointBox:first-child .titletxt{ width: 50%; }
#basicpointWrap li.pointBox:nth-child(2) .titletxt{ width: 70%; }
#basicpointWrap li.pointBox:nth-child(3) .titletxt{ width: 60%; }
#basicpointWrap li.pointBox:nth-child(4) .titletxt{ width: 60%; }


.teacherBox dt{  background-position: center 110%;}
#dog #whisk{ width: 37%;}

#development,
#supervision{ font-size:1.15em }
}

/*sp*/
@media screen and (max-width: 1080px) {
#basicMain{margin-bottom: 8%; width: 100%;}

#basicCont{display: flex; flex-wrap: wrap;}
#cat #catbasicImg{ padding: 0 2% ; justify-content: center;  }
#dog #catbasicImg{ justify-content: space-between; }
#catbasicImg{ order: 3; display: flex; margin-bottom: 3%; }
#whisk{order: 1;}
#cat #whisk{  padding-top: 1%; }
#dog #whisk{  padding: 5% 15% 0 0;}

#ladle{order: 2; padding: 0 3% 2%;}
#bowl{order: 3; padding-top: 10%;}
#mitton{order: 4; padding: 0 0 3% 2%}

#basicCont::before{ background-image: url(../image/blcircle_sp.png);
    width: 198px; height: 596px; top: -130px;  background-size: 30%;}

#basicCont::after {
    height: 577px; top: 420px; right: 0;
    background-image: url(https://www.doggyman.com/cookrecipe/assets/img/basic/circle_sp.png);}

#basicWrap{ width: 92%; }
.pointTxtWrap dt{ background-repeat: repeat-x; }
.pointTitle{ background-image: url(../image/pointline.png) ;
     margin-bottom: 20px; padding: 0 3%;}

.pointTitle span picture{ margin-left: 0; width: 19%;}
.titletxt picture{ margin-left: 13vw; }
.pointaboutTxt{ margin-bottom: 20px; }

.point{ background-image: url(../image/pointCircle_sp.png) ;
      max-height: 252px; height: 100%; width: 100%; }

.point::before{ background-image:url(../image/point_sp.svg) ;
    max-width: 76px; height: 33px; }

#cat .pointTxtWrap{ margin-bottom: 20px; }
.pointTxtWrap dt {padding-bottom: 15px; margin-bottom: 10px; }
.pointTxtWrap dd p{ margin-bottom: 10px; line-height: 1.5em;;}


#basicpointWrap li.pointBox .titletxt{margin-top: -6%;}

#cat .pointBox,
ol li.pointBox:not(:last-child) { margin-bottom: 14%; }
.pointTxtWrap li{ padding-left: 21px; line-height: 1.6em; font-weight: 300;}
.pointTxtWrap li:not(:last-child){ margin-bottom: 8px; }
.pointTxtWrap li::before{ background-image: url(../image/pointIcon.png);
    left:0;width: 14px; height: 15px;  }

    #noticebox{ font-weight: 400; }

.pointImg dd picture,#attitude, #hospital,#dog #danger{  display: block; margin: 5% auto;}
.pointImg dd picture, #hospital, #dog #danger{ width: 40%; }
#cat #attitude{ width: 20%; }
#dog #attitude{width: 30%;}

#basicpointWrap .notice{ padding-left: 20px; margin-left: 30px; width: 90%;}
#basicpointWrap .notice br{display: none; }

#basicpointWrap li.pointBox:nth-child(4) .titletxt{ margin-top: -3%;}

#noticebox{ padding:4% 5%; margin-top: 3%;  }
#basicabout{ margin-bottom: 20px; }

#cat .pointaboutTxt .brtxt{ display: none; }
#development::after{ left: 11%;}

/*dog------------------------------------*/
#noticebox .brtxt{display:none}
#point2txt .pointaboutTxt{ width: 100%; }
#dog #point4{ width: 100%; }
#dog #dot { width: 35%; }

/*side*/

#development{ padding-top: 60px; margin-bottom: 20px;}

.teacherTitle{ font-size: 1.13em; }
.teacherBox{ margin-bottom: 8%; }
.teacherBox dt{  font-size: 1.11em;

    background-image:url(../image/name.png) ;
    padding: 30px 0 13px;}

.teacherBox dl{ 
    background-repeat: repeat-x;
    background-image:url(../image/namedot.svg) ; 
    padding-bottom: 12px; margin-bottom: 20px;}


#supervision{ margin-bottom: 8%; }

#supervision::after {
    background-image: url(../image/drtitle.png);
    width: 170px; height: 34px;  bottom: -20px;}
}

@media screen and (max-width: 1024px) {
.pointTxtWrap dd p{  font-weight: 500 }
}

@media screen and (max-width: 767px) {
#basicpointWrap,aside{ margin: 0 auto; }
#basicpointWrap{ width: 100%; }

#cat aside{  margin-bottom: 8%; }
aside{ width: 85%; padding: 3% ;}
#development{ margin-left:auto; margin-right:auto; max-width: 250px; width: 100%; }
#teacherTxt { margin-top: 5px; }
#dog .pointaboutTxt .brtxt2{ display: none; }
}

@media screen and (max-width: 640px) {
.pointaboutTxt,.pointTxtWrap dd,.pointTxtWrap{font-size: 1.05em; line-height: 1.7em;}
.pointTxtWrap dt{ font-size: 1.15em; line-height: 1.2em; }

.pointaboutTxt,#basicpointWrap .notice,aside p{font-weight: 500; }

.pointTitle{height: 90px; }
.titletxt{  margin-left: 90px;}
.pointTxtWrap li::before{background-size: 85%; top:7px }
#basicpointWrap li.pointBox:first-child .titletxt{ width: 55%; }
#basicpointWrap li.pointBox:nth-child(2) .titletxt { width: 84%;}
#basicpointWrap li.pointBox:nth-child(3) .titletxt{ width: 70%; }
#basicpointWrap li.pointBox:nth-child(4) .titletxt{ width: 66%; }
.pointTxtWrap li{ font-weight: 300; }
.point,.point::before{ background-size: 100%;}

.point{ max-width: 76px;}
.point::before{  top: 25%; width: 60%; }

.point picture{ padding-top: 35px; }
#point1{ width: 9%; }
.pointTxtWrap{ padding: 4.5% 5% 4%;}
#dog .pointBox .brtxt3{ display: none; }

#dog .pointBox{ margin-bottom: 14%; }
#dog #whisk{ width: 42%;}

aside p{ padding: 0 2%; }

}
@media screen and (max-width: 540px) {
#dog .pointTxtWrap li .brtxt{ display: none; }
}