/* All Responsive
================================================== */
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される（2017追加：M.M） */
@media screen and (max-width: 0em), screen and (min-width: 40em) {
  .show-for-small-only {
    display: none !important;
  }
}

/*sp search area*/
/*#search_recipe_sp_on{
	margin: 10px;
}*/

#search_recipe_sp_on{
	margin: 0 0 20px 0;
    padding-right: 10px;
}

/* category search area*/
.small-up-2 .column, .small-up-2 .columns {
    width: 50%;
    float: left;
}

.row2 {
    margin-bottom: 2.5em;
}

.row2 a{
	color: #40210F;
}

/*アコーディオンメニュー*/

.menu_li_uline_sp {
	border-bottom:1px dashed #CCCCCC;
}

.menu_link_sp2 {
    padding: 0 1px;
    background: #EFEEE8;
	color: #45210f;
}


#whopper {
    width: 100%;
	clear: both;
}

label[type="menu"] {
    background: #EFEEE8;
    color: #40210F;
    padding: 10px;
    display: block;
    margin: 0;
    border: 1px solid #fff;
}

input[type="checkbox"].on-off{
    display: none;
}


.menu {
     width: 50%;
     float: left;
}
.menu ul {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu li {
}

input[type="checkbox"].on-off + ul{
    height: 0;
    overflow: hidden;
}


input[type="checkbox"].on-off:checked + ul{
    height: 200px;
}

.clear {
	clear:both;　/*floatの解除*/
}

/*     基本      */

@media only screen and (max-width: 959px) {
	/*navigation*/
	#navigation .selector {
	    display: -moz-inline-box; display: inline-block; display: inline; position: relative;
	    height: 40px;
		width: 25px;
	    margin: 0; padding: 0;
	    border: none;
	    cursor: pointer !important;
	    vertical-align: middle;
	    zoom: 1;
	}
	    #navigation .selector option {
	        color: #444;
	        -webkit-appearance: none;
	        background: #fff;
	    }
	#navigation .selector:before {
	    display: block; position: absolute;
	    left: 0; top: 50%;
	    margin-top: -9px;
	    color: #000;
	    font-size: 18px; font-weight: normal;
	    font-style: normal;
	    text-align: left; text-decoration: inherit;
	    -webkit-font-smoothing: antialiased;
	    content: "\f0c9";
	    font-family: FontAwesome;
	    line-height: 18px;
	    line-height: normal;
	    vertical-align: baseline;
	}
	#navigation .selector select {
	    position: absolute;
	    left: 0; top: 0px;
	    height: 45px; width: 45px;
	    background: none;
	    cursor: pointer;
	}
	#navigation .selector select:focus {
	    outline: 0
	}
	#navigation .selector:hover {
	    -moz-opacity: 1;
	    -webkit-opacity: 1;
	    opacity: 1;
	}
	#navigation .selector span {
	    display: block;
	    text-indent: -9999px;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	#navigation .selector {
	    display: inline-block
	}
	#navigation ul {
	    display: none
	}
	/*navigation-secondary*/
	#navigation-secondary .selector {
	    display: -moz-inline-box; display: inline-block; display: inline; position: relative;
	    height: 55px;
		width: 100%;
	    margin: 0;
		padding: 0;
		color: #000;
		font-weight: 600;
	    text-indent: 30px;
	    border: none;
	    cursor: pointer !important;
	    line-height: 55px;
	    vertical-align: middle;
	    zoom: 1;
	}
	    #navigation-secondary .selector select {
	        position: absolute;
	        left: 0; top: 0px;
	        height: 55px;
			width: 100%;
	        background: none;
	        cursor: pointer;
	    }
	    #navigation-secondary .selector select:focus {
	        outline: 0
	    }
	#navigation-secondary .selector:before {
	    display: block; position: absolute;
	    left: -30px; top: 50%;
	    margin-top: -9px;
	    color: #000;
	    font-size: 18px; font-weight: normal;
	    font-style: normal;
	    text-align: left; text-decoration: inherit;
	    -webkit-font-smoothing: antialiased;
	    content: "\f0c9";
	    font-family: FontAwesome;
	    line-height: 18px;
	    line-height: normal;
	    vertical-align: baseline;
	}
	#navigation-secondary .selector option {
	    -webkit-appearance: none
	}
	#navigation-secondary .selector:hover {
	    -moz-opacity: 1;
	    -webkit-opacity: 1;
	    opacity: 1;
	}
	#navigation-secondary .selector span {
	    display: block;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	#navigation-secondary .selector {
	    display: inline-block
	}
	#navigation-secondary ul {
	    display: none
	}
	.comment-avatar {
	    float: none;
	    margin-bottom: 15px
	}
	.comment-content {
	    margin-left: 0
	}
	#commentsbox [class*="depth-"] .comment-details {
	    margin-left: 0
	}
}
/* Smaller then tablet portrait
================================================== */
@media only screen and (max-width: 767px) {
	#header-ad {
	    float: none;
	    margin-top: 20px;
	    text-align: left
	}
	#sidebar {
	    margin-top: 50px;
	    padding: 0;
      padding-left: 0px !important;
	}
	#footer-menu ul {
	    float: left;
	    margin-top: 10px
	}
	    #footer-menu ul li {
	        margin-left: 0; margin-right: 10px
	    }
}
/* Ipad Mini Portrait Edits
================================================== */
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
	.att-one-half, .att-one-third, .att-two-third, .att-three-fourth, .att-one-fourth, .att-one-fifth, .att-two-fifth, .att-three-fifth, .att-four-fifth, .att-one-sixth, .att-five-sixth {
	    float: none;
	    width: 100%;
	    margin-bottom: 20px; margin-right: 0
	}
	.att-pricing-table > div {
	    margin-bottom: 25px
	}
	.att-box, .att-box.left, .att-box.right {
	    float: none;
	    width: 100% !important
	}
}
/* Mobile (Portrait)
================================================== */
@media only screen and (max-width: 767px) {
	/*shortcodes*/
	.att-one-half, .att-one-third, .att-two-third, .att-three-fourth, .att-one-fourth, .att-one-fifth, .att-two-fifth, .att-three-fifth, .att-four-fifth, .att-one-sixth, .att-five-sixth {
	    float: none;
	    width: 100%;
	    margin-bottom: 20px; margin-right: 0
	}
	.att-pricing-table > div {
	    margin-bottom: 25px
	}
	.att-box, .att-box.left, .att-box.right {
	    float: none;
	    width: 100% !important
	}
}
/* Mobile (Landscape)
================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {

}