/* CSS Document */
/*==============================================================================*/
/* mainimg
============================================================================== */
/*main h1 img{ width: 98%; max-width: 1602px; }*/
main h1 img{ margin: 0 auto; display: block; }
#catconcept,#dogconcept{ text-align: center; z-index: -1; position: relative; }


/*==============================================================================*/
/* 最新のレシピ
============================================================================== */
#recipeWrap{ position: relative; }
#rightstamp, #leftstamp{ position: absolute; content: "";}
#rightstamp img, #leftstamp img, #archive h2 img{ width: 100%; }
#recipeBox figure::before img,
#recipeBox figure::after img{ background-size: 100%; }

#recipeTitle{ position: relative; color: #000; font-weight: 600;
    background: url(../image/titleline.png) 0 bottom no-repeat; }

#recipeTitle::before,
#time dt::before, .recipeTime p i::before,
#memoList li::before,#swab,#sideimg div,
#dog #catmemoimg li,
.recipeitemIcon::before{background-position: 0 0; background-repeat: no-repeat; position: absolute; content: ""; }

#shareBox,#time, #sns{ display: flex; }
/*clock*/
#time dt{ margin-right: 8px; position: relative;  }
#time dt::before{  left: 0; }

#sns li a span{ margin-top: -0.9em; }

#recipeBox figure{  margin-left: auto ; margin-right:auto; position: relative; text-align: center; }


/*==============================================================================*/
/* 材料
============================================================================== */
#cat #pointImg{ background: #fff; }

#pointBox{ background: url(../image/leafLine.png) center bottom no-repeat;  }

#pointBox dl{ position: relative; color: #5f2308; width: 100%;
    border: 3px solid #d27a64; background: #fff; box-sizing: border-box;  border-radius: 6px;}
#pointBox dt{  position: absolute;}

#pointImg,
.number{ position: relative; border-radius: 50%; }

#pointImg span,
.number span{ position: absolute;
        left: 0;top: 50%;
        width: 100%; text-align: center; }

/*下準備*/
#num1 img{ width: 6px; }
#spadework img{width: 31px;}
#spadework span{ margin-top: -1.2em }


#dog #pointImg span{ top: 0}
/*==============================================================================*/
/*材料
============================================================================== */
#ingredientsCont,.recipeitemIcon,#usedWrap,#cookingWrap{ position: relative; }
#leftstamp{ top: 10%; }
#dog #leftstamp{ left:20px; }

#ingredients{ margin-left:auto; margin-right:auto; display: flex; flex-wrap: wrap; align-items: flex-start; }


#recipeItem,.recipeItem{ text-align: right; }

#ingredientImg, #ingredientImg2,#ingredientImg3,#pot{ position:absolute; }
#ingredientBox,.ingredientBox{ background: #fcfaf7; position: relative;box-sizing: border-box;}
#ingredientBox::before,.ingredientBox::before{ position: absolute; content: "";
     background: url(../image/pin.png) center 0 no-repeat;  width: 32px; height: 42px; }


.recipeParts{ border-radius: 4px; border:1px solid #5f2308; padding:1px 10px 2px; color:#fff; background: #5f2308;
    display: inline-block; margin-bottom: 10px;}
.quantity .recipeParts{ margin-bottom: 0; }
.listbottom{ border-bottom: 1px solid #5f2308!important; padding-bottom: 10px!important; margin-bottom: 20px!important;}

#apartWrap{ margin:20px 0; border-bottom:1px solid #5f2308; padding-bottom: 15px; }
.recipeParts.apart{ color:#5f2308; background: #fff; }
.recipeParts.leaf{ margin-top: 10px; }
#used ul{ display: flex; }

#used li a{ color:#000 }

#cooking{ margin-bottom: 15px; }
#cooking::after{
    width: 558px;  height: 13px;  background: url(../image/cookleaf.png) right 0 no-repeat ;
    right: 0; position: absolute; content: ""; }
    

#used dt{ text-align: center; color:#000}
.useditem{ background: #fff; 
    display: flex;
    justify-content: center;
    align-items: center;}


/*==============================================================================*/
/*作り方
============================================================================== */
#cooking,#completeIcon i{ position: relative; }

#cookrecipe{  background: #fcfaf7;  }

/*●*/
.number{ background: #d27a64; width: 40px; height: 40px; padding: 20px;}


#cookrecipe{ box-sizing: border-box; }
#cookrecipe li{ display: flex; }
#cookrecipe li:not(:last-child){ background: url(../image/cookingline.png) 0 bottom no-repeat; }

/*※*/
#cookrecipe .notice{ padding-top: 5px;}
#cookrecipe .notice,#ingredientBox .notice,.ingredientBox .notice,
#notice2,#pointWrap dd .notice,.redtxt,.redtxt a{ color: #d27a64;  }

.noticeicon{ font-size: 0.8em; }

#completeIcon{ display: inline-block;  margin-bottom: 20px; }

#completeIcon i::before{ background-repeat: no-repeat; background-position: 0 bottom; }
#completeIcon i::before,
.memotitle span{  position: absolute; content: ""; }

.memotitle{ height: 55px;
    position: relative; z-index: 1; background: #f7f8fc; border-radius: 10px;  display: block; }

#cat #catmemoimg{ display: flex; justify-content: end; align-items: flex-end;
    position: relative; z-index: 0;
    max-width: 98%;}

#catmemoimg img{ width: 100%; }
#release{ margin-top: 50px; margin-bottom: 80px;text-align: center; }


/**/
#archive h2{  text-align: center; }
#archive ul{ /*justify-content: space-between;*/ flex-wrap: wrap;  display: flex;  }
#archive li {  /*flex-flow: row wrap;*/ display: flex; flex-direction: column;
    border:1px solid #ccc; background: #fff; box-sizing: border-box;}
#archive li a{ color: #211515; }
#archive li a:hover{ color: #612824; }

.recipeName{ font-weight: 500; position: relative; width:100%; border-bottom: 1px solid #e5bbb3; flex-grow: 1;}

.recipeName::before{ position: absolute; content: ""; 
background: url(../image/recipeIcon.png) 0 0 no-repeat; width:26px; height:24px;
left:5px; }

.recipeTime a p i{  position: relative; }
.recipeTime a p{  padding: 0 0 0 5px; line-height: 1.4em; display: block;}
.recipeTime p i::before{ width: 22px; height: 23px; background-size: 92%; }

#basicBtn a{ position: fixed; z-index: 3; }


/*prev/next*/
#navBtn li a{ border-radius: 10px; 
    align-items: center; justify-content: center; display: flex;
    width: 100%; position: relative;}

#prev a{ background:#c8e5e7; }
#next a{ background:#b4edd2; }

/*icon*/
#navBtn li a i{ position: absolute; background-repeat: no-repeat; background-position: 0 center;
    height: 61px; left:20px; }

#cat #navBtn li a i{ 
    background-image: url(../image/recipeIcon.svg) ;
    width: 48px;}

#dog #navBtn li a i{ 
    background-image: url(../image/recipeIcon1.svg) ;
    width: 40px;}

/* <- -> */
#prev a::before,#next a::before {
    bottom: 40%;
    width: 32px;
    transition: all .3s; }
  #prev a::before, #next a::after,#next a::before{ right: 20px; }

  #prev a::before, #prev a::after,
  #next a::before,#next a::after {
    position: absolute; content: "";
    background: #000; height: 2px; }

  #prev a::after,  #next a::after{  bottom: 43%; width: 8px;  }

  #prev a::after { transform: rotate(-35deg); transition: all .3s;  right: 44px; }
  #next a::after { transform: rotate(35deg); transition: all .3s; }

  #prev a:hover::before{right: 28px;  }
 #next a:hover::after,#next a:hover::before{ right: 13px; }
  #prev a:hover::after{ right: 51px; }

/*dog-----------------------*/
#snack,
#memoList li,.notice3{ position: relative;}
#memoList li::before{ background-image: url(../image/pointIcon.png); 
left:0; top: 6px; width: 14px; height: 15px; }

#notice2::before{ position: absolute; content: "(※"; left:0 }
.notice3{ display: inline-block; }
.notice3::before{ position: absolute; content: "※"; left:0 }

#indication2 th,
#indication th{ background: #c8e5e7; color:#006483; font-weight: 600; }
#indication th,#indication td,
#indication2 th,#indication2 td{ border:#f9f4ec solid 2px; 
    padding:5px; text-align: center; width: 50%;  }
#indication tbody,#indication2 tbody{ background: #f7f8fc; }

#indication td span,#indication td p{margin: 0 auto; display: block; width: 32px;}
#cat #indication td span{ max-width: 93px; width: 42%; }
.indicationTxt{ text-align: right;}

#snack .notice{ color:#555; }

#dog #catmemoimg{ position: absolute;  z-index: -1; }


/*sp*/
@media screen and (min-width: 801px) and (max-width: 1080px) {
#cat #pot{ bottom:-13vw}
}

@media screen and (min-width: 641px) and (max-width: 800px) {
#cat #pot{bottom:-17vw}
}

@media screen and (min-width: 641px) and (max-width: 1080px) {
#recipeTitle{ font-size: 2em; line-height: 1.4em}
#ingredientBox,.ingredientBox, #quantity li:first-child,
.quantity li:first-child{ font-size: 1.4em; line-height: 1.6em}
#recipeItem,.recipeItem,.recipeTxt,#archive li{ font-size: 1.2em; line-height: 1.4em}
#cat .recipeitemIcon{padding-left: 40px;}
#cat #orTxt .recipeitemIcon{padding: 5px 0;}
#shareBox{ padding:0 10px 30px }
#sns{ width: 16%; }
#sns li a { width: 80%; display: block;  }

#rightstamp{ width: 95px; }

#pointBox dt{ top: -20%; }
#ingredientBox::before, .ingredientBox::before{ top: -25px;}
#ingredients figure::after{  left: -58%;}
#kabu{  bottom: 4%; right: 8vw;}

#recipeItem .recipeitemIcon::before, .quantity .recipeitemIcon::before
.recipeItem .recipeitemIcon::before,.recipeItem .quantity .recipeitemIcon::before{ left: -40px; top: -6px; }
#dog #recipeItem .recipeitemIcon::before,
#dog .recipeItem .recipeitemIcon::before{ top: -2px;  left: -40px;}
#quantity li:first-child,.quantity li:first-child{ margin:0 0 25px 90px}

#dog .recipeitemIcon::before{ left:5px; }

#used ul{ width: 80%;}
.useditem img{ padding: 14px;}

.notice,.notice3{ padding-left: 20px;}
#notice2{ padding-left: 25px;}
#cat #pot{ right: 4%; }
#dog #pot{ left: 2%; bottom:-20vw}
#cat #catmemoimg{  z-index: -1; }
#catmemoimg{ margin:0px 2% 80px ;}
#dog #catmemoimg{ margin-bottom: 40vw; }
#dog .memo dd{ margin-left: 113px; }
#imgdog{ margin-top: 6%;}

.recipeName::before{ background-size: 80%;  top: 1.8vw;}
.recipeTime a p{ font-size: 0.8em; }

#navBtn li{ width: 48%; }
#navBtn li#prev img{ width: 100%; max-width: 155px;}
#navBtn li#next img{ width: 46%; max-width: 320px;}

#navBtn li picture{ display: block; text-align: center; }

#archive{ margin-bottom: 9%; }

#basicBtn a{  right:2%; bottom: 100px; }

#swab{ right: 3%; top: -21vw; width: 24vw; }
#memoImg { right: 4%; bottom: -34vw; }
#dog #ingredientImg2 { width: 30%; }
#dog #ingredientImg2 img{ width: 50%; max-width: 235px; }

#dog #catmemoimg li:first-child{ right: 2%; top: 1vw; width: 20vw}
#dog #catmemoimg li:nth-child(2){ right: 29%; top: 10vw; width: 30vw}
#dog #catmemoimg li:nth-child(3){ left: 39%; top: 29vw; width: 19vw;}
#dog #catmemoimg li:nth-child(4){ right: 2%; top: 26vw; width: 25vw;}
}

@media screen and (max-width: 1024px) {
#pointWrap dd p{ font-weight: 500; }
}

@media screen and (max-width: 1080px) {
#cat main h1 img{ max-width: 831px; }
#cat main h1 img,
#pointWrap,
#ingredientsWrap,#ingredients figure img,
#recipeWrap h2 img,
#archive li figure a img,#used li a{ width: 100%; }

#catconcept{ margin: -40px auto 0;}
#dogconcept{ margin: -19vw auto 2%; padding:0 0.5% }
#catconcept img { width: 98%; }

#recipeWrap h2{ margin-bottom: 20px; }
#recipeTitle{ padding: 0 4% 4% 65px;  margin-bottom: 38px;}

#cat #recipeTitle::before{  background-image: url(../image/titleicon_sp.png) ; }
#cat #recipeTitle::before,#dog #recipeTitle::before{ top:-1.2vw;  background-size: 70%; left: 5px; width: 66px; height: 105px; }
#dog #recipeTitle::before{ background-image: url(../image/titleicon_sp1.png) ; }

#recipeBox{ margin-left:2%; margin-right:2%;}

#shareBox{ padding-left: 2%; }
#time dt{padding-left:32px; }
#time dt::before{ width: 37px ; height: 40px; top: 0; background-size: 60%; }

#time dt::before,
.recipeTime p i::before{  background-image: url(../image/timeIcon_sp.png) ; }
#sns{ justify-content: space-around; }
#sns li a { display: block; }

#pointWrap{  margin-bottom: 5%; padding: 0 4% 12%; }
#pointWrap dd .notice{ font-weight: 300!important; font-size: 0.875em; }


#rightstamp{  right:3%; top:24vw;  height: 139px;}
#kabu{ position: absolute;}
#ingredients figure picture{ background: #fff; border-radius: 4px; 
    border-style: solid; border-color: #fff; border-width: 16px 16px 12px 16px;}


#cat #completeIcon i::before{bottom: -23px; background-size:50%; }
#completeIcon i::before{  width: 56px; height: 100px;
    background-image: url(../image/completeIcon_sp.png) ;}
#dog #completeIcon i::before{bottom: -13px; background-size:40%; min-height: 50px;}

/*★*/
#recipeItem,.recipeItem{ margin-bottom: 25px; }
#cat .recipeitemIcon::before{ background-image: url(../image/starIcon_sp.png) ; width: 37px; height: 30px; left: 0; top:-5px}
#dog .recipeitemIcon::before{ background-image: url(../image/starIcon_sp1.png) ; width: 30px; height: 27px; }

#cat #ingredientBox .recipeitemIcon::before{ left:0;  top: 5px; }
#cat #ingredientBox #orTxt .recipeitemIcon::before { left: -38px;}

#dog .ingredientBox .recipeitemIcon::before
#dog #ingredientBox .recipeitemIcon::before{ top: 8px; left: 6px; }
#ingredientsCont{ padding-top: 5%; }
#ingredientsWrap{ margin-bottom: 5%; }

#ingredientBox,.ingredientBox,
#ingredientsWrap h2, #recipeItem,.recipeItem{ margin-left: 4%; margin-right: 4%  }
#ingredientBox,.ingredientBox{  padding: 25px 20px; margin-bottom: 5%;}
#ingredientBox dt,.ingredientBox dt{ padding: 5px 2% 5px 40px ; margin-bottom: 5px;}
#ingredientBox dd,.ingredientBox dd{ padding: 0 2% 0 40px; }
#ingredientBox dl:not(:last-child) dd,
.ingredientBox dl:not(:last-child) dd{ margin-bottom: 5px; padding-bottom: 5px; }
#ingredientBox dt:nth-child(odd),
.ingredientBox dt:nth-child(odd){ background: #f8ede8; }

li:first-child .number span img{ width: 15%; }
li:not(:first-child) .number span img{ width: 14px; }
li:nth-child(10) .number span img,
li:nth-child(12) .number span img,
li:nth-child(13) .number span img{ width: 26px; }
li:nth-child(11) .number span img{ width: 20px; }

#ingredientBox .recipeParts:not(:first-child),
.ingredientBox .recipeParts:not(:first-child){ margin-top:10px }
#ingredientBox dt br,
.ingredientBox dt br{ display: none; }
#ingredientBox dt#orTxt br,
.ingredientBox dt#orTxt br{ display: block; }


#ingredients figure{ /*padding: 4%;*/ margin:0 auto 10%; display: flex; order:2; position: relative; }
#ingredients figure::before,
#ingredients figure::after{ position: absolute; content: "";z-index: -1; }


#cat #ingredients figure::before{right: -50%; top:0; width: 156px; height: 177px;
    background: url(../image/photostamp.svg) right 0 no-repeat;   }
#cat #ingredients figure::after{  bottom:0; width: 187px; height: 132px;
    background: url(../image/photostamp2.svg) left bottom no-repeat;  } 

#dog #ingredientImg2{ right:0; top:0 ; width: 32vw;}
#dog #ingredients figure::before{  right: -40%; top:0; width: 185px; height: 180px;
    background: url(../image/photostamp1.svg) right 0 no-repeat; }
#dog #ingredients figure::after{ bottom:0; width: 226px; height: 151px;
    background: url(../image/photostamp21.svg) left bottom no-repeat;  } 

#cat #ingredientImg2{ right: 1%; top:0% }

#pointWrap dd,
.recipeItem{font-size: 1.2em}

#cookrecipe{ padding:4% 3.5% 6%; width: 93%; margin-bottom: 30%; border-bottom:#fcfaf7 solid 1px }
.number span{ margin-top: -1em; }

#cooking img{ width: 50%; }
#cooking::after{ background-size:46vw ;  top:38%;}
#ingredients{ margin-bottom: 5%; }
#cat #ingredients{ position: relative; }

#pointBox{ background-size: 95%; }

#recipeBox figure{  margin-bottom:7%; }
#recipeBox figure img{ width: 90%; }
#recipeBox figure::before{ bottom: 165px; left:10px; width: 179px ; height: 269px; }
#recipeBox figure::after{ bottom: -52px; right: -17px; width: 197px ; height: 316px; }

.recipeTxt{ padding: 5px 0 0 31px; }
#cookrecipe li:not(:last-child){ margin-bottom: 15px;}
#cookrecipe li:not(:last-child) .recipeTxt{ padding-bottom:20px }

#used{  margin-bottom: 7%;}
#used h3{ text-align: center; margin-bottom: 4%;}
#used h3 img{ width: 85%; max-width: 425px; }

#used ul{ justify-content: center; flex-wrap: wrap; margin-left: auto; margin-right: auto; }
#used li{ width: 31.3%; margin-bottom: 5%; font-size: 1.5em;  margin-right: 3%;}
#used li:nth-child(3),#used li:nth-child(5){margin-right: 0; }
.useditem{width: 100%; position: relative; overflow: hidden; }
.useditem::before{  content: ""; padding-top: 100%; display: block; }
.useditem img{  position: absolute;  margin: 0; }

.memotitle { margin-bottom: 5%; }

#dog #snack .memo dd{ margin-left: inherit; }
.memo .brtxt { display: none; }

#dog #memoWrap{ z-index: -1; position: relative; }

#cat #catmemoimg li:first-child{ padding-bottom: 6%; }
#cat #catmemoimg li:nth-child(2){ padding:0 3% 11% 2%  }
#cat #catmemoimg li:nth-child(3){ padding-bottom: 6%; }
#cat #catmemoimg li:nth-child(4){ padding: 0 0 12% 2%  }

#navBtn li a i{ background-size: 50%; }

#cat #archive h2{ margin-bottom: -2%;}
#dog #archive h2{ margin-bottom: 5%;}
#archive li{  margin-bottom: 4%; padding: 2% 2% 15px;}
#archive li a picture{ /*display: flex;*/
    width: calc(100% / 3);
    height: 0;
    padding-bottom: calc(100% / 3);}

#archive li figure a img{ min-height: 5.8vw; height: 100%; }

.recipeName{ margin:0px 0 12px; padding: 1.25vw 2% 10px 32px; line-height: 1.4em;}
.recipeTime p{ margin-left: 28px;}

.recipeTime p i::before{  background-size: 88%; top: inherit; left: -28px;}
/*chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
.recipeTime a::before{ top: 0;}  }


#notice2{ margin-top: 6px; }
#notice2 br{ display: none; }
#dog #catmemoimg{ width: 97%; max-width: 1080px; }
#dog #catmemoimg img{ width: 100%; }
/*dog------------------------------------------*/

#indication2,#indication,#snack .notice{ width: 80%;  margin:0 auto 1%; }
#memoList{ margin:0 15px 50px 0; }
#dog #memoList{ margin-bottom: 80px; }
#memoList li{ padding-left: 25px;  line-height: 1.6em; }
#memoList li:not(:last-child){ margin-bottom: 15px }

#memoImg { z-index: 1; }

#dog #snack .memo dd{margin-bottom: 14%;}
#imgdog{ width: 40%;}
/*#imgdog img{  height: 324px; }
#dog #catmemoimg li:first-child img{ max-height: 240px;  height: 100%; }
#dog #catmemoimg li:nth-child(2) img{ height:144px; }
#dog #catmemoimg li:nth-child(3) img{ height:143px; }
#dog #catmemoimg li:nth-child(4) img{ height:158px; }*/
}


/*pc-----------------------------------------------------*/

@media screen and (min-width: 1601px) {
    #dog #catmemoimg{top: 20px; }
    #dog #catmemoimg li:first-child{ left:5%; bottom: -22vw; }
    #dog #catmemoimg li:nth-child(2){ right:0 }
    #dog #catmemoimg li:nth-child(3){ right: 13%; top: 12vw; }
    #dog #catmemoimg li:nth-child(4){ right: 3%; top: 22vw;}
}

@media screen and (max-width: 1600px) {
#dog #catmemoimg{bottom: 20px; }
}

@media screen and (min-width: 1391px) and (max-width: 1600px) {
    #dog #catmemoimg li:first-child{ left: 2%; bottom: 18%; }
    #dog #catmemoimg li:nth-child(2){  right:0%; bottom: 320px;}
    #dog #catmemoimg li:nth-child(3){  right:10%; bottom: 160px; }
    #dog #catmemoimg li:nth-child(4){ right: 2%; bottom: -3vw; }
}

@media screen and (min-width: 1391px) and (max-width: 1500px) {
#rightstamp{ right: 0; }
#rightstamp, #leftstamp{  height: 80%;}
#cat #leftstamp{ width: 200px; }
#dog #leftstamp{ width: 180px; }
#rightstamp img, #leftstamp img{ width: 100%; }
}


@media screen and (min-width: 1241px) {
#recipeBox figure{ max-width: 1240px; width: 100%; }
#recipeBox figure::before{ bottom: 155px; left: 7px; width: 179px ; height: 269px; }
#recipeBox figure::after{ bottom: -36px; right: 0;  width: 197px ; height: 316px; }
}

@media screen and (min-width: 1391px) {
#cat #ingredientImg{ right: 88%; top: -4%;}
#cat #ingredientImg2{right: 0; top:-1%}
#cat #leftstamp{ left:-20px; }
#dog #leftstamp { left: 0;}

#dog #ingredientImg{ right: 81%; top: -1%;}
#dog #ingredientImg2{left: 75%; top: 1%;}

#imgdog{ margin:0 0 20px 50px }
#snack,#dog #cookingWrap,#catmemoimg{ max-width: 1600px; width: 100%; margin-left:auto; margin-right:auto;}
#dog #pot{ right: 3%;}
#swab{ right: 3%; top:58% }
#ingredientImg3{ right: 0; top:9%; }
#cup{right: 0; bottom:30%}
#dotimg{right: 6%; bottom:10px}
#star{left:5%; top:120px;}
#memoImg{left:2%; bottom:-80px;}

}

/**/
@media screen and (min-width: 1081px) and (max-width: 1240px) {
#recipeBox figure{ max-width: 1080px; width: 100%; }
#recipeBox figure::before,#recipeBox figure::after{ background-size: 9.5vw; }
#recipeBox figure::before{ bottom: 0; left:10px; width: 179px ; height: 269px; }
#recipeBox figure::after{ bottom: -130px; right: 0;  width: 197px ; height: 316px; }

#recipeBox.monthly figure::before{left:-3px; }
#recipeBox.monthly figure::after{ right: -16px; background-size: 50%; }
}

@media screen and (min-width: 1081px) and (max-width: 1190px) {
#cat #rightstamp{width: 7%; }
}

@media screen and (min-width: 1081px) and (max-width: 1390px) {
#catconcept img{width: 96%;}

#rightstamp{ right: 1%; top: -5%; }
#rightstamp, #leftstamp{ width: 12%; height: 80%}
#cat #rightstamp{ top:11%; }

#leftstamp{ top: 19%; }
#dog #leftstamp{ top: 16%; }

#leftstamp img,
#ingredientImg img, #ingredientImg2 img,#ingredientImg3 img{ width: 100%; }
#cat #leftstamp{ left:0.5%; }

#cat #ingredientImg{ left: 1%; top: -2%; width: 8%;}
#cat #ingredientImg2{right: 1%; top: 1%; width: 15%;}

#dog #ingredientImg{ left: 1%; top: -2%;}
#dog #ingredientImg2{right: 1%; top:-1%; width: 20%;}
#ingredientImg3{right: 0.2%; top:10%; width: 7%; z-index: 2;  }

#pot{ width: 13% }
#pot img{ width: 80%; }

#dog #pot{ right:2%}
#swab{ right: 1%;  bottom: -46%; width: 12vw; }
#cup{right: 1%; bottom:30%; width: 9%;}
#dotimg{right: 3%; bottom:10px}
#star{left:2%; top:120px;}
#memoImg{left:2%; bottom:-80px;}
#memoImg img{ width: 70%; }

#imgdog{ margin:0 0 20px 3% }
#dog #catmemoimg li:first-child img{ width: 50%; }
#imgdog img,#dog #catmemoimg li:not(:first-child) img{ width: 80%; }
#dog #catmemoimg li:first-child{ left:2%; bottom: 14vw; }
#dog #catmemoimg li:nth-child(2){ bottom: 25vw; right: -98vw;}
#dog #catmemoimg li:nth-child(3){ right: -92vw; bottom: 13vw;}
#dog #catmemoimg li:nth-child(4){ right: -98vw; bottom: -3vw;}

}
    

@media screen and (min-width: 1081px) {
#catconcept{ margin: -160px auto 0;}
/*chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #dogconcept { margin-top: -190px; }
}

#dogconcept{ margin: /*-14%*/-200px auto 0; }
#recipeWrap h2{ margin-bottom: 35px; }

#recipeTitle{ padding: 0 10px 15px 75px; font-size: 1.4em; margin-bottom: 30px;}
#cat #recipeTitle::before{ width: 47px; height: 75px; top:-30%; left: 10px;
    background-image: url(../image/titleicon.png) ;}

#dog #recipeTitle::before{ width: 56px; height: 47px; top:-15%; left: 10px;
    background-image: url(../image/titleicon1.png) ;}

#rightstamp{  right:20px; top:5%; }
#shareBox{ padding:0 10px 30px 20px}
#time dt{padding-left:38px; }
#time dt::before{ width: 28px ; height: 30px; top: 0;  }
#time dt::before,
.recipeTime p i::before{  background-image: url(../image/timeIcon.svg) ; }

#sns li a{ position: relative; border-radius: 50%;  width: 42px; height: 42px; padding: 9px 21px;}
#sns li a span{ position: absolute; left: 0; top: 50%; width: 100%; text-align: center; }
/*#sns li#fb a{ background: #3b579d;  }*/
#sns li#tw a{ background: #000; margin: 0 10px }
#sns li#line a{ background: #06c755; }

#pointWrap{  margin-bottom: 50px; padding: 0 40px 120px; }
/*#pointWrap dl{ height: 130px; }*/
#pointBox dt{ top: -10%; }
#pointWrap dd .notice{ font-weight: 500; font-size: 0.875em; }
.nowrap{  white-space: nowrap; }
/*#ingredientBox .apart dt{ width: calc(57% - 10px); }
dl.apart{ padding-left: 30px !important; }*/

#ingredientsCont{  max-width: 1440px; width: 100%; margin-right: auto; margin-left: auto;}

#ingredientsWrap{ width: 645px; }
#ingredients{ max-width: 980px; margin-bottom: 50px; padding-top: 120px; }
#ingredients figure { background: #fff; border-radius: 4px; }
.notice,.notice3{ padding-left: 20px!important;}
#notice2{ padding-left: 25px;}
#recipeItem,.recipeItem{ margin-bottom: 8px;}
#cat .recipeitemIcon::before{ background-image: url(../image/starIcon.png) ;
width: 22px; height: 17px; left: -25px; }
#cat #recipeItem .recipeitemIcon::before{ top: 1px; }
#cat #ingredientBox .recipeitemIcon::before{ top: 6px; }

#dog .recipeitemIcon::before{ background-image: url(../image/starIcon1.png) ;
width: 21px; height: 19px; left: -25px; top: 0;}

#dog #ingredientBox .recipeitemIcon::before,
#dog .ingredientBox .recipeitemIcon::before{ top:6px }

#ingredients figure{ padding: 20px; margin-right: 55px; }

#recipeItem,.recipeItem{ font-size: 0.937em; }
#ingredientBox,.ingredientBox,.recipeTxt,#time,#quantity li:first-child,.quantity li:first-child{ font-size: 1.125em; }
#ingredientBox,.ingredientBox{ padding: 35px; margin-top: 2%;}
#ingredientBox dl,.ingredientBox dl{ padding:0 10px;  }    
#ingredientBox dl:not(:last-child),
.ingredientBox dl:not(:last-child){ border-bottom: 1px dotted #d27a64; padding-bottom: 5px; margin-bottom: 5px;}
#ingredientBox dt, .ingredientBox dt{ width: 57%; }
#apartWrap{ margin-left: 2%; }
#ingredientBox #apartWrap dt, .ingredientBox #apartWrap dt{ width: 56%; }
#ingredientBox dd, .ingredientBox dd{ width: 43%; }

#completeIcon i::before{ bottom: -23px; width: 29px; height: 51px;
background-image: url(../image/completeIcon.png) ;}

#ingredientBox dl, .ingredientBox dl,
#used { display: flex; }

#recipeBox figure{ margin-bottom:32px; }
#recipeBox figure img{ width: 900px; }
#recipeBox figure::before, #recipeBox figure::after { position: absolute; content: ""; 
background-repeat: no-repeat;
background-position: 0 0; }

#recipeBox figure::before{  background-image: url(../image/knife.png) ;}
#recipeBox figure::after{ background-image: url(../image/spoon.png) ;
background-position: 80% 0; }
#ingredientBox::before,.ingredientBox::before{ top: -20px;}
     
#cookrecipe{ width: 875px; margin-bottom: 90px; padding:25px 45px 60px 25px }
.number span{ margin-top: -1.2em; }

#used{  margin-bottom: 70px; justify-content: space-between;}
#used h3{ padding-top: 30px; }
#used ul{ /*margin-left: 65px;*/ width: 645px; justify-content: space-around;  }
#used li{ width: 25%;  }
#used li:not(:last-child){ margin-right: 1.95%; }
.useditem{ min-width: 119px; height: 119px;}
#cooking::after{top:50%;}

.memotitle{ margin-bottom: 35px; }
.memo dd{line-height: 1.8em; margin-left: 113px;  }

.recipeTxt{ padding-left: 30px; }

#cookrecipe li:not(:last-child){ margin-bottom: 20px;}
#cookrecipe li:not(:last-child) .recipeTxt{ padding-bottom:25px }

#cat #pot{right: 0%; top:20%}
#dog #pot{ top:10%}

#cat #catmemoimg{ margin:-70px 5px 80px 0; }
#cat #catmemoimg li:nth-child(2){ padding: 0 46px 100px 42px; }
#cat #catmemoimg li:nth-child(3){ padding-bottom: 19px; }
#cat #catmemoimg li:nth-child(4){ padding: 0 44px 74px 71px; }
#cat #catmemoimg li:nth-child(5){ padding-bottom:12px; margin-right: -5px; }

#navBtn li{  max-width: 420px; width: 50%;}
#archive{ margin-bottom: 90px; }
#archive h2{ margin-bottom: 50px;}
#archive li{ margin-bottom: 20px;  padding: 20px; }

#archive li figure a img{ transition: opacity 0.3s; }
#archive li figure a { position:relative;
	opacity:1;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
	 display:block;
     min-height: 242px;
     height: 100%; }

#archive li figure a img{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	display: block;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
    opacity:1;
    transition:1s all; }

#archive li figure a img:first-child{  border:2px solid #fff; }

#archive li figure a:hover img:nth-child(2){ 
	opacity: 0;
	transition: .3s;}

#archive li figure a:hover img {
	visibility: visible;
  	opacity:0.9;
    transition:1s all;}


.recipeName{  padding:12px 5px 10px 40px; line-height: 1.4em; margin: 0 0 12px 0;}
.recipeName::before{top: 0.7em;}

.recipeTime p{ margin-left:35px;}

@-moz-document url-prefix() {
.recipeTime p i::before { top: 90%; } }

.recipeTime p i::before{ top: -4px; left: -33px;}

#basicBtn a{ right:20px; bottom: 110px; }

/*dog------------------------------------------*/
#quantity li:first-child,.quantity li:first-child{ margin:0 0 10px 45px; }

#memoList, #dog #ingredientsCont{ margin-bottom: 80px; }
#memoList li{ padding-left: 25px; line-height: 1.6em; }
#memoList li:not(:last-child){ margin-bottom: 8px }

#snack .memo dd{ margin-left: 50px; }
#snack dd{ display: flex; align-items: end;}
#indication{ width: 470px;  margin-bottom: 10px; }
#indication2{ width: 470px;  margin-bottom: 20px; }
#dog #catmemoimg li:first-child{ width: 209px; }
#dog #catmemoimg li:nth-child(2){ width: 261px;}
#dog #catmemoimg li:nth-child(3){ width: 165px;}
#dog #catmemoimg li:nth-child(4){ width: 246px;}
#indication td,#indication2 td{ font-weight: 600; }
}

@media screen and (min-width: 831px){
main h1 img, #dogconcept img{width:100%;}
main h1 img {max-width: 1509px; /*min-height: 609px;*/}
#dogconcept img{ max-width: 1582px; }
}
@media screen and (max-width: 830px){
main h1 img, #dogconcept img{width:100%;}
main h1 img {max-width: 806px; /*min-height: 720px;*/}
#dogconcept img{ max-width: 824px; /*min-height: 1020px;*/ }    
}

    
@media screen and (min-width: 811px){
#quantity,.quantity{ display: flex; justify-content: space-between; align-items: center;}
}

@media screen and (min-width: 641px) and (max-width: 700px) {
#cat #ingredientImg2{ width: 30%; }
#cat #ingredientImg2 img{ width: 100%; }
}


@media screen and (max-width: 640px) {
.txtUnd{ margin-bottom: 3%; }
#cat #recipeTitle::before{ background-size: 50%; }
#recipeTitle{font-size: 1.3em; line-height: 1.4em; }
#recipeItem,.recipeItem{ font-size: 0.9em; }
#ingredientBox,.ingredientBox, .recipeTxt { font-size: 1.05em; line-height: 1.5em; }

#rightstamp{ width: 14vw; }
#shareBox{ margin-bottom: 5%; flex-wrap: wrap; justify-content: flex-end; }
#time dt{width: 100px;}
#time dd{ width: 76%; }

#sns{ width: 29%; }
#sns li a{ width: 80%; }
#sns li a img{ width: 100%; }
#time{ font-size: 0.9em; margin-bottom: 10px; width: 100%; font-weight: 500;}

#pointWrap dd, .recipeItem { font-size: 1em; line-height: 1.4em; }

#dog #recipeBox figure{  margin-bottom:12%; }

#ingredientBox::before,.ingredientBox::before { top: -18px; background-size: 70%; right:45%; }
#cat .recipeitemIcon::before{ background-size: 70%; left: 0; top: 6px;}
#dog .recipeitemIcon::before{ background-size: 55%; left: -26px; top: -2px; }
#dog .ingredientBox .recipeitemIcon::before,
#dog #ingredientBox .recipeitemIcon::before{ left: 6px; top: 9px}
#recipeItem .recipeitemIcon::before,
.recipeItem .recipeitemIcon::before{ left: -31px; top: 0; }
#dog #recipeItem .recipeitemIcon::before,
#dog .recipeItem .recipeitemIcon::before{ left:-22px; top:4px; }
#ingredientBox dt,.ingredientBox dt,.notice,#quantity,.quantity{ font-weight: 600; }
#ingredientBox dd,.ingredientBox dd{font-weight: 300!important;}
.recipeItem,
#snack .notice,
#ingredientBox .notice,.ingredientBox .notice,.recipeTime p{ font-weight: 400; }

#cat #ingredients figure,#dog #ingredients figure,
.useditem img,#cat #pointImg img{ width: 50%; }

#kabu{  bottom: 4%; right: 8vw; width: 10%;}
#cat #ingredientImg2{ width: 23%; top: 18vw; }
#kabu img,
#cat #ingredientImg2 img{ width: 100%; }

.notice, .recipeTxt.notice,#notice2,.notice3{ padding-left: 22px;}
#cat #pot{ right: 2%; bottom:-21vw; width: 30%;}
#dog #pot{ left: 2%; bottom:-20vw; width: 50%;}

#pot img,#pointBox dt img,
.memotitle img,#basicBtn a img{ width: 100%; }

#ingredientsCont{ padding-top: 20%; }
#ingredientsWrap h2{ width: 70%; }
#ingredientsWrap h2 img{ max-width: 388px; width:100%; }

#cat #ingredients figure::before{ background-size: 22vw; right: -23vw; }
#cat #ingredients figure::after{ background-size: 25vw; left: -50%;} 
#ingredientBox dt,#ingredientBox dd,
.ingredientBox dt,.ingredientBox dd{padding-left: 30px; }
#cat #ingredientBox #orTxt .recipeitemIcon::before{ left:-28px; top:-1px; }


 #used ul{ width: 90%;}
 #used dt{line-height: 1.4em; font-size: 0.6em}
 .useditem{ margin-bottom: 2vw;}

 .recipeTxt{ padding-left: 3vw; }
 #quantity li:first-child,.quantity li:first-child{ margin:0 4% 10px 50px; padding-left: 4%; line-height: 1.4em;}

 #cookrecipe .notice,
 #notice2{ font-weight: 400; line-height: 1.4em;}

 .memotitle{margin-left: 8.3vw; height: 8vw; width: 91%;}
 .memotitle span{ left: -10%; top: -3.6vw; width: 35%;}
 #snack .memotitle span{ left: -10%; top: -2vw; width: 100%;}
 /**/#imgdog{ margin-top: 13%;}

 .memo dd{ margin-left: 15vw; }
 #cat #recipeTitle{ padding-left: 50px; }
 #cat #snack .memo dd{ margin-left: inherit; }
#cat #indication th{ font-size: 0.89em; }
#cat #indication td span{ width: 80%; }

#pointImg{ margin-right: auto; margin-left: auto; padding: 15% 0; width: 30%; }
#pointImg span { margin-top: -5.8vw; }
#cat #pointImg{ margin-bottom: 8%; }
#cat #pointImg span{ margin-top: -4.4vw ; }

#pointBox dt{ top: -18%; left: 4%; width: 140px; }
#pointBox dl{padding: 25px 5% 4% }
    
#cooking img{ width: 70%; max-width: 381px; } 
#cooking::after {background-size: 28vw}   

#catmemoimg{ margin:2% 1% 80px 3%; }
#cat .memo dd{ margin-right: 3%; }
#cat #snack .memo dd{ margin-right: inherit; }
#indication td,#indication2 td {font-size: 0.9em;}

#archive ul { justify-content: space-between;}
#used li,.recipeTxt,#memoList li,.recipeName{ font-weight: 500; }


#navBtn{ margin-bottom: 60px;}
#navBtn li a{ height: 70px;}
#navBtn li a i{ top: 5% }
#prev{ margin-bottom: 20px; }
#prev img{ width: 160px; max-width: 396px; }
#next img{ width: 150px; max-width: 340px; }

#archive{ margin-bottom: 10%; }
#archive li{  width: 48%;}
.recipeName::before{ background-size: 70%;  top: 10px;}

.recipeTime{  font-size: 0.85em; }

#basicBtn a{ right: 0; bottom: 12% ; width: 115px; }

#dog #ingredients figure::before{ right: -46%; background-size: 55%; }
#dog #ingredients figure::after{  left: -45%;  background-size: 45%; }
#swab { right: 3%; top: -21vw;  width: 24vw; }
#memoImg{ right: 6%; bottom: -34vw;  width: 20%;}

#dog #catmemoimg li:first-child{ right: 4%; bottom: 6vw; width: 20vw}
#dog #catmemoimg li:nth-child(2){ right: 29%; bottom: 2vw; width: 30vw}
#dog #catmemoimg li:nth-child(3){ left: 43%; bottom: -20vw; width: 20vw;}
#dog #catmemoimg li:nth-child(4){ right: 3%; bottom: -16vw; width: 25vw;}
}


@media screen and (min-width: 641px) {
.txtUnd{ margin-bottom: 30px; }
#shareBox{ justify-content: space-between; align-items: center;}
#time{width: 60%; }
#ingredientBox::before,.ingredientBox::before{right:50%; }
#ingredientBox dd,.ingredientBox dd{font-weight: 400;}
.useditem{ margin-bottom: 8px;}
#used dt{line-height: 1.5em; font-size: 0.875em; color:#000}

#pointWrap{ display: flex; align-items: center; justify-content: space-between;}
#cat #pointImg{ width: 161px; height: 161px; padding: 80px;}
#cat #pointImg span{ margin-top: -2.4em ;  }
#dog #pointImg{ width: 172px; height: 162px; }

#pointBox dl::before{ position: absolute; content: "";  left:-30px; top:40%; display: block;
    border-top: 12px solid transparent;
    border-right: 30px solid #d27a64; /*leftで右向き rightで左向き*/
    border-bottom: 12px solid transparent; }

#pointBox dt{ left: 35px;}
#pointBox dl{padding:35px 35px 25px 35px ; }
#cat #pointBox dl{ margin-left: 75px; }
#dog #pointBox dl{ margin-left: 65px; width: 630px;}


.memotitle{margin-left: 60px;}
.memotitle span{ left: -60px; top: -28px; }
#snack .memotitle span{ top: -22px; }
#cat .memo dd{ margin-left: 116px; /*width: 60%; max-width: 540px;*/}


#cookrecipe .notice,#notice2,
.recipeTime a p{ font-weight: 500;}

#navBtn{ display: flex; justify-content: space-evenly; margin-bottom: 70px;}
#navBtn li a{ height: 90px;}
#navBtn li a i{ top:15%}
#archive li{  width: 32.3%; margin-right: 1.5%; }
#archive li:nth-child(3n){margin-right: 0;}
}

@media screen and (min-width: 376px) {
#completeIcon .brtxt{ display: none; }
}
@media screen and (max-width: 375px) {
#ingredientBox::before,.ingredientBox::before { top: -12px;}
}
@media screen and (max-width: 320px) {
#pointBox dt { top: -16%;}
}