﻿@import url('burger_menu3.css');
body { margin: 0; padding: 0;word-break:break-all;
 font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ＭＳ Ｐゴシック", sans-serif;
 background-color:#feffd1;}
 
.container { position:relative; width: 100%; height:auto; min-width:320px;padding-bottom:50px; 
    display: -ms-flexbox; display: -webkit-flex;display: flex;
    -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
    -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap;
    -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start;
    -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch;
    -webkit-align-items: center; -ms-flex-align: center; align-items: center;
}
h1{ font-size:1.25em;}
#title{text-align: center; margin-bottom:0; width:100%; background-color:#ffce83; 
    -webkit-order: 0;-ms-flex-order: 0;order: 0;
    -webkit-flex: 0 1 auto;-ms-flex: 0 1 auto;flex: 0 1 auto;
    -webkit-align-self: auto;-ms-flex-item-align: auto;align-self: auto;
}
h2{text-align: center;font-size:0.875em; font-weight:200; margin-top:5px; margin-bottom:20px; width:100%;background-color:#8d0f38; color:#ffffff;
}
#titleimgs{/*border: 1px solid #b5cbaa;*/position: relative; width:117px;height:89px; background-size:contain; background-image: url('../04_lets_cook/images/TitleTop4.png');
              top:10px; z-index:6;	
   }


.ads_Horizon{/*border: 1px solid #b5cbaa;*/width:90%; min-height:90px; height:auto; text-align:center; margin: 20px 5% 0 5%;
    -webkit-order: 3; -ms-flex-order: 3; order: 3;
	-webkit-flex: 0 0 auto;	-ms-flex: 0 0 auto;	flex: 0 0 auto;
	-webkit-align-self: flex-start;	-ms-flex-item-align: flex-start; align-self: flex-start;
}
/*.adstitle{width: 150px; text-align:center; height:20px; z-index: 1; top: -20px; left:50%; margin-left:-75px; font-size:0.75em;color:#c1c1c1; }*/

  .ctg{ position: relative; border: 1px solid #9b9b9b; width:300px; height:400px; margin:20px 10px 10px 10px;
        -webkit-border-radius:6px 6px 6px 6px / 6px 6px 6px 6px; border-radius:6px 6px 6px 6px / 6px 6px 6px 6px;
        box-shadow:-2px -2px 2px #e4fffe, 3px 3px 3px #5c5c5c;
        background-color:#dadde6/*#e6f6f0*/;transition: 0.3s;
}
  .ctg_ads{ position: relative; border: 1px solid #9b9b9b; width:300px; height:400px; margin:20px 10px 10px 10px;
        -webkit-border-radius:6px 6px 6px 6px / 6px 6px 6px 6px; border-radius:6px 6px 6px 6px / 6px 6px 6px 6px;
        box-shadow:-2px -2px 2px #e4fffe, 3px 3px 3px #5c5c5c;
        background-color:#dadde6/*#e6f6f0*/;transition: 0.3s;
}
 .ctg:hover, .ctg:focus, .ctg:active {
    cursor: pointer ;background-color:#99a8ec;
    box-shadow: -1px -1px 0px 0px rgba(0, 255, 251, 1),3px 5px 8px 5px rgba(92, 92, 92, 1);
    transform: translateY(-15px) translateX(3px);
 }
 .ctg_ads:hover, .ctg_ads:focus, .ctg_ads:active {
    cursor: pointer ;background-color:#99a8ec;
    box-shadow: -1px -1px 0px 0px rgba(0, 255, 251, 1),3px 5px 8px 5px rgba(92, 92, 92, 1);
    transform: translateY(-15px) translateX(3px);
 }

  .ctg:focus div {color:#ffffff;}.ctg:active div {color:#ffffff;}.ctg:hover div {color:#ffffff;}
  .ctg_ads:focus div {color:#ffffff;}.ctg_ads:active div {color:#ffffff;}.ctg_ads:hover div {color:#ffffff;}

    .sec_title{border: 1px solid #9b9b9b/*007b06*/; width:90%; font-size:1em; text-align:center; margin:10px 5% 0 5%;
}
    .adstitle2{ color:#939393; }  
      .sec_title_sub{/*border: 1px solid #d5af00;*/ width:100%;font-size:0.875em; color:#939393; text-align:center;
}      






.flat{ border: 1px solid #919191;width: auto;/* 90%; margin:15px 5% 20px 5%;*/
    display: -ms-flexbox; display: -webkit-flex; display: flex;
    -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row;
    -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
    -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
    -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start;
    -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start;
}
#summary{
    -webkit-order: 1;-ms-flex-order: 1;order: 1;
    -webkit-flex: 0 1 auto;-ms-flex: 0 1 auto;flex: 0 1 auto;
    -webkit-align-self: auto;-ms-flex-item-align: auto;align-self: auto;
}

.topmsgbg{ width:100%; height:auto; padding:7px 0 7px 0; margin:30px 0 20px 0; background-color:#ffd7b9;
	-webkit-order: 2;-ms-flex-order: 2;order: 2;
    -webkit-flex: 0 1 auto;-ms-flex: 0 1 auto;flex: 0 1 auto;
    -webkit-align-self: auto;-ms-flex-item-align: auto;align-self: auto;
    
    display: -ms-flexbox;display: -webkit-flex;display: flex;
    -webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;
    -webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;
    -webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;
    -webkit-align-content: stretch;-ms-flex-line-pack: stretch;align-content: stretch;
    -webkit-align-items: center;-ms-flex-align: center;align-items: center;
}

.msg{ font-size:1em; background-color:#ffffff;}
#msg001{ border: 1px solid #ff491f; width:90%; max-width:800px; height:auto; margin:0px 5% 0px 5%; padding:7px 7px 7px 7px; font-size:1em;text-align: left;
    padding:20px 10px 20px 10px;border-radius:6px 6px 6px 6px / 6px 6px 6px 6px ;
    -webkit-order: 0;-ms-flex-order: 0;order: 0;
    -webkit-flex: 0 0 auto;-ms-flex: 0 0 auto;flex: 0 0 auto;
    -webkit-align-self: auto;-ms-flex-item-align: auto;align-self: auto;
}

#ctgy_box2{ position:relative; border: 1px solid #b5cbaa; width:100%; height:auto; margin-top:30px; padding:3px 3px 30px 3px; background-color:#fff3f8;
    -webkit-order: 5;-ms-flex-order: 5;order: 5;
    -webkit-flex: 0 1 auto;-ms-flex: 0 1 auto;flex: 0 1 auto;
    -webkit-align-self: auto;-ms-flex-item-align: auto;align-self: auto;
    /*
   border-radius:5px 5px 5px / 5px 5px 5px 5px; 
   box-shadow:-2px -2px 1px #bbd5d6, 2px 2px 2px #ddfeff;
   */
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    
   
}

      .sec_title_sub{/*border: 1px solid #d5af00;*/ width:100%;font-size:0.875em; color:#939393; text-align:center;}      
	.contcase{ position:relative; border: 1px solid #9b9b9b; width:280px/*98.778 mm*/;top:15px;height:315px/*111.125 mm*/;left:10px;
	  background-size:contain;
	   -webkit-border-radius: 3px 3px 3px 3px / 3px 3px 3px 3px;
       -o-border-radius: 3px 3px 3px 3px / 3px 3px 3px 3px;
       -ms-border-radius: 3px 3px 3px 3px / 3px 3px 3px 3px;
       border-radius:3px 3px 3px 3px / 3px 3px 3px 3px;

       box-shadow:-2px -2px 2px #909090, 1px 1px 2px #d0d0d0;
       background-repeat:no-repeat;/*background-size:contain;*/ background-color:#ffffff;
}
  .contcase_ads{ position: relative; border: 1px solid #9b9b9b; width:300px;top:15px; height:315px; left:0;/* margin: 50px 0px 10px 0px;*/
        background-color:#ffffff
        /*-webkit-border-radius:6px 6px 6px 6px / 6px 6px 6px 6px; border-radius:6px 6px 6px 6px / 6px 6px 6px 6px;
        box-shadow:-2px -2px 2px #e4fffe, 3px 3px 3px #5c5c5c;
       /* background-color:#dadde6/*#e6f6f0;*/
}
      /*ads*/
      #contcase_01{ background-image: url('../images/04/04_01s.jpg');}/*1.ローストチキン*/
    /*#contcase_02{ background-image: none;}/*ads*/
      #contcase_03{ background-image: url('../images/04/04_02s.jpg');}/*2.ローストビーフ*/
      #contcase_04{ background-image: url('../images/04/04_03s.jpg');}/*3.紅焼牛腩*/
      #contcase_05{ background-image: url('../images/04/04_04s.jpg');}/*4.ローストポーク*/
      #contcase_06{ background-image: url('../images/04/04_05s.jpg');}/*5.赤えびと帆立のOliveOil漬*/
    /*#contcase_07{ background-image: none;}/*ads*/
      #contcase_08{ background-image: url('../images/04/04_06s.jpg');}/*6.豚バラ大根*/
      #contcase_09{ background-image: url('../images/04/04_07s.jpg');}/*7.豚スペアリブ*/
      #contcase_10{ background-image: url('../images/04/04_08s.jpg');}/*8.ラムステーキ*/
      #contcase_11{ background-image: url('../images/04/04_09s.jpg');}/*9.叉焼*/
    /*#contcase_12{ background-image: none;}/*ads*/
      #contcase_13{ background-image: url('../images/04/04_10s.jpg');}/*10.スープの濁りを取る*/
      #contcase_14{ background-image: url('../images/04/04_11s.jpg');}/*11.ゴーヤーチャンプルー*/
      #contcase_15{ background-image: url('../images/04/04_12s.jpg');}/*12.鶏手羽元と大根と椎茸の煮物*/
      #contcase_16{ background-image: url('../images/04/04_13s.jpg');}/*13.エビチリ*/
    /*#contcase_17{ background-image: none;}/*ads*/
      #contcase_18{ background-image: url('../images/04/04_14s.jpg');}/*14.鶏のすっぱ煮*/
      #contcase_19{ background-image: none;}/*15.*/
    /*#contcase_20{ background-image: none;}/*ads*/

    #ctg01{
	-webkit-order: 0; -ms-flex-order: 0; order: 0;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
}
    #ctg02{
	-webkit-order: 1; -ms-flex-order: 1; order: 1;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
}
    #ctg03{
	-webkit-order: 2; -ms-flex-order: 2; order: 2;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
}
    #ctg04{
	-webkit-order: 3; -ms-flex-order: 3; order: 3;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
}
    #ctg05{
	-webkit-order: 4; -ms-flex-order: 4; order: 4;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
}
    #ctg06{
	-webkit-order: 5; -ms-flex-order: 5; order: 5;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
}
    #ctg07{
	-webkit-order: 6; -ms-flex-order: 6; order: 6;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
}
    #ctg08{
	-webkit-order: 7; -ms-flex-order: 7; order: 7;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
}
    #ctg09{
	-webkit-order: 8; -ms-flex-order: 8; order: 8;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
}
    #ctg10{
	-webkit-order: 9; -ms-flex-order: 9; order: 9;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
}
    #ctg11{
	-webkit-order: 10; -ms-flex-order: 10; order: 10;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
}
    #ctg12{
	-webkit-order: 11; -ms-flex-order: 11; order: 11;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
}
    #ctg13{
	-webkit-order: 12; -ms-flex-order: 12; order: 12;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
}
    #ctg14{
	-webkit-order: 13; -ms-flex-order: 13; order: 13;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
}
    #ctg15{
	-webkit-order: 14; -ms-flex-order: 14; order: 14;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
}
    #ctg16{
	-webkit-order: 15; -ms-flex-order: 15; order: 15;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
}
    #ctg17{
	-webkit-order: 16; -ms-flex-order: 16; order: 16;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
}
    #ctg18{
	-webkit-order: 17; -ms-flex-order: 17; order: 17;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
}
    #ctg19{
	-webkit-order: 18; -ms-flex-order: 18; order: 18;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
}
    #ctg20{
	-webkit-order: 19; -ms-flex-order: 19; order: 19;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
}

#footer{ width:100%; height: 50px; left:0px; z-index: 5; bottom:0px; background-color:#333235; color:#ffffff;
  border-radius:467px 467px 0px 0px / 50px 50px 0px 0px;/*←→↑↓半径の値を、左上・右上・右下・左下*/ 
 }
  #footertitle{ position:relative; width: 230px; height: 27px; z-index: 1; top: 7px; left:50%; margin-left:-115px;padding:0 0 7px 0; text-align: center;}
  #footertitle a{ font-size: 22px; text-decoration:none; color:#ffffff;}
  #footertitle:hover{cursor:pointer;border-radius:3px 3px 3px 3px / 3px 3px 3px 3px;box-shadow:-1px -1px 1px #f2f2f2, 1px 1px 1px #4e4e4e;}

@media screen and (max-width: 480px){
 h1{ font-size:1.125em;}
}
@media screen and (max-width: 440px){
 h1{ font-size:1em;}
}
@media screen and (max-width: 400px){
 h1{ font-size:0.875em;}
 h2{ font-size:0.75em;}
}

 


