@media all and (max-width: 650px) {
    #container{
        margin-bottom: 0;
    }
}

/* ---------------------------------------------------------
 topcolumn
----------------------------------------------------------*/
#topcolumn {
    padding-top: 12px;
    /*margin-bottom: 0;
    padding-bottom: 0;*/
}
#topcolumn .flexslider {
    max-width: 1000px;
    margin: 0 auto;
    height: 527px;
}
#topcolumn .flex-control-nav{
    height: 11px;
    margin-top: 8px;
    margin-bottom: 8px;
}
#topcolumn .flex-direction-nav a:before {
    content: normal;
}
#topcolumn .flex-direction-nav a.flex-next:before {
    content: normal;
}
.flex-direction-nav a img{
    width: 30px;
}
#topcolumn .flex-control-paging li a{
    background: #eaeaea;
    box-shadow: none;
}
#topcolumn .flex-control-paging li a.flex-active{
    background: #9fa0a0;
}
@media all and (max-width: 1051px) {
    #topcolumn .flexslider {
        height: auto;
    }
}
@media all and (max-width: 860px) {
    .flex-direction-nav{
        opacity: 0.7;
    }
}
@media all and (max-width: 768px) {
    #topcolumn .flexslider {
        height: 411px;
    }
}
@media all and (max-width: 767px) {
    #topcolumn .flexslider {
        height: auto;
    }
}
@media all and (max-width: 551px) {
    #topcolumn .flex-control-nav{
        height: 8px;
    }
    #topcolumn .flex-control-paging li a{
        width: 8px;
        height: 8px;
    }
    .flex-direction-nav a img {
        width: 25px;
    }
}
@media all and (max-width: 480px) {
    #topcolumn{
        padding-top: 0;
    }
}
@media all and (max-width: 420px) {
    .flex-direction-nav{
        display: none;
    }
}
@media all and (max-width: 320px) {
    #topcolumn .flexslider {
        height: 184px;
    }
}
@media all and (max-width: 319px) {
    #topcolumn .flexslider {
        height: auto;
    }
}

/* ---------------------------------------------------------
 two_maincolumn_right
  undercolumn
  rightcolumn
----------------------------------------------------------*/
#center_row {
    /*margin-top: 0px;*/
}
#two_maincolumn_left {
  max-width: 1000px;
  margin: 0 auto;
}
#undercolumn {
    float: left;
    width: 70%;
    margin-left: 0;
    padding-left: 0;
    /*padding-right: 300px;*/
    /*-webkit-transition: width 0.7s ease-out;
    transition: width 0.7s ease-out;*/
}
#two_maincolumn_left #undercolumn {
    margin-top: 0;
}
#rightcolumn {
    display: block;
    float: right;
    min-width: 260px;
    width: 27%;
    /*margin: 60px 0 0 -300px;*/
    margin-top: 60px;
    /*-webkit-transition: width 0.7s ease-out;
    transition: width 0.7s ease-out;*/
}
#rightcolumn aside {
    float: right;
    width: 260px;
}

/*1000px以下は両端12px空ける*/
@media all and (max-width: 1051px) {
    #two_maincolumn_left{
        width: auto;
        margin: 0 12px 0 12px;
    }
}
/*3列+right*/
@media all and (max-width: 916px) {
    #rightcolumn {
        margin-top: 57px;
        margin-left: 12px;
    }
}
/*2列(rightなし)*/
@media all and (max-width: 650px) {
    #center_row {
        /*margin-top: -60px;*/
    }
    #undercolumn {
        width: 100%;
    }
    #rightcolumn {
        clear: both;
        width: 100%;
        margin: 0;
    }
    #rightcolumn aside {
        float: none;
        width: 100%;
    }
}

/* ---------------------------------------------------------
 TopAllContents.tpl
----------------------------------------------------------*/
#re-index {
  width: 100%;
  max-width: 700px;
}
/*ナビ*/
#re-index nav {
    display: block;
    overflow: hidden;
    margin-bottom: 12px;
}
.tabList{
    position: relative;
    text-align: center;
}
.tabList li {
    margin: 0 1%;
    font-size: 18px;
    display: inline-block;
    width:28%;
}
.tabList li a {
    line-height:inherit;
    display: block;
    padding: 17px 0 13px;
    color: #999999;
    cursor: pointer;
}
.tabList li.select a {
    color: #3d3d3d;
    /*font-family: 'FOT-筑紫ゴシック Pro B', TsukuGoPro-B, sans-serif;*/
    text-decoration: underline;
}
/*一覧*/
#re-indexMain {
    margin-bottom: 12px;
}
.contentList .select {
    display: block;
}
.contentList li{
    display: none;
}
.contentList .show{
    display: block;
}
.re-mainFrame {
  /*display: none;*/
    clear: both;
}
.re-contentsArea {
    overflow: hidden;
}
.re-contentsBloc {
    float: left;
    position: relative;
    width: 160px;
    margin: 0 0 6px 20px;
    padding-bottom: 35px;
    overflow: hidden;
    font-size: 12px;
}
.re-contentsBloc:nth-of-type(4n+1){
    margin-left: 0;
}
.re-contentsBloc a{
    display: block;
    width: 100%;
    position: relative;
    padding-bottom: 100%;
    text-decoration: none;
}
.re-contentsBloc a.cs{
    pointer-events:none;
}
.re-contentsBloc a.cs:hover {
    opacity: 1;
    cursor: default;
}
.re-contentsBloc img {
    position: absolute;
    width: 100%;
    max-width: 170px;
}
.re-contentsBloc p {
    position: absolute;
    bottom: -45px;
    height: 38px;
    padding: 5px 4px 4px;
    overflow: hidden;
    line-height: 1.2;
    color: #686868;
    letter-spacing: 0.05em;
}
.topClip {
    position: absolute;
    right:6px;
    bottom: 41px;
    color: #fff;
    font-size: 16px;
    font-family: 'FOT-筑紫ゴシック Pro B', TsukuGoPro-B, sans-serif;
}
.re-contentsBloc .topClip img {
    width: 16px;
    margin: 0 3px -2px 0;
    position: static;
}

.re-contentsBloc .topClip div{
	font-family: 'FOT-筑紫ゴシック Pro B', TsukuGoPro-B, sans-serif;
}

/*ボタン*/
#blogbtnArea a,
#contentsbtnArea a,
#productsbtnArea a {
    display: block;
    color: #fff;
    font-size: 14px;
    padding: 12px 0;
    background: #888889;
}
@media all and (max-width: 1024px) {
    /*一覧*/
    .re-contentsBloc {
        max-width: 200px;
        width: 23%;
        margin: 0 0 6px 2.6%;
    }
    .re-contentsBloc p {
        padding: 5px 2px 4px;
        letter-spacing: normal;
    }
}
/*3列+right*/
@media all and (max-width: 916px) {
    /*ナビ*/
    .tabList li {
        font-size: 110%;
    }
    /*一覧*/
    .re-contentsBloc {
        max-width: 200px;
        width: 32%;
        margin: 0 0 6px 2%;
    }
    .re-contentsBloc:nth-of-type(4n+1){
        margin-left: 2%;
    }
    .re-contentsBloc:nth-of-type(3n+1){
        margin-left: 0;
    }
    .re-contentsBloc img {
        /*width: 100%;*/
        max-width: 200px;
        max-height: 200px;
    }
}
/*2列+right*/
@media all and (max-width: 801px) {
    /*一覧*/
    .re-contentsBloc {
        max-width: 245px;
        width: 48.5%;
        margin: 0 0 6px 3%;
    }
    .re-contentsBloc:nth-of-type(4n+1),
    .re-contentsBloc:nth-of-type(3n+1){
        margin-left: 3%;
    }
    .re-contentsBloc:nth-of-type(odd){
        margin-left: 0;
    }
    .re-contentsBloc img {
        width: 100%;
        max-width: 245px;
        max-height: 245px;
    }
}
/*3列(rightなし)*/
@media all and (max-width: 650px) {
    #re-indexMain{
        margin-bottom: 24px;
    }
    /*一覧*/
    .re-contentsBloc {
        max-width: 245px;
        width: 32%;
        margin: 0 0 6px 2%;
    }
    .re-contentsBloc:nth-of-type(4n+1),
    .re-contentsBloc:nth-of-type(odd){
        margin-left: 2%;
    }
    .re-contentsBloc:nth-of-type(3n+1){
        margin-left: 0;
    }
    .re-contentsBloc img {
        width: 100%;
        max-width: 245px;
        max-height: 245px;
    }
    /*ボタン*/
    .btn_area{
        margin-top: 0;
    }
}
/*2列(rightなし)*/
@media all and (max-width: 527px) {
    /*一覧*/
    .re-contentsBloc {
        max-width: 245px;
        width: 48.5%;
        margin: 0 0 6px 3%;
    }
    .re-contentsBloc:nth-of-type(4n+1),
    .re-contentsBloc:nth-of-type(3n+1){
        margin-left: 3%;
    }
    .re-contentsBloc:nth-of-type(odd){
        margin-left: 0;
    }
    .re-contentsBloc img {
        width: 100%;
        max-width: 245px;
        max-height: 245px;
    }
    /*ボタン*/
    .btn_area{
        margin-top: 0;
    }
}
@media all and (max-width: 480px) {
    .tabList li a{
        padding: 9px 0 7px;
    }
    #re-index nav{
        margin-bottom: 6px;
    }
}
/*文字が折り返すのでフォントサイズ調整 余白調整*/
@media all and (max-width: 356px) {
    /*ナビ*/
    .tabList li {
        font-size: 14px;
    }
    /*一覧*/
    .re-contentsBloc {
        max-width: 245px;
        width: 48%;
        margin: 0 0 6px 4%;
        font-size: 11px;
    }
    .re-contentsBloc p {
        padding: 5px 3px 4px;
        letter-spacing: 0.02em;
    }
    .re-contentsBloc:nth-of-type(4n+1),
    .re-contentsBloc:nth-of-type(3n+1){
        margin-left: 4%;
    }
    .re-contentsBloc:nth-of-type(odd){
        margin-left: 0;
    }
    /*ボタン*/
    .btn_area{
        margin-top: 0;
    }
}
/* ---------------------------------------------------------
 rightcolumn
  re-mailMaga
  re-footerNav
----------------------------------------------------------*/
/*メルマガ*/
.re-mailMaga {
    clear: both;
    max-width: 260px;
    max-height: 170px;
    width: 100%;
    height: 100%;
    background: #b5b5b6;
}
.re-mailArea {
    width: 220px;
    padding: 30px 0 32px 10px;
    color: #fff;
    text-align: left;
    margin: 0 auto;
}
.re-mailArea h4 {
    line-height: 1.0;
    font-size: 19px;
    font-family: 'FOT-筑紫ゴシック Pro B', TsukuGoPro-B, sans-serif;
    padding-bottom: 13px;
}

.re-mailArea p{
padding-bottom: 17px;
font-size: 12px;
}

.re-mailArea p.linkSample{
	font-size: 11px;
}
.re-mailArea p.linkSample{
color: #fff;
text-decoration: underline;
}

#postcarrier_mailcustomer_input_form_sns{
    overflow: hidden;
    padding-bottom: 10px;
}
.re-mailArea .box140 {
    padding: 1px 5px 1px;
    width: 130px;
    height: 25px;
    font-size: 12px;
    float: left;
}

#postcarrier_mailcustomer_input_form_sns input[type='text']{
border-color: #ffffff;
}

.re-mailArea .submitBtn {
    background: url("../img/index/contact.png") -50px -60px no-repeat #00C900;
    font-family: 'FOT-筑紫ゴシック Pro B', TsukuGoPro-B, sans-serif;
    padding: 7px 2px 7px 3px;
    font-size: 12px;
    color: #fff;
    width: 61px;
    height: 15px;
    line-height: 15px;
    display: block;
    float: left;
    text-align: center;
}

@media all and (max-width: 650px) {
.re-mailMaga {
    margin-bottom: 9px;
    padding-bottom: 25px;
}
.re-mailArea {
    width: 280px;
    padding-top: 36px;
    padding-left: 0;
    padding-bottom: 22px;
    max-height:inherit;
}
.re-mailArea h4 {
    padding-bottom: 14px;
    font-size: 20px;
    }
.re-mailArea p{
font-size: 15px;
padding-bottom: 15px;
}

.re-mailArea .box140 {
width: 200px;
height: 30px;
}

.re-mailArea .submitBtn {
    height: 20px;
    line-height: 20px;
}

#postcarrier_mailcustomer_input_form_sns{
padding-bottom: 15px;
}
#postcarrier_mailcustomer_input_form_sns input[type='text']{
font-size: 13px;
}
}

@media all and (max-width: 360px) {
.re-mailMaga {
padding-bottom: 3px;
}
.re-mailArea {
    width: 240px;
    padding-top: 27px;
    padding-left: 5px;
    padding-bottom: 12px;
}
.re-mailArea h4 {
font-size: 18px;
}
.re-mailArea p{
font-size: 14px;
}
.re-mailArea .box140 {
width: 160px;
height: 25px;
}
.re-mailArea .submitBtn {
    height: 15px;
    line-height: 15px;
}

}


/*fb tw など*/
.re-footerNav {
    clear: both;
    width: 260px;
    margin-top: 12px;
    float: right;
}
.re-footerNav li{
    float: left;
    width: 130px;
    height: 130px;
    text-align: center;
}
.fb{
    background: url("../img/index/fb.png");
    background-size: 100%;
}
.tw{
    background: url("../img/index/tw.png");
    background-size: 100%;
}
.about {
    background: url("../img/index/about.png");
    background-size: 100%;
}
.faq {
    background: url("../img/index/faq.png");
    background-size: 100%;
}
.contact,.line {
    background: url("../img/index/contact.png");
    background-size: 100%;
}
.egg{
    background: url("../img/index/egg.png");
    background-size: 100%;
}
.egg img{
    cursor: pointer;
    width: 100%;
    height: auto;
    display: none;
}
.egg img[src*="05"]{
    cursor: default;
}
.re-footerNav a{
    display: block;
    height: 100%;
}
.fb p {
    width: 30px;
    height: 29px;
    padding: 50px 50px 51px 50px;
}
.tw p{
    width: 36px;
    height: 30px;
    padding: 50px 47px 50px 47px;
}

.line p{
    width: 47px;
    height: 44px;
}
@media all and (max-width: 500px) {
.line p{
    width: 42px;
    height: 41px;
}
.line p img{
    width: 44px;
    height: 41px;
}
}
.txt p{
    color: #fff;
    font-size: 16px;
    padding-top: 57px;
    padding-bottom: 57px;
}
/*下に配置*/
@media all and (max-width: 650px) {
    /*メルマガ*/
    .re-mailMaga {
        max-width: 100%;
    }
    /*fb tw など*/
    .re-footerNav {
        width: 100%;
    }
    .re-footerNav li{
        float: left;
        width: 16%;
    }
    .txt p{
        padding-top: 35%;
        padding-bottom: 35%;
    }
    .fb p{
        width: 24px;
        height: auto;
    }
    .fb img {
        width: 24px;
        height: auto;
    }
    .tw p{
        width: 28px;
        height: auto;
    }
    .tw img{
        width: 28px;
        height: auto;
    }
}
@media all and (max-width: 500px) {
    /*fb tw など*/
    .re-footerNav {
        width: 100%;
    }
    .re-footerNav li{
        float: left;
        width: 50%;
    }
    .txt p{
        padding-top: 35%;
        padding-bottom: 35%;
        font-size: 14px;
    }
}





/* ---------------------------------------------------------
 select
----------------------------------------------------------*/



/* 2 カラム表示には狭すぎる場合
@media all and (max-width: 680px) {
    aside {
      width: 100%;
    }
    aside img {
      width: 100%;
    }
    aside .re-sns .re-snsFrame ul {
    }
    aside .re-sns .re-snsFrame ul li {
        width: 50%;
        float: left;
    }
}*/
/* ---------------------------------------------------------
テキストリンクのスタイル
  usage
  @include _mx_txt_link(linkLine); //常に下線あり
  @include _mx_txt_link(hoverLine); //hover時に下線あり
  @include _mx_txt_link(noLine); //常に下線なし
----------------------------------------------------------*/
/* ---------------------------------------------------------
リンクのアイコン[>]
  usage
  :before{
    @include _mx_link_arrow(#カラーコード, 方向[up,down,next,prev], 位置(right,left));
  }
----------------------------------------------------------*/
/* ---------------------------------------------------------
ホバー時に透過する
  usage
  a{
    @include _mx_hover_opacity;
  }
----------------------------------------------------------*/
/* ---------------------------------------------------------
エンボスの線を描画する　！編集中！
  usage
  .sample{
    @include _mx_emboss_line(縦線or横線, 上下左右, 線の色);
  }
  $_vh_mode : vertical horizonal
  $_direction: top bottom right left
----------------------------------------------------------*/
/* ---------------------------------------------------------
ボックスシャドウエフェクト　！編集中！
http://www.paulund.co.uk/creating-different-css3-box-shadows-effects
SCSS側でかけることを想定

  usage
  .sample{
    @include _mx_emboss_line(縦線or横線, 上下左右, 線の色);
  }
  $_vh_mode : vertical horizonal
  $_direction: top bottom right left

  usage html
  <div class="box_shadow1">
    <div class="box_shadow_inner1">Effect 1</div>
  </div>
----------------------------------------------------------*/
/* ---------------------------------------------------------
回転
http://labatmoon.blogspot.com/2012/03/css-no-flash-or-javascript.html
http://lab.ve-lo.net/?p=165

  usage
    $_clockwise :true/false 時計回り

----------------------------------------------------------*/
@-webkit-keyframes _mx_rotate_animation_counter {
  from {
    /* 最初の回転角 */
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -goog-ms-transform: rotate(0deg); }

  /* 1動作の最後 ( 1duration 後) の回転角 */
  to {
    -moz-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    -goog-ms-transform: rotate(-360deg); } }

@keyframes _mx_rotate_animation_counter {
  from {
    /* 最初の回転角 */
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -goog-ms-transform: rotate(0deg); }

  /* 1動作の最後 ( 1duration 後) の回転角 */
  to {
    -moz-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    -goog-ms-transform: rotate(-360deg); } }

@-webkit-keyframes _mx_rotate_animation {
  from {
    /* 最初の回転角 */
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -goog-ms-transform: rotate(0deg); }

  /* 1動作の最後 ( 1duration 後) の回転角 */
  to {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -goog-ms-transform: rotate(360deg); } }

@keyframes _mx_rotate_animation {
  from {
    /* 最初の回転角 */
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -goog-ms-transform: rotate(0deg); }

  /* 1動作の最後 ( 1duration 後) の回転角 */
  to {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -goog-ms-transform: rotate(360deg); } }

/* ---------------------------------------------------------
ロングシャドウ
  http://codepen.io/danieltott/pen/AjKay
  シャドウ定義はfunctionで行い、呼び出す際はmixinを利用する

  usage
    @include _mx_longshadow(カラーコード);

    やや暗くすると良さそう
    @include _mx_longshadow(darken($color, 5% ));
    @include _mx_longshadow(darken($color, 8% ));
----------------------------------------------------------*/




/*
@media all and (max-width: 640px) {
    .re-footerNav ul li {
        float: left;
        width: 50%;
    }
    .re-footerNav img {
        width: 100%;
        max-width: 100%;
    }
}*/
/*
.re-footerNav ul li:nth-child(1) a{
    background: rgba(242, 163, 63, 1);
}
.re-footerNav ul li:nth-child(2) a{
    background: rgba(228, 41, 137, 1);
}
.re-footerNav ul li:nth-child(3) a{
    background: rgba(59, 172, 64, 1);
}
.re-footerNav ul li:nth-child(4) a{
    background: rgba(255, 221, 58, 1);
}
*/

.fbForpc{
	margin-top: 35px;
}


/*iOSで左に余白ができてしまうのを回避*/
#container{
    margin-left: 0;
    padding-left: 0;
}
#center_row{
    margin-left: 0;
    padding-left: 0;
}
#two_maincolumn_left{
    padding-left: 0;
}
#re-index{
    margin-left: 0;
    padding-left: 0;
}

/*コラムとストアはクリップ数を表示しない*/
.columnArea .topClip,
.storeArea .topClip{
opacity: 0;
}

.topClip02{
    opacity: 0;
}


/* レシピメニュー追加 2015.01.30 */
#recipeMenu{
margin-bottom: 10px;
}
#recipeMenu #recipeMenuList {
	overflow: hidden;
}
#recipeMenu #recipeMenuList p{
display: block;
width: 12.5%;
float: left;
text-align: center;
}
#recipeMenu #recipeMenuList p a{
	display: block;
}
#recipeMenu #recipeMenuList p img{
	width: 85%;
	height: auto;
}

@media all and (max-width: 800px) {
#recipeMenu #recipeMenuList p{
width: 25%;
}
#recipeMenu #recipeMenuList p img{
	width: 70%;
}
}

@media all and (max-width: 650px) {
#recipeMenu #recipeMenuList p{
width: 12.5%;
}
#recipeMenu #recipeMenuList p img{
	width: 100%;
}
}

@media all and (max-width: 500px) {
#recipeMenu{
	margin-bottom: 15px;
}
#recipeMenu #recipeMenuList p{
width: 25%;
}
#recipeMenu #recipeMenuList p img{
	width: 70%;
}
}


/* 検索機能追加 */
#search_area{margin: 0;}
#search_area .block_body{
	width: 100%;
}
.recipeArea .re-contentsArea{margin-top: 30px;}

/* 20170829 Add */
#searchMenuWrap{
	overflow: hidden;
	margin: 20px auto 0;
}



#searchMenuWrap p{
	float: right;
	text-align: center;
	font-size: 14px;
	width: 49.2%;
	color: #fff;
}



#searchMenuWrap p#searchWordBtn,
#searchMenuWrap #searchCatBtn a{
	padding: 13px 0;
	border-radius: 20px;
}


#searchMenuWrap p#searchWordBtn{
float: left;
background-color: #898989;
cursor: pointer;
}

#searchMenuWrap #searchCatBtn a{
background-color: #BFBFBF;
}

#searchMenuWrap p a{
	color: #fff;
	text-decoration: none;
	display: block;
}


#search_area{
	margin-top: -5px;
}