body {margin: 0;background: #f2f2f2;padding: 0;
    font-family: "ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    }

.topmain {
    background-color: #A7212A;
    padding: 5px;
}
div.pagetitle {
    padding: 10px 0 0 0;
    margin-top: 50px;
    overflow: hidden;
    background-color: #fff;
}
a:link {color: #333;text-decoration: none;}
ul,li{margin: 0;padding: 0;}
.gnav{margin: 0;background: #f2f2f2; padding: 0;}
gnav li{margin: 0;background: #f2f2f2;padding: 0;}
h2{font-size:100%;}
img {max-width: 100%;height: auto;margin:0;}
header {background: #F2F2F2;color: #000;padding: 0;}
.headnav{margin-right:50px;padding:5px;}
.model{float: right; }
.model img{display: inline-block;}

header img{vertical-align:middle;padding:2px;}
footer {background: #f2f2f2;padding: 1rem;font-size:70%;}
.nav-wrap{
        box-sizing: border-box;
        position: fixed;
        top: 0;
        width: 100%;
	z-index: 9999;
    }
   .nav-wrap{
        box-sizing: border-box;
        position: fixed;
        top: 0;
        width: 100%;
    }
    .gnav {
      list-style-type: none;
      background: #eee;
      width: 100%;
      z-index: 99;
    }

    .gnav li {
      border-bottom: 1px solid #333;
    }

    .gnav li a {
      display: block;
      text-decoration: none;
      /* (44-16)/2=14px */
      padding: .875rem 1rem;
    }

    .icon-animation {
      width: 44px;
      height: 40px;
      display: block;
      cursor: pointer;
      float: right;
      position: absolute;
      right: 0;
      text-align: center;
      top: .2rem;
    }

    .icon-animation span {
      width: 30px;
      height: 3px;
      display: block;
      background: #333;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -25px;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    .icon-animation .top {
      -webkit-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
      transform: translateY(-10px);
    }

    .icon-animation .bottom {
      -webkit-transform: translateY(10px);
      -ms-transform: translateY(10px);
      transform: translateY(10px);
    }

    .is-open .middle {
      background: rgba(51, 51, 51, 0);
    }

    .is-open .top {
      -webkit-transform: rotate(-45deg) translateY(0px);
      -ms-transform: rotate(-45deg) translateY(0px);
      transform: rotate(-45deg) translateY(0px);
    }

    .is-open .bottom {
      -webkit-transform: rotate(45deg) translateY(0px);
      -ms-transform: rotate(45deg) translateY(0px);
      transform: rotate(45deg) translateY(0px);
    }
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 20px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
}
h2.acMenu span {background-color:transparent;cursor: hand; cursor:pointer;padding:3%}
h2.acMenu{background:url(/range/recipe/mro-w10x/sp/image/plus.gif) no-repeat;background-position:95% 50%; background-color:#f2f2f2;background-clip: border-box;border:solid 1px #ccc;}
h2.acMenu.active{background:url(/range/recipe/mro-w10x/sp/image/minus.gif) no-repeat;background-position:95% 50%; background-color:#f2f2f2;background-clip: border-box;}
div.acMenu{
    display:none;
    }
h2.acMenu2{background:url(/range/recipe/mro-w10x/sp/image/minus.gif) no-repeat;background-position:95% 50%; background-color:#f2f2f2;background-clip: border-box;z-index: 1;}
h2.acMenu2.active{background:url(/range/recipe/sp/mro-vw1/image/plus.gif) no-repeat;background-position:95% 50%; background-color:#f2f2f2;background-clip: border-box;}
div.acMenu2{
    display:none;
    }
h2{ padding: 10px 40px 10px 10px;}
h2.acMenu3{background-color:#f2f2f2;background-clip: border-box;border:solid 1px #ccc;}

span.title{font-size:100%;}
    .main{padding:10px 0;background-color:#A7212A;overflow:hidden;}
.menulist{clear: both;}
    .menulist li{float:left;background-color:#fff;margin:0 0 10px 2.5%;text-align:ceter;list-style-type:none;width:30%;vertical-align: middle;border:solid 1px #ccc;box-sizing:border-box;padding:0;}
    .menulist span{background-color:#fff; padding:0 5px;margin-top:0; font-size:90%;}
    .menulist span{display: block;height:3em;}
.menulist a:link{color:#333;text-decoration: none;}
.menulist a:visited{color:#333;text-decoration: none;}
#footer{clear: both;}

.catlist li{background-color:#fff;margin:10px;}
.pagetitle h1{width:70% !important; margin:0; padding:0 0 0 5px;background-color:#fff; font-size:100%; line-height:110%; float:left;}
#search{margin-top:50px;padding:10px;background-color:#f2f2f2;}
.headertitle{margin:0;background-color:#fff}

/*page*/
.MenuNumAu {
    display: table-cell;
    float: right;
   margin: 0 15px 10px 0 !important;
padding-bottom:1px;
padding-top:3px;
    width: 20%;
height:43px;
    border: 2px solid #ec008c;
    color: #ec008c;text-align: center;
font-size:73% !important;
box-sizing: border-box;
}

.MenuNumAu span {/*20190711修正*/
display:block;
    color: #ec008c;
    padding: 0;}

.MenuNumAp{
    display: table-cell;
    float: right;
   margin: 0 15px 0 0 !important;
    width: 20%;
height:43px;
    border: 2px solid #666;
    color: #666;text-align: center;
font-size: 73%;
box-sizing: border-box;
}

.MenuNumAp span {
    color: #666;
    padding: 0px;}

.MenuNumMa{
    display: table-cell;
    float: right;
   margin: 0 15px 0 0 !important;
    width: 20%;
height:43px;
    border: 2px solid #666;
    color: #666;text-align: center;
font-size: 73%;
box-sizing: border-box;
}

.MenuNumMa span {
display:inline-block;
    color: #666;
    padding: 10px 0;}

.MenuNumDoubleBox{
float:right;
width:38%;
margin:0 2% 0 -23%;
}

.MenuNumAuDouble{
width:48% !important;
height:43px;
float: left !important;
margin:0px !important;
padding-bottom:0;
font-size:73% !important;
box-sizing: border-box;
}

.MenuNumMaDouble{
float: right !important;
width:48% !important;
height:43px;
font-size:73% !important;
text-align:center !important;
margin-right:0 !important;
box-sizing: border-box;
}
.pagecat li{font-size:90%; border:solid 1px #ccc;display: inline-block;padding:5px;margin:3px;background: #820625;}
.pagecat li a{color:#fff;text-decoration: none;}

.RecipeA {
    background: rgba(0, 0, 0, 0) url("/range/recipe/img/recipe_a.gif") no-repeat scroll left top;
    padding-top: 26px; border-bottom:10px;margin-bottom:10px;
}
.RecipeB {
    background: rgba(0, 0, 0, 0) url("/range/recipe/img/recipe_b.gif") no-repeat scroll left top;
    padding-top: 26px;margin-bottom:10px;
}
.Recipe1 {
border: 1px solid #ff6666;padding: 10px;}

.TableStyle_Recipe1 {
    border-collapse: collapse;
    margin: 0 0 10px 0;
    width: 100%;
}

.TableStyle_Recipe1 th {
    background: #fff none repeat scroll 0 0;
    border-color: currentcolor currentcolor #bda990;
    border-style: none none dotted;
    border-width: 0 0 1px;
    font-size: 90%;
    padding: 0.3em 4px 0.17em 5px;
    text-align: left;
    vertical-align: baseline;
}

.TableStyle_Recipe1 td {
    background: #fff none repeat scroll 0 0;
    border-color: currentcolor currentcolor #bda990;
    border-style: none none dotted;
    border-width: 0 0 1px;
    font-size: 90%;
    padding: 0.3em 0 0.17em;
    text-align: right;
    vertical-align: baseline;
    white-space: nowrap;
}

.TableStyle_Recipe2 {
    border-collapse: collapse;
    border-top: 1px solid #bda990;
    margin: 0 0 20px;
    width: 100%;
}

.TableStyle_Recipe2 th {
    background: #fff none repeat scroll 0 0;
    border-color: currentcolor currentcolor #bda990;
    border-style: none none solid;
    border-width: 0 0 1px;
    font-size: 90%;
    padding: 0.3em 4px 0.17em 15px;
    text-align: left;
    vertical-align: baseline;
}

.TableStyle_Recipe2 td {
    background: #fff none repeat scroll 0 0;
    border-color: currentcolor currentcolor #bda990;
    border-style: none none solid;
    border-width: 0 0 1px;
    font-size: 90%;
    padding: 0.3em 5px 0.17em 0;
    text-align: right;
    vertical-align: baseline;
    white-space: nowrap;
}

ol.ListStyle1 {
    font-size: 90%;
}
ol.ListStyle1, ol.ListStyle2 {
    margin: 0 0 20px;
    padding-left: 1.8em;
}

ol.ListStyle1 li {
    border-bottom: 1px dotted #999;background: #fff
}
ol.ListStyle1 li, ol.ListStyle2 li {
    line-height: 140%;
    margin: 0 0 5px;padding:1% 0;background: #fff
}

ul.ListStyle1{list-style: none; font-size: 90%;}
ul.ListStyle1 li{background: #fff}

/*.CookingTips div.BoxPatternA {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #cb4740;
    border-radius: 4px;
    clear: both;
    margin-bottom: 30px;
    padding-bottom: 0;
    padding-top: 0;
}

.CookingTips div.BoxPatternA h2 {
    background: #ebb9b6 none repeat scroll 0 0;
    border-bottom: 1px solid #cb4740;
    border-radius: 4px 4px 0 0;
    color: #4b2e3f;
    font-weight: bold;
    margin: 0;
}*/

.CookingTips div.BoxPatternA .Inner {
    background: transparent none repeat scroll 0 0;
    padding: 10px;
}

.CookingTips div.Inner .ListStyle1 dt {
    font-weight: bold;
}


dl.ListStyle1 dd, dl.ListStyle2 dd {
    line-height: 140%;font-size:90%;
    margin: 0 0 15px;
    padding: 0 0 0 1em;
}

.TextStyle1{font-size:90%;}
.mb {
    border: 1px solid #ec008c;
    margin: 0 2px;
    padding: 0 2px;
}
.point {
    color: #ec008c;
    font-weight: bold;
}

/*form*/
input.fs-text{width:75%;font-size:120%;padding:1%;margin:2%;border:0;border:solid 1px #ccc;-webkit-appearance: none;}
input.fs-btn {
  -webkit-border-radius: 4;
  border-radius: 4px;
  -webkit-box-shadow: 0px 0px 6px #666666;
  -moz-box-shadow: 0px 0px 6px #666666;
  box-shadow: 0px 0px 6px #666666;
  font-family: Arial;
  color: #303030;
  font-size: 120%;
  background: #b3b3b3;
  text-decoration: none;
width:18%;
padding:2px;
-webkit-appearance: none;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
padding:1%;
}

.tips dl{padding:10px;font-size:90%;}
.tips dt{margin:0;padding:0;font-weight: bold;}
.tips dd{margin:0;padding:0;}
.tips ul,li{margin:0;padding:0 15px;font-size:90%;}
.tips p,h3,h4{margin:0;padding:10px;font-size:90%;}
div.tips{padding:0 10px 50px 10px;} 
p.read{font-size:90%;color:#fff;padding:10px;}

.TabContents { 
/*	display: none; */
	position: relative;
	margin-bottom:15px;
    padding: 10px 15px 20px;
    border-radius: 0 0 10px 10px;
    background-color: #fdfbf0;
    border: 1px solid #a7212a;
}
.TabContents p.portions{
    position: absolute;
    font-size: 70%;
    background: #a7212a;
    z-index: 100;
    top: 3%;
    right: 3%;
    padding: 5px;
    border-radius: 50px;
    color: #ffffff;
    text-align: center;
    width: 20%;
}
.TabContents dl{
	letter-spacing:-1em;
	display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.TabContents dt,
.TabContents dd{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	margin-bottom: 8px;
	padding: 5px 10px 2px;
	border-bottom: 1px dashed #c1a284;
	vertical-align: top;
	font-size: 90%;
	letter-spacing: 0.01em;
	
}
.TabContents dt{width: 48%; margin-right: 2px;}
.TabContents dd{width: 50%; text-align: right;margin-left: 0;}

.groupA{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	border: 3px double #FF6666;
	padding: 15px;
    margin-top: 30px;
	margin-bottom: 15px;
	width: 100%;
	position: relative;
	}
.groupA::before{
    content: "A";
    color: #FFF;
	position: absolute;
    top: -32px;
    left: -3px;
    border-radius: 8px 8px 0 0;
    background-color: #DD6666;
    padding: 3px 5px 2px;
    width: 40px;
    text-align: center;
    letter-spacing: 0;
	}
.groupA dt,
.groupA dd{
	border-bottom: 1px dashed #FF6666;
	}
.groupB{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	border: 3px double #ffb566;
	padding: 15px;
    margin-top: 35px;
	margin-bottom: 15px;
	width: 100%;
	position: relative;
	}
.groupB::before{
    content: "B";
    color: #FFF;
	position: absolute;
    top: -32px;
    left: -3px;
    border-radius: 8px 8px 0 0;
    background-color: #fbac58;
    padding: 3px 5px 2px;
    width: 40px;
    text-align: center;
    letter-spacing: 0;
	}
.groupB dt,
.groupB dd{
	border-bottom: 1px dashed #ffb566;
	}
.groupC{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	border: 3px double #96cdec;
	padding: 15px;
    margin-top: 35px;
	margin-bottom: 15px;
	width: 100%;
	position: relative;
	}
.groupC::before{
    content: "C";
    color: #FFF;
	position: absolute;
    top: -32px;
    left: -3px;
    border-radius: 8px 8px 0 0;
    background-color: #83bdde;
    padding: 3px 5px 2px;
    width: 40px;
    text-align: center;
    letter-spacing: 0;
	}
.groupC dt,
.groupC dd{
	border-bottom: 1px dashed #96cdec;
	}
.TabContents h3{
	margin: 25px 0 0px;
    font-size: 100%;
    color: #75453c;
    display: flex;
    align-items: center;
	font-size: 90%;
}
.TabContents h3::before,
.TabContents h3::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background: #98bd90;
    display: block;
}
.TabContents h3::before {
	margin-right: 0.8em;
}
.TabContents h3::after {
	margin-left: 0.8em;
}
.TabContents h3.other{
	margin:-25px 0 10px !important;
	color: #fff;
	font-size:100%;
    font-weight: 100;
    background: #a7212a;
    border-radius: 10px;
    padding: 5px 0;
}
.TabContents h3.other::before,
.TabContents h3.other::after {
    height: 1px;
    background: #fdfbf0;
}
.TabList{
	position: relative;
	display: flex;
	clear: both;
	
}
.TabList:after {
	content: "";
	display: block;
	clear: both;

}
.TabList li {
	background-color: #f3f1ed;
	border-radius: 8px 8px 0 0;
	position: relative;
	color: #75453c;
	vertical-align: middle;
	margin:0 3px 0 0;
	justify-content: space-between;
	flex-grow: 1;
	list-style: none;
}

.TabList li p{
	position: relative;
	display: block;
	margin: 11px;
	font-size: 100%;
	font-weight: bold;
	text-align:center;
}
.TabList li p br{
	display: none;
}
.TabList li.Current {
	background: #a7212a;
	color: #fff;
}

.TabList li:hover {
	cursor: pointer;
	background: #ebbbb6;
}

.TabList a{padding: 10px;display:inherit;}

.TabList a.active {
	border-radius: 8px 8px 0 0;
    background: #a7212a;
    color: #fff;
flex-grow: 1;
}


.IngredientTab h2{
	background-color:#f2f2f2;
	background-clip: border-box;
	border:solid 1px #ccc;
}
.tips ul, li {
	padding: 0;
}

.IngredientTab{}
.IngredientTab h2{
	width: 100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 8px;
	padding: 10px 20px;
	margin: 5px 0 10px;
	background-image: none;
	background-color: #c1a284;
	color: #fff;
	clear: both;
}

ol {
  counter-reset: my-counter;
  list-style: none;
  padding: 0;
	font-size: 90%;
}

ol li {
  margin-bottom: 10px;
  padding-left: 30px;
  position: relative;
}
ol li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  background-color: #FFF;
	border: 1px solid #333;
	box-sizing: border-box;
  color: #222;
  display: block;
  float: left;
  line-height: 14px;
  margin-left: -24px;
  text-align: center;
  height: 15px;
  width: 15px;
  border-radius: 50%;
	margin-top: 4px;
	font-size: 73%;
}

ol li.CountItem:before {
 content: counter(item)  !important;
}

/*oldw10x*/


.main{padding:0 5px 5px 5px;background-color:#fff;}
h2.Directions{display:none;}
.cookpad_desc{line-height: 100%;font-size:70%}
.BoxPatternA h2 {padding:3%;background-color:#f2f2f2; border:solid 1px #ccc;margin-bottom: 0;}
div.Inner{display:block;padding:5px;}
div.Inner dl.ListStyle1{margin:0;}
.BoxPatternA h2 span img{width:6%;padding:0 5px 0 0;}
h2{ padding:10px;}
.TabContents dt {
    width: 58%;
    margin-right: 2px;
}
.TabContents dd {
    width: 40%;
    text-align: right;
    margin-left: 0;
}

.CookingTips div.Inner .ListStyle1 dt {
    font-weight: bold;
}

.flex-container {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-flow: row wrap;
}
.flex-item {
margin: 3px;
box-sizing: border-box;
width: 50%;
flex: 1 0 40%;
background-color: #fee2ce;
border: 1px solid #ccc;
}
.flex-item h3{background-color: #fccaab;border-bottom: 1px solid #ccc;}
.flex-item p{margin-left: 5px;}
.flex-item p span{display: inline-block;
font-size: 85%;}

.video{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

#myRaderChart{margin-top:20px;}

.TabList li {
	position: relative;
}

.positionTest {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	opacity: 0;
}
.menutitle{background-color: #f2f2f2;
background-clip: border-box;
border: solid 1px #ccc;}
div.BoxPatternA .TableStyle1{
    margin-left: 15px;
    margin-right: 15px;
    margin: 0 0 20px;
    border-collapse: collapse;
}
table th, table td {
padding: 5px;
    border: solid 1px #ddd;
    font-size: 83%;
    text-align: left;
}
table th {
    background-color: #f2f2f2;
    font-weight: normal;
}

dl.ListStyle1_sp dt{
    margin: 0 0 5px;
    padding: 0 0 0 1em;
    background: url(/image/jp/r1/icon/icon_list_marker_hd.gif) no-repeat 0 4px !important;
        background-size: auto !important;
    background-size: 16px 16px !important;
    -moz-background-size: 16px 16px !important;
    -webkit-background-size: 16px 16px !important;
    -o-background-size: 16px 16px !important;
    -ms-background-size: 16px 16px !important;
    line-height: 160%;
    font-size: 95%;
}


div.chart_table p{
font-weight: bold;}
div.chart_table h3{background-color:#fccaab;}
font-weight: bold;}
div.chart_table{background-color: #fee2ce;border:solid 1px #ccc;}

.chart_table{width:100%;border-collapse: collapse;margin-bottom: 5px;background-color: #fee2ce;margin: 3px;}
.chart_table th{width: 50%;
width: 50%;background-color: #fccaab;
font-weight: bold;}
.chart_table td{background-color: #fee2ce;}

.mark_a
{
background-color: #f07171;
    color: #fff;
    border-radius: 50%;
    width: 22px;
    display: inline-block;
    text-align: center;
}

.mark_b
{
background-color: #42a626;
    color: #fff;
    border-radius: 50%;
    width: 22px;
    display: inline-block;
    text-align: center;
}

.mark_c
{
    background-color: #751919;
    color: #fff;
    border-radius: 50%;
    width: 22px;
    display: inline-block;
    text-align: center;
}

.prate{    width: 40px;
    padding-right: 5px;
}
.mansui{width: 50px;padding-right: 10px;}
.heatbox1{text-align: center;
background-color: #666;
color: #fff;
padding: 3px;
margin: 5px !important;}
.heatbox2{text-align: center;
border: solid 1px;
background-color: #fff;
margin: 5px !important;}
.heatbox3{text-align: center;margin:0;}
.heatbox4{text-align: center;margin:0;}
.heatbox5{text-align: center;margin:0;}
.TextStyle2{font-size: 73%;margin: 2px;}
.flex-item .point{font-size: 100%;}
.BoxPatternA{width:100%;}
.CookingTips{width:100%;}
.point1{width:100%;}