@charset "utf-8";
/*
=======================================
	Reset CSS
=======================================
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, main, menu, nav, section, summary,
time, mark, audio, video{
	
}

article,aside,details,figcaption,figure,
footer,header,main,menu,nav,section{
	display:block;
}

body {line-height: 148%; font-family: "メイリオ",Meiryo,"ＭＳ Ｐゴシック";font-size: 16px;color: 1f1f1f;}

.waku{width: 98%;border: 2px solid rgba(148,153,80,1);
     max-width: 900px; 
}
.box1{width: 98%;margin-left: auto;margin-right: auto;
      border:0px solid #0c0; /*ラップ枠　緑*/
      text-align:left;
      max-width: 98%;
      minimam-width: 320px;
      overflow: hidden;
     }
.box2{width: 98%;margin-left: auto;margin-right: auto;
      border:0px solid #0c0; /*ラップ枠　緑*/
      max-width: 98%;
      overflow: hidden;
     }
.box2-1{float: left;
       padding: 30px 0px 0px 30px;
       margin-right: 30px;
       margin-left: 30px;
       width: 40%;
       text-align: left;
       border: 0px solid #00c;/*左枠　青*/
      }
.box2-2{float: left;
        width: 40%;
       margin-left: 30px;
        text-align: left;
        padding: 0px;
        border: 0px solid #93f;/*右枠　紫*/
       }
.box3{width: 98%;margin-left: auto;margin-right: auto;
      padding: 0px;
      border: 0px solid #0c0; /*ラップ枠　緑*/
      max-width: 98%;
      overflow: hidden;
     }

/*ここからスマホ用*/
@media screen and (max-width:480px)
{.waku,.box1,.box2,.box2-1,.box2-2,.box3{display: block;width: 98%;margin: 0;padding: 0}}

.moji1{font-size: 1em;}
.moji2{font-size: 80%; margin: 10px;}
.moji3{font-size: 90%;}


img{
	border: 0;
	max-width: 100%;
	height: auto;
}
/*
=========================================
タイトル画像
=========================================
*/
/* 透明化 */
img.opa {transition: 0.8s ;}
img.opa:hover {opacity: 0.3;}
/*
=========================================
	料理名　上下ボーダー
=========================================
*/
h2.entry-title{
background:#f0e4ac;
 padding:10px 10px;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) inset,0 0 8px rgba(0, 0, 0, 0.1) ;
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) inset,0 0 8px rgba(0, 0, 0, 0.1) ;
box-shadow: 0 7px 10px -5px rgba(0, 0, 0, .1) inset;
font-size:120%;
color:#876a32;
font-weight: bold;
font-family: 'メイリオ', Meiryo;
font-style: italic;
position: relative;

}
.entry-title::before,
.entry-title::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
 height: 6px;
  box-sizing: border-box;
}
.entry-title::before {
  top: 0;
  border-top: 3px solid #949950;
  border-bottom: 1px solid #949950;
}
.entry-title::after {
  bottom: 0;
  border-top: 1px solid #949950;
  border-bottom: 3px solid #949950;
}
/*
=========================================
料理の写真
=========================================
*/
/*角丸　影
--------------------*/
.kado img {
    border-radius: 10px;
    box-shadow: 10px 10px 8px -6px #8d8c8c;
}
/*写真のコメント　背景チェック柄
--------------------*/
.come{
	margin-top: 20px;
	padding: 20px 20px;
	background-color: #fff;
  background-image: linear-gradient(-45deg, rgba(240,228,143,.3) 25%, transparent 25%, transparent 50%, rgba(240,228,143,.3) 50%, rgba(240,228,143,.3) 75%, transparent 75%, transparent 100%),
  linear-gradient(45deg, rgba(240,228,143,.3) 25%, transparent 25%, transparent 50%,  rgba(240,228,143,.3) 50%, rgba(240,228,143,.3) 75%, transparent 75%, transparent 100%);
  background-size: 20px 20px;
}
@media screen and (max-width:480px){.kado img{margin-top: 10px;}}
@media screen and (max-width:480px){.come{margin: 20px 0;}}
@media screen and (max-width:480px){.come{padding: 10px 10px;}}
/*
=========================================
	材料
=========================================
*/
.maste{
 background-color: #fff;	/* 背景色 */
 border: 1px solid #ccc; /* 線の太さ・種類・色 */
 box-shadow:1px 1px 6px 0px #ccc;
 -moz-box-shadow:1px 1px 6px 0px #ccc;
 -webkit-box-shadow:1px 1px 6px 0px #ccc;
 -o-box-shadow:1px 1px 6px 0px #ccc;
 margin: 30px 0px 0px 0px; /* 外側の余白 上下・左右 */
 padding: 40px 10px 10px 20px; /* 内側の余白 上・右・下・左 */
 position: relative;
 z-index: 0;
}
.maste:after{
 background-color: #aacc5d; /* マステ部分の色1 */
 background-image: linear-gradient(45deg, #8cb648 25%, transparent 25%, transparent 75%, #8fc947 75%, #e9fcba), linear-gradient(45deg, #8cb648 25%, transparent 25%, transparent 75%, #8fc947 75%, #8fc947); /* マステ部分の色2 */
 background-position: 0 0, 12px 12px;
 background-size: 24px 24px;
 border-left: 2px dotted rgba(255,255,255,0.9);
 border-right: 2px dotted rgba(255,255,255,0.9);
 box-shadow: 0 0 5px rgba(255,255,255,0.5);
 content: '材料';
 display: block;
 margin: 0 0 10px 0;
 padding: 5px 20px;
 color: #fff;  /* マステ部分文字色 */
 font-weight: bold;
 text-align: center;
 position: absolute;
 top: -10px;
 left: 50px;
 transform: rotate(-3deg);
 -moz-transform: rotate(-3deg);
 -webkit-transform: rotate(-3deg);
 -o-transform: rotate(-3deg);
}

@media screen and (max-width: 480px){.maste{ margin: 0;}}

/*定義リスト*/
dl
dt{float: left;margin-left: 20px;line-height: 20px;}
dd{margin-left: 120px;line-height: 20px;}
dd:before { content: '……　'; }

/*ここからノート罫線*/
.note{
    position: relative;
    background-color: #fff;
    background-image: linear-gradient(rgba(148,153,80,0.1) .1em, transparent .1em);
    background-size: auto 20px;
    line-height: 20px;
margin-top: 5px
}
/*ここまでノート罫線*/

@media screen and (max-width: 480px){ol.sample1 li:before{top: 10%;}}

/*
=========================================
作り方	ボックス二重
=========================================
*/
.mybox{
 background: none;
 border: 2px solid #949950;	/* 線の太さ・種類・色 */
 margin: 5px 10px; /* 外側の余白 上下・左右 */
 padding: 20px; /* 内側の余白 */
 position: relative;
}
.mybox:before{
 background-color: #fff;
 content: '作り方';
 padding: 2px 10px; /* タイトルの余白 上下・左右 */
 position: absolute;
 top: -10px;
 left: 40px;
 text-align: center;
 font-size:18px;
 font-weight:bold;
 font-family: 'メイリオ', Meiryo;
 color: #72ad41
}
.mybox:after{
 background: none;
 border: 2px solid #8ccc61;	/* 線の太さ・種類・色 */
 content: '';
 position: absolute;
 top: 3px;
 left: 3px;
 width: 100%;
 height: 100%;
 z-index: -1;
}
@media screen and (max-width:480px){.mybox{margin:10px 5px 5px 0;padding: 10px 0 0 10px;}}
@media screen and (max-width:480px){.mybox,.mybox:before,.mybox:after:{margin-left:auto;margin-right:auto; display:block; width:98%; } }

/*
=========================================
	リスト　下線
=========================================
*/
ol.sample1{
  counter-reset:list;
  list-style-type:none;
  font: 15px/1.6 'メイリオ', Meiryo;
  padding: 1.5em;
}
ol.sample1 li{
  position:relative;
  padding: 7px 5px 7px 30px;
  text-align: left;
  font-weight: normal;
  font-size:15px;
  border-bottom:dashed 1px #ccc;
}
ol.sample1 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: 0px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  background: #8ccc61;
  border-radius: 50%;
  top: 30%;

  transform: translateY(-50%);
}
@media screen and (max-width: 480px){ol.sample1{padding: 0;}}
@media screen and (max-width: 480px){ol.sample1 li:before{top: 10%;}}

/*************
/* hr 破線
*************/
.bar1{
 background-color: #c3c969;  /* 上部分ストライプの色1 */
 background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, #bdea93), color-stop(.5, transparent), to(transparent));  /* ストライプの色2 */
 background-image: -moz-linear-gradient(left, #bdea93 50%, transparent 50%, transparent);  /* ストライプの色2 */
 background-image: -o-linear-gradient(left, #bdea93 50%, transparent 50%, transparent);  /* ストライプの色2 */
 background-image: linear-gradient(left, #bdea93 50%, transparent 50%, transparent);  /* ストライプの色2 */
 background-size: 10px 10px;
 -webkit-background-size: 10px 10px;
 -moz-background-size: 10px 10px;
 content: '';
 display:block;
 height: 5px;  /* ストライプの高さ */
 position: absolute;
 top: -6px;
 left: 0;
 right: 0;
}

/* リンク設定(footer)
------------------------------------------------------------*/
#footer a{color:#487c2b;text-decoration:none;}
#footer a:hover{color:#c3d825;}
#footer a:active, a:focus{outline:0;}

/* 全体(footer)
------------------------------------------------------------*/
.inner{
margin:0 auto;
width:90%;
color:#333;
font:12px 'メイリオ', Meiryo;
line-height:1.5;
 padding: 10px;  /* 内側の余白 */
 background-image: url(../sozai/fruit.jpg);
 position: relative;
}

/*************
/* ロゴ
*************/
.logo{margin-left:10px}
.logo a{
font-size:16px;
font-weight:bold;
color: #487c2b;
line-height:1;
font-family:'メイリオ', Meiryo;
}

.logo span{
font-size:12px;
font-weight:normal;
}

/**************************
/* グリッド
**************************/
.gridWrapper{clear:both;padding:30px 0;overflow:hidden;}

* html .gridWrapper{height:1%;}
	
.grid{
float:left;
background:#f4f4f4;
border-right:1px solid #fff;
}


.grid p{
padding:5px 10px;
}



.grid li{
padding:5px 0;
list-style:inside;
border-top:1px solid #fff;
border-bottom:1px solid #dbdbdb;
}

.grid li:first-child{border-top:0;}
.grid li:last-child{border-bottom:0;} 


/* フッター内のグリッド(3カラム) */
#footer .grid{background:transparent;}

#footer .col3 ul{margin:0 0 10px 5px;}

#footer .col3 li{
padding:0 7px 0 5px;
margin-bottom:3px;
list-style:none;
border-bottom:0;
display:inline-block;
border:0;
}

/*************
/* フッター
*************/
#footer .copyright{font-size:11px;}

/* PC用 */
@media only screen and (min-width:960px){
	.inner{width:900px;padding:0;}
        .col3{width:704px;}	
}
/* モニター幅960px以下 */
@media only screen and (max-width:960px){
 #footer{padding:0;}
	
 #footer .grid{
	float:none;
	width:100%;
	margin-bottom:5px;
	text-align:center;
	}
}

/* スマートフォン 横(ランドスケープ) */
@media only screen and (max-width:640px){
#footer .grid p{text-align:center;}
#footer .logo{margin-left: -10px;}
}