@charset "UTF-8";
/* Reset font-size */
/*
html { font-size: 62.5%; }
#header  { font-size: 13px; font-size: 1.3rem;}
div.pan_navi  { font-size: 13px; font-size: 1.3rem;}
#post_date  { font-size: 14px; font-size: 1.4rem;}
.entry-title  { font-size: 24px  !important; font-size: 2.2rem !important; }
#secondary ul  { font-size: 13px; font-size: 1.3rem;}
#sidebar {font-size: 13px;font-size: 1.3rem;}
#footer { font-size: 12px; font-size: 1.2rem;}
*/
/* /Reset font-size */
/*
h1, h2, h3, div, p, a, em, img, ul, li, {margin:0;padding:0;}
h1 {font-size: 24px;font-size: 2.4rem;line-height: 1.4;font-weight: normal;color: #555;margin-top: 12px;}
*/

@media (min-width: 767px) {
    .hidden-xs {
        visibility: visible;
        display: block;
    }
    .visible-xs {
        visibility: hidden;
        display: none;
    }
}
@media (max-width: 767px) {
    .hidden-xs {
        visibility: hidden;
        display: none;
    }
    .visible-xs {
        visibility: visible;
        display: block;
    }
}

#main {
    float: none;
    margin: 0 auto;
    padding-top: 25px;
    max-width: 960px;
    width: 100%;
}

#naiyou {
    /*width: 940px;*/
    display: flex;
    justify-content: center;
}

#vd-recipe { width: 710px; background-color: #fff;/*float: right;*/ }
#vd-recipe p { font-size: 15px;font-size: 1.5rem;margin-bottom: 18px;}
#vd-recipe .select-jungle img { width: 100%;}
#vd-recipe #panel-wrapper #panel2 { display: none; margin: 15px 10px 0 10px;  padding: 14px 9px 0 9px; }
#vd-recipe #panel-wrapper #panel2 .panel-txt { background-color: #f8f4ed; color: #7f6d4c; padding-left: 9px; margin-bottom: 15px; }
#vd-recipe #panel-wrapper #panel2 ul li { display: block; float: left; padding-right: 20px; padding-bottom: 15px; cursor: pointer; }
#vd-recipe #panel-wrapper #panel3 { display: none; margin: 15px 10px; background-color: #f9e8d8; padding: 14px 9px 10px; border: 1px solid #f7f3dd; }
#vd-recipe #panel-wrapper #panel3 .panel-txt { background-color: #f8f4ed; color: #7f6d4c; padding-left: 9px; margin-bottom: 15px; }
#vd-recipe #panel-wrapper #panel3 ul li { display: block; float: left; padding-right: 16px; padding-bottom: 10px; cursor: pointer; }
#vd-recipe #panel-wrapper #panel3 #plus { background-color: #FFFFFF; }
#vd-recipe #panel-wrapper #panel3 #category { float: left; width: 134px; height: 30px; background: url(../img/select_bg.gif); float: left; padding: 9px 0 0 16px; margin-right: 10px; }
#vd-recipe #panel-wrapper #panel3 #category1, #vd-recipe #panel-wrapper #panel3 #category2, #vd-recipe #panel-wrapper #panel3 #category3 { display: none; }
#vd-recipe #panel-wrapper #panel3 #subcategory { background-color: #FFF; height: 31px; padding-top: 8px; padding-left: 10px; }
#vd-recipe #recipe-wrapper { padding: 20px 0; }
#vd-recipe #recipe-wrapper .block { width: 210px; background-color: #FFFFFF; margin: 0 5px 10px; padding: 6px; height: 280px; display: inline-block; vertical-align: top;}
#vd-recipe #recipe-wrapper .block .image { width: 210px; height: 210px; overflow: hidden; margin-bottom: 5px; border: 1px solid #C1AD97;position: relative;top: -25px;}
#vd-recipe #recipe-wrapper .block .image img { height: 210px;}
#vd-recipe #match0 { display: none; width: 400px; margin: 0 auto; height: 45px; border: 1px solid #dfd4bf; background-color: #FFFFFF; text-align: center; padding-top: 12px; }
#vd-recipe #totop { text-align: right; padding-right: 19px; }

/*特集インデックスへ*/
#toindex { margin-top: 3px; padding-left: 17px; }

.social-button { padding: 3px; }
#recipe-tab { padding-top: 8px;  background-color: #FFFFFF; }

/*ヘッダーの設定*/
#vd-recipe #recipe-header .header img { width: 100%; }
#vd-recipe #recipe-header p.top-lead { padding: 24px 12px 12px 12px;line-height: 1.5;margin-bottom: 0;}
a.headbt01 { background-image: url(../img/header_menu.png); background-repeat: no-repeat; background-position: 0px 0px; width: 162px; display: block; height: 83px; margin-top: 4px; margin-left: 537px; text-indent: -9999px; }
a.headbt02 { background-image: url(../img/header_menu.png); background-repeat: no-repeat; background-position: 0px -83px; width: 162px; display: block; height: 83px; margin-top: 13px; margin-left: 537px; text-indent: -9999px; }
a.headbt03 { background-image: url(../img/header_menu.png); background-repeat: no-repeat; background-position: 0px -166px; width: 162px; display: block; height: 83px; margin-top: 12px; margin-left: 537px; text-indent: -9999px; }
a.headbt01:hover, a.headbt02:hover, a.headbt03:hover { filter: alpha(opacity=70); -moz-opacity: 0.70; opacity: 0.70; }
.lvl-label {position: relative;left: 5px;z-index: 1;display: inline;font-size: 13px;color: #fff;padding: 4px 8px;}
.lvl-label.lvl-beginner {background: #00C6FF;}
.lvl-label.lvl-middle {background: #FFC100;}
.lvl-label.lvl-advance {background: #FF5EC0;}

div.block div.recipe-title {font-size: 1.5rem;font-size: 15px;line-height: 1.4;padding: 0 4px;position: relative;top: -25px;}

#vd-recipe div.block div.recipe-title a,
#vd-recipe div.block div.recipe-title a:link,
#vd-recipe div.block div.recipe-title a:visited {text-decoration: none;}
#vd-recipe div.block div.recipe-title a:hover {text-decoration: underline;}

.select-panel select {
	position: relative;
	width: 100%;
	padding: 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #999;
	background: #eee;
	background: -webkit-linear-gradient(top, #fff 0%,#efebe1 100%);
	background: linear-gradient(to bottom, #fff 0%,#efebe1 100%);
}

.select-panel label {
	position: relative;
    display: block;
    font-weight: normal;
}
 
.select-panel label:after {
	display: block;
	content: " ";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 20px;
	height: 20px;
	margin-top: -8px;
	background: url(../img/select_arrow.png) 0 0 no-repeat;
	background-size: 20px;
	pointer-events: none;
}

    /* pickup recipe 2017*/
    .cf{zoom:1;}
    .cf:before,.cf:after{content:"";display:table;}
    h2.simple-border{font-size: 24px;color:#000;background-color:#fff!important;border-bottom:4px solid #ddd;width:65%;font-weight:400;line-height:1.4;text-align:center;margin:20px auto 48px;padding:12px;}
    h2.simple-border span { font-size: 22px;display: block;margin-bottom: 4px;}
    .pickup-l-recipe{width:100%;margin-bottom:40px;}
    .pickup-l-recipe img{width:100%;}
    .pickup-l-recipe .title h3.l-recipe-name{font-size:30px;font-weight:400;color:#000;text-align:center;margin:12px 0 0;line-height: 1.4;}
    .pickup-l-recipe .title h3.l-recipe-name span {font-size:24px;display: block;}
    .pickup-l-recipe .title p.level{font-size:14px;text-align:right;margin-bottom:0;}
    .pickup-l-recipe .title p.level span{font-size:16px;color:#FDCD39;margin-right:6px;}
    .pickup-l-recipe .main-desc{width:600px;border-top:1px dashed #aaa;margin:12px auto;padding:18px 24px;}
    .pickup-l-recipe .main-desc p{font-size:14px;margin-bottom:0;line-height:1.8;}
    .linkbtn {border-radius:6px;display:inline-block;color:#fff;font-size: 16px;font-size: 1.6rem;padding:6px 54px;text-decoration:none;margin: 0 0 16px 0;background-color:#FF8000;}
    .linkbtn span { margin-right: 12px;}
    .linkbtn:link,
    .linkbtn:visited { color:#fff!important; text-decoration: none}
    .linkbtn:hover { background-color:#FEA3A1; text-decoration: none !important}
    .linkbtn_box_recipe.l_recipe_noitem{width:100%;margin-top:16px;text-align:center;display:inline-block;}

/* =Responsive Structure
----------------------------------------------- */
@media (max-width: 767px)  {
    div.pan_navi { margin-bottom: 8px; }
    div.pan_navi ul {list-style:none;background-color:#f5f5f5;border-radius:4px;margin-top:8px;margin-bottom:0;font-size:.8em;padding:8px 15px;}
    div.pan_navi li{display:inline-block;}
    div.pan_navi li.ar:before{color:#ccc;content:"▶︎\00a0";padding:0 5px;}
    .social-button-sphone { margin-bottom: 12px; }
    .social-button-sphone ul { padding: 0;margin: 0;float: right;}
    .social-button-sphone ul li { list-style: none; display: inline-block;margin-right: 3px; width: 36px; height: 36px;text-indent: -9999px;  background-image:url(/image/icon/sns.png);    -moz-background-size: cover;background-size: cover;background-repeat: no-repeat; }
    .social-button-sphone ul li.facebook { background-position: 0 0;}
    .social-button-sphone ul li.twitter { background-position: -38px 0px;}
    .social-button-sphone ul li.line { background-position: -75px 0px;}
    .social-button-sphone ul li.google { background-position: -113px 0px;}
    .social-button-sphone ul li a {display: block; height: 36px;}
    .linkbtn { padding: 8px 10px; }
    .footer-bottom-size .footer { background-position-y: 233px;}
    #vd-recipe { width:100%;float: none;padding: 0 0;}
    #vd-recipe p { font-size: 14px;font-size: 1.4rem;}
    /*#vd-recipe #recipe-header .header { margin-left: -15px; margin-right: -15px;}*/
    #vd-recipe #recipe-header p.top-lead { padding: 12px 0;}
    #vd-recipe #recipe-wrapper .block { width: 46%; margin: 0 0 -20px; padding: 5px; height: auto;}
    #vd-recipe #recipe-wrapper .block .image { width: 100%;/*height: 100%;*/top: -17px;}
    #vd-recipe #recipe-wrapper .block .image img { width: 100%; /*height: 100%;*/object-fit: cover}
    #vd-recipe div.block div.recipe-title { font-size: 1.3rem;font-size: 13px;margin-top: 12px;}
    .lvl-label { left: 0;font-size: 11px;padding: 2px 6px;}
    
    /* pickup recipe 2017*/
    h2.simple-border {font-size: 22px;width: 100%;margin-bottom: 24px;}
    h2.simple-border span {font-size: 20px;}
    .pickup-l-recipe{margin-bottom:26px;}
    /*.pickup-l-recipe .l-recipe-img{margin:0 -15px;}*/
    .pickup-l-recipe .title h3.l-recipe-name { font-size:24px;text-align:center;line-height:1.4;}
    .pickup-l-recipe .title h3.l-recipe-name span { font-size:18px;}
    .pickup-l-recipe .main-desc {width: 100%;padding: 12px 0;}
    .linkbtn{width:90%;padding:6px 18px;}
    
    h2.simple-border{font-size: 24px;padding:12px;width:90%;}
    .linkbtn_box_recipe.l_recipe_noitem{width:100%;margin-top:16px;text-align:center;display:inline-block;}
}