@charset "utf-8";
/* CSS Document */
@import url('../common.css');
@import url("../noto-sans.css");

/* 共通 */
body{
	font-family:'Roboto','Noto Sans Japanese', sans-serif;
	line-height:1.7;
	font-weight: 400;
}

#topimage{ margin-bottom:40px;}

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

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

#meatWrap{ position: relative;}


#meatWrap,
#itemWrap{ box-sizing: border-box;
	background:#517348  url(../../../images/product/kokusanmaki/aboutbg.gif) 0 0 repeat;
}

#txtBox{ 
  border:6px solid #ddb86b;text-align: center;
  background:#e9c78a url(../../../images/product/kokusanmaki/txtBg.gif) 0 0 repeat;
  font-weight: 600;
  position: relative;
}


#label{   background: linear-gradient(transparent 60%, #afb96c 50%);
  display: inline; padding: 0 5px 0; }
#redTxt{ color: #dd2a2b; font-size:1.1em;}

#meatWrap:after,
#txtBox:before,#txtBox:after,
#meataboutBox:before ,#meataboutBox:after ,
#meataboutBox dl:before ,#meataboutBox dl:after{ position: absolute; content:"";  }

#meatWrap:after,
#txtBox:before, #txtBox:after{  background-repeat: no-repeat; background-position: 0 0; }

#txtBox:after{ background-image:url(../../../images/product/kokusanmaki/stamp.png)  ;
   bottom:15px; width: 18px; height: 19px;
  }


#meataboutBox ,
#meataboutBox dl{ position: relative;  }


#meataboutBox dl{   box-sizing: border-box;
  background-color:rgba(255,255,255,0.75);
}


#meataboutBox dt{ border-bottom: 2px dotted #bd952a; padding-bottom: 2px; color: #bd952a; margin-bottom: 5px;
  font-weight: 600;  }

  #meataboutBox:after{
    background: url(../../../images/product/kokusanmaki/meatImg2_pc.png) 0 0 no-repeat;  }



#imgTxt{ color: #fff; }

#itemCont{ background: url(../../../images/product/kokusanmaki/itemOver.png) 0 0 repeat;  }
#itemWrap h3{ justify-content: space-between; align-items: center;
	padding: 0 10px 10px;
  border-bottom: 1px solid #fff100;
  width: 92%; margin: 0 auto 30px;
  position: relative;
}

#itemWrap h3::after{
   content: ""; position: absolute;  left:40%;
background: url(../../../images/product/kokusanmaki/rbnIcon.png) 0 0 no-repeat;
}

#itemWrap h3, .itembox,#itemList ul{ display: flex; }
.itembox{ flex-wrap: wrap; justify-content: space-around; margin-bottom: 30px;}
.itembox li{ margin-bottom: 20px; }

#itemList,#itemList ul{ align-items: baseline; }
#itemList ul{ margin-bottom: 20px; }
#itemList{ 
  justify-content: space-evenly; 
   background: url(../../../images/product/kokusanmaki/itembg.gif) 0 0 repeat; 
   border-width: 4px 0; border-color: #002b03; border-style: solid;
  }


#itemList p{ background:#7ab64a; color:#fff; border-radius:20px; text-align: center; }

/*PC
----------------------------------------------------*/
@media screen and (min-width:1081px),print{
  #txtBox{  width: 580px;  margin: 0 0 50px 230px; font-size: 1.3em;  padding:20px 10px; box-sizing: border-box; line-height: 1.8em; }
  #txtBox:before{ left: -215px; top: -32px; }
  #meataboutBox dl{ width: 708px; margin: 0 auto 5px;
    padding:10px 32px; height: 212px;  }
  #meataboutBox dt{ font-size: 1.3em; }
  #meataboutBox dd{ font-size: 1.25em;  line-height: 1.4em;}
  #imgTxt { padding-left: 14.7%;}

  #itemCont{ padding:25px 20px 1px; margin-bottom: 30px;}
  #itemList p{ padding: 5px 0; font-size: 1.1em; }
}





/*Tab&Phone
--------------------------------------------------*/
@media screen and (max-width:1080px),print{

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

#itemWrap h3 picture:first-child{ margin-right: 2vw; }
.itembox li { width: 46%;}

#meataboutBox:before{left: -10px; top: -30px; }

#itemCont{ padding:3% 4% 1px; margin-bottom: 3%}
#itemList p{ padding: 2px 0; font-size: 0.9em; }

}

/*Tab
--------------------------------------------------*/
@media screen and (min-width:781px) and (max-width:1080px){
  #txtBox:before{ left: -21%; top: -40px; background-size: 50%;}
  #txtBox{  width: 75%;  margin: 0 0 50px 14%; font-size: 1.3em;  padding:2%;
  font-size: 2vw;
  }


  #meataboutBox::before,
  #meataboutBox::after{ background-size: 80% auto!Important; }
  #meataboutBox:before{left: -20px; top: -20px;}
  #meataboutBox:after{right: -14px; bottom: -20px;}

  #meataboutBox dl{ width: 74%; margin: 0 auto 5px;
    padding:2% 0; height: 212px; }

    #meataboutBox dt{ font-size: 2vw; line-height: 2.5vw;}
    #meataboutBox dd{ font-size: 1.7vw;  line-height: 1.5em;}

}



@media screen and (min-width:781px){
  #itemWrap{ padding: 20px 0;}
  #imgTxt { padding-left: 13.3%;}

  #meatWrap{ padding: 50px 35px 35px; margin-bottom: 40px; }
  #txtBox:after{ right:70px;}
  #meatWrap:after{ background-image: url(../../../images/product/kokusanmaki/dogImg.png) ; 
    width: 142px;   height: 164px; right: 0;   top: -20px;}

  #txtBox:before{ 
    background-image: url(../../../images/product/kokusanmaki/makiserieseImg_pc.png)  ;
    width: 248px; height: 193px; }
  
    #itemList{ padding:30px 35px;}
    #itemList div:first-child{margin-right: 20px; }  

#meataboutBox .brtxt{ display: none; }

    #meataboutBox dl:before,
#meataboutBox dl:after{  min-height: 212px; top:0}

#meataboutBox dl:before{ background: url(../../../images/product/kokusanmaki/txtleft.png) 0 0 repeat-y;
  width: 94px; left:-94px }
#meataboutBox dl:after{ background: url(../../../images/product/kokusanmaki/txtright.png) 0 0 repeat-y;
  width: 75px; right:-75px }

  #meataboutBox:before, #meataboutBox:after{ z-index: 1;}

  #meataboutBox:before{
    background: url(../../../images/product/kokusanmaki/meatImg1_pc.png) 0 0 no-repeat;
    width: 126px; height: 240px;   }
  #meataboutBox:after{
    width: 97px;  height: 123px; right: 0; bottom: 10px; }

    #itemWrap h3::after{bottom: -13px; left:40%; width: 38px; height: 26px;}

}

@media screen and (min-width:641px){
#itemList{ display: flex; }
#itemList li:not(:last-child){ margin-right: 30px; }
}


/*Phone
--------------------------------------------------*/
@media screen and (max-width:780px){
  #itemWrap{ padding: 2% 0 5%}
  #meatWrap{ padding: 16% 3% 35px; margin-bottom: 4%; }

  #txtBox{ width: 86%; margin: 0 0 6% 6%;  font-size: 1.1em; padding: 3% 0;}

  #txtBox:after{ right:6%;}
  #txtBox::before,#meatWrap::after{ background-size: 16vw; }
  #txtBox:before{ 
    background-image: url(../../../images/product/kokusanmaki/makiserieseImg1_phone.png)  ;
    left: -7%; top: -40%; max-width: 127px;  max-height: 127px; 
    width: 25%; height: 75%; }
  


  #meataboutBox dl{ width: 90%; margin: 0 auto 5px; border-radius: 10px;
    padding:2% 3%; line-height: 1.8em; }

  #meataboutBox dt{line-height: 1.4em; }
    #imgTxt{ padding-left: 8%; font-size: 0.9em;}

    #meataboutBox:after{ right: -10%; bottom: 0;
      background-size:50% auto; 
      max-width: 97px;  max-height: 123px; 
      width: 17%; height: 10vw;}
      }
  

    #itemWrap h3::after{ background-size: 50% auto; bottom: -15%;
      max-width: 38px; max-height: 26px; width: 10%; height: 21%;}


  #itemCont div:last-child .itembox{ margin-bottom: 0; }
  #itemList{ padding:7% 5%;}
}

@media screen and (min-width:641px) and (max-width:780px){
#itemList div:first-child{ margin-right: 30px; }
}


@media screen and (max-width:640px){
  #itemList div:first-child{ margin-bottom: 15%; }
  #itemList div:first-child li:nth-child(1),  #itemList div:first-child li:nth-child(2){ margin-bottom: 8%; }
  #itemList ul{ justify-content: space-between; flex-wrap: wrap; }
  #itemList li{ width: 46%; text-align: center;}
}


@media screen and (min-width:481px) and (max-width:780px){
#txtBox{  font-size: 1.1em; }
}

@media screen and (max-width:480px){
  #txtBox{  font-size: 3.6vw;}
}