@charset "EUC-JP";

h3.bg {
    background: #F9F6EC;
    border-top: 1px solid #F0A500;
    border-bottom: 1px solid #F0A500;
    padding: 10px 10px;
}

/* =====================================================================
     Side Area
* =================================================================== */
/* ===== Member Setting ===== */

#memberSettingWrapper {
    border: 1px solid #CCC;
    padding: 20px;
    margin: 0 0 40px 0;
}

#memberSettingWrapper h3 {
    padding: 0 0 0 0;
    margin-bottom: 20px;
    border-bottom: none;
}

#memberSettingWrapper ul {
    margin-bottom: 20px;
}

#memberSettingWrapper ul li {
    margin-bottom: 10px;
}

#memberSettingWrapper ul a {
    width: 100%;
}

.oyatsuImg {
	margin-bottom: 20px;
	text-align: center;
}
.oyatsuImg img{ 
	width: 100%;
	border: 1px solid #e9e9e9;
}

/*Calender*/

#subContainerIn .calendarAreaSide {
	position: relative;
/*    background: #ffef86;*/
    padding: 15px;
    margin-bottom: 30px;
}

#subContainerIn .calendarAreaSide .iconImg{
	position: absolute;
	top: 0;
	right: 0;
	width: 100px;
	height: auto; }

#subContainerIn .calendarAreaSide h3 {
    border-bottom: none;
    padding: 0;
    font-size: 1.8rem;
    line-height: 2.5rem;
    margin-bottom: 0;
}

.calendarAreaSide h3 span.update {
    color: #FFF;
    background-color: #F2A600;
    padding: 8px;
    border-radius: 30px;
    font-size: 1.0rem;
    box-sizing: border-box;
    margin-left: 5px;
}

.calendarAreaSide .thumbImg{
	text-align: center;
	margin-top: -15px;}

.calendarAreaSide .thumbImg img{
	width: 100%; }

.calendarAreaSide .btn {
    width: 100%;
    margin-top: 20px;
}

/* ========== Snack25 ========== */
#subContainerIn .snack25Wrapper,
#subContainerIn .calendarWrapper {
	position: relative;
	margin-bottom: 30px;
}

.snack25Wrapper .bnr img,
.calendarWrapper .bnr img{
	width: 100%;
}

@media screen and (min-width: 0) and (max-width: 767px) {
	#subContainerIn .snack25Wrapper,
	#subContainerIn .calendarWrapper {
		margin-bottom: 10px;
	}
}

/* ========== Ranking ========== */
#subContainerIn .rankingWrapper {
	border: 1px solid #DDD;
	padding: 20px;
	margin-bottom: 30px;
}

#subContainerIn .rankingWrapper h3{
	padding: 0;
	margin-bottom: 10px;
	border-bottom: 0;
	text-align: center;
	line-height: 1.4;
}

#subContainerIn .rankingWrapper li{
	padding: 10px 0;
	border-bottom: 1px solid #DDD;
}

#subContainerIn .rankingWrapper li:first-child{
	border-top: 1px solid #DDD;
}

.rankingWrapper li a{
	display: table;
}

.rankingWrapper li a .itemThumb,
.rankingWrapper li a .itemName{
	display: table-cell;
	vertical-align: middle;
}


.rankingWrapper .itemThumb{
	position: relative;
	min-width: 64px;
}

.rankingWrapper a:hover .itemThumb{
	opacity: 0.8;
	text-align: center;
}

.rankingWrapper .itemThumb img{
	width: 100%;
}

.rankingWrapper .itemName{
	font-size: 1.2rem;
	padding: 0 10px;
}

.rankingWrapper .itemThumb .badge{
	position: absolute;
	padding: 5px 7px;
	background: #f0a500;
	top: 0;
	left: 0;
	font-size: 1.0rem;
}

.rankingWrapper .linkBtn{
	padding: 20px 0 0;
}
.rankingWrapper .linkBtn a{
	width: 100%;
}

/* ========== */
#pickupRss ul li{
	position: relative;
/*
	list-style-type: decimal;
	list-style-position: inside;
*/
}

#pickupRss ul li *{
	display: none;
}
#pickupRss ul li > a{
	display: block;
	padding-left: 30px;
	font-size: 1.2rem;
/*
	text-indent: -2em;
	padding-left: 2em;
*/
}

#pickupRss ul li:nth-child(n + 6) {
  display: none;
}

#pickupRss ul li:nth-child(1):before{ content:"1"; }
#pickupRss ul li:nth-child(2):before{ content:"2"; }
#pickupRss ul li:nth-child(3):before{ content:"3"; }
#pickupRss ul li:nth-child(4):before{ content:"4"; }
#pickupRss ul li:nth-child(5):before{ content:"5"; }

#pickupRss ul li:nth-child(-n + 5):before{
	padding: 5px 7px;
    background: #f0a500;
	position: absolute;
	top: 10px;
	left: 0;
	font-size: 1.0rem;
	font-weight: bold;
    color: #fff;
    line-height: 1;
    vertical-align: baseline;
    white-space: nowrap;
    text-align: center;
    border-radius: 10px;
}


/* =====================================================================
     Content
* =================================================================== */
/*title*/
.main-image {
    text-align: center;
    margin-bottom: 60px;
}

.inviteTxt {
    font-size: 1.6rem;
    line-height: 2.5rem;
    margin-bottom: 40px;
}

/* CP BNR */
#banner_area{
	position: relative; }

#banner_area .mark-member{
	position: absolute;
	top: 0;
	right: 0;
	}

#banner_area .mark-member img{
	width: 80px;
	height: 80px; }

#banner_area a img{
	width: 100%;
	height: auto; }

#campaign_button{
	padding-top: 10px; }

/*SNS Blog common*/

#socialListWrapper,
#blogListWrapper {
    background: none;
    padding: 0px;
    margin: 0px;
}


.blogList img,
.oyatsuCp img {
    width: 100%;
    height: auto;
}

.blogList a:hover img{
	opacity: 0.8; }

/*Blog*/

.oyatsuBlogTxt {
    text-align: left;
    margin-bottom: 30px;
}

.oyatsuBlogTxt p{
	color: #666;
	font-size: 1.2rem;
	line-height: 1.8; }


.oyatsuBlogTxt a.iconLink {
    font-size: 1.6rem;
    margin: 30px 0 15px 0;
    display: block;
}
/*SNS*/

.snsTxt {
    color: #333;
    padding-top: 10px;
    font-size: 1.2rem;
    line-height: 1.6;
    display: block;
}

.snsIcon{
	border-radius: 50%;
	border: 1px solid #DDD;
}
/* =====================================================================
      media :max-width: 1000x
 =================================================================== */

@media screen and (min-width: 767px) and (max-width: 1000px) {
    .calendarAreaSide .dlWp,
    .calendarAreaSide .dlPc {
        width: 100%;
        text-align: center;
    }
    .calendarAreaSide .dlWp img,
    .calendarAreaSide .dlPc img {
        margin-top: 10px;
    }
    .main-image img {
        width: 100%;
    }
}
/* =====================================================================
      media :max-width: 767px
* =================================================================== */

@media screen and (min-width: 0) and (max-width: 767px) {
    /*#mainTtl.default*/
    #memberSettingWrapper{margin-bottom: 0px;}
    #mainTtl.default {
        background: url(/images/bg_mainttl01.jpg) repeat-x 0 0;
    }
    #mainTtl.default h1 {
        font-size: 1.6rem;
    }
    #mainTtl.default .enTtl {
        font-size: 1.2rem;
    }
    .main-image img {
        width: 90%;
    }
    .inviteTxt {
        margin-bottom: 30px;
    }
    .cpBnr {
        margin-bottom: 10px;
    }
    .oyatsuBlogTxt a.iconLink {
        margin: 20px 0;
        display: block;
    }
}



/* =====================================================================
	Blog Content
* =================================================================== */

/* ========== ?????­ã?°å?±é?? ========== */

.entryBlock h3 span,
.entryDetailWrapper h2 span{
	display: block;
}

.entryBlock .photo{
	text-align: center;
}

/* ========== ????????¤é??????????? ========== */
.sp-grabbing{ overflow: hidden; }
#oyatsuBnr{min-height: 138px;}
#oyatsuBnr .sp-slide img{
	width: 306px;
	height: auto;
}
#oyatsuBnr .sp-slide a:hover img{
	opacity: 0.8;
}

.categoryLink{
	margin-bottom: 30px;
}

section.entryListWrapper{
	position: relative;
	margin-bottom: 60px;
}
.entryBlock{
	background: #f9f6ec;
	text-align: center;
	margin-bottom: 40px;
}

.entryBlock a:active label,
.entryBlock a:visited label,
.entryBlock a:hover label{
	display: none;
	color: #FFF;
}

.entryBlock h3{
	padding: 15px 0;
	border-bottom: none !important;
	margin-bottom: 0;
	line-height: 1.4;
	font-weight: 500;
}

/* ??????????????¼ã?¸ç?? */
.topBlogList .entryBlock h3{
	font-size: 1.4rem;
}

.entryBlock h3 span.brand{
	font-size: 1.2rem;
	margin-bottom: 5px;
}

.entryThumbImg{
	width: 306px;
	height: 306px;
	margin: 0 auto;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}
	
	/* ??????????????¼ã?¸ç?? */
	.topBlogList .entryThumbImg{
		width: 222px;
		height: 222px;
		overflow: hidden;
		margin: 0 auto;
	}

.entryThumbImg a{
	display: block;
	width: 100%;
	height: 100%;
}

.entryThumbImg img{
	max-width: 100%;
}

.entryThumbImg a:hover img{
	opacity: 0.8;
}

.entryInfo{
	position: relative;
	padding: 20px;
	text-align: left;
	}

.entryDate{
	position: absolute;
	top:20px;
	right: 20px;
	display: block;
	color: #999;
	font-size: 1.2rem;
}

.entryDate:before{
	content: "\f017";
	font-family: FontAwesome;
	margin-right: 5px;
	text-decoration: none;
}
.entryTag{
	color: #999;
	font-size: 1.2rem;
	margin-right: 10px;
	display: inline-block;
}
.entryTag:before{
	content: "\f02b";
	font-family: FontAwesome;
	text-decoration: none;
}
.entryTag a:link, .entryTag a:visited,
.entryTag a:active, .entryTag a:hover{
	color: #999;
}
 .entryTag a:hover{
	 text-decoration: underline;
}

.entryBlock .more{
	text-align: right;
}
.entryBlock .more img{
	width: 40px;
	height: auto;
}

.fb-page-parent > .fb-page {
	width: 308px !important;
}

.containerWrapper{
	padding-top: 30px;
}

.blogInfo{
	margin-bottom: 30px;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	.entryThumbImg{
		width: 220px;
		height: 220px;
	}
	/* ??????????????¼ã?¸ç?? */
	.topBlogList .entryThumbImg{
		width: 345px;
		height: 345px;
		overflow: hidden;
		margin: 0 auto;
	}
}


@media screen and (min-width: 0) and (max-width: 767px) {
	.categoryLink{
		padding: 0 5px 20px 5px;
	}
	section.entryListWrapper{
		margin-bottom: 20px;
	}
	.entryBlock{
		margin-bottom: 10px;
	}
	.entryBlock h3{
		font-size: 1.4rem;
	}
	.entryBlock h3 span.brand{
		font-size: 1.0rem;
	}
	.entryThumbImg,
	.topBlogList .entryThumbImg{
		width: 100%;
		max-height: 190px;
	}
	
	.entryInfo{
		padding: 10px;
	}
	.entryDate{
		position:static;
		padding-top: 10px;
	}
	.entryBlock h3{
		padding: 10px 0;
	}
	.fb-page-parent > .fb-page {
		width: 100% !important;
	}
	.col-xs-12:last-child > .pastEntry{
		border-bottom: none;
	}
}

/* ========== ??µã?¤ã??????????? è¨?äº?ä¸?è¦? ========== */
#subContainerIn #entryList{
	margin-bottom: 30px;
}
#subContainerIn #entryList .entryBlock{
	background: none;
}

#entryList .entryThumbImg{
	width: 100px;
	height: 100px;
}

#entryList .entryInfo{
	padding: 0;
	text-align: left;
}

#entryList .entryInfo h3{
	margin: 0;
	font-size: 1.4rem !important;
	padding: 10px 0;
}

#entryList .entryDate{
		position:static;
		padding-top: 10px;
	}
h2 span.SearchWord{
	color: #f0a500;
}

/* ========== ��詳細 ========== */
.categoryTtl{
	width: 100%;
	background: #f0a500 url(/oyatsu_review/images/bg_category_ttl.jpg) no-repeat 0 0;
	background-size: cover;
	min-height: 110px;
	line-height: 110px;
	font-size: 3.6rem;
	color: #fff;
	text-align: center;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
	margin-bottom: 30px;
}

.entryDetailWrapper{
	position: relative;
}

.entryDetailWrapper .entryBlock{
	border-bottom: none;
	background: none;
	text-align: left;
}

.entryDetailWrapper h2{
	padding: 20px 0;
	line-height: 1.4;
}

.entryDetailWrapper h2 span.brand,
.entryDetailWrapper h2 span.authorName{
	font-size: 1.6rem;
	margin-bottom: 5px;
}

.entryDetailWrapper h2 img{
	width: 40px;
	height: auto;
}

.entryDetailWrapper .entryDate{
	position: absolute;
	top: 0;
	right: 0;	}

.entryDetailWrapper .entryBlock img{
	max-width: 100%;
	height: auto;
}

.entryBlock .greeting{ margin-bottom: 30px; }
.entryBlock .greeting img{ float: left; margin-top: -10px;}

.informationArea{
	text-align: center;
	margin-bottom: 60px;
}
.informationArea .btn{
	margin: 0 auto;
}

@media screen and (min-width: 0) and (max-width: 767px) {
	.categoryTtl{
		width: 100%;
		height: auto;
		min-width: 100%;
		min-height: 60px;
		line-height: 60px;
		margin-bottom: 20px;
		font-size: 1.6rem;
	}
	.categoryTtl .enTtl{
		font-size: 1.2rem;
	}
	.entryDetailWrapper .entryBlock{
		padding: 0 5px;
	}
	.entryDetailWrapper .entryBlock img{
		max-width: 80%;
		height: auto;
	}
	.entryDetailWrapper .entryDate{
		padding-top: 0;
		right: 5px;
	}
	.informationArea{
		margin-bottom: 20px;
	}
}

/* ========== ?????·ã??ä¸?è¦? ========== */
.recipeList li p{
	padding: 10px;	
	 }

.recipeList li a:hover img{ 
	opacity: 0.8; }

.recipeList .thumbnail{ 
	margin-bottom: 10px;
	background-color: #f9f6ec;
	border-color: #e6e0cb;
	 }
	 
	 
/* ========== ??­ã???????³ã????·ã?? ========== */
table.recipeTable{ 
	width: 100%;}

table.recipeTable th,
table.recipeTable td{ 
	padding: 10px;
	border-bottom: 1px solid #DDD;}
	
table.recipeTable td{ 
	text-align: right; }

table.recipeTable tr:nth-child(even){
	background: #F9F6EC;
}
	
table.recipeTable h4 {
  margin-bottom: 10px !important;
  padding: 0 !important;
  border-bottom: none !important;
  color: #333;
}

/* ä½??????? */
.process{
	padding-top: 60px;
}
.process ul li {
    width: 100%;
    padding: 0 10px;
    margin-bottom: 10px;
}

.process .step {
    padding: 0 0 10px;
    color: #fc0;
    font-weight: bold;
    font-size: 2.6rem;
    line-height: 1;
    border-bottom: 1px solid #fc0;
    margin-bottom: 10px;
}

.process .text{
	position: relative;
	padding: 0;
}

.process .text.wPhoto{
	min-height: 100px;
	padding: 0 130px 0 0;
}

.process .text p{
	font-size: 1.6rem;
}

.process .text img{
	position: absolute;
	top:0;
	right: 0;
	width: 120px;
	height: auto;
}

@media screen and (min-width: 0) and (max-width: 767px) {
	#detailBlock .authorName{ font-size: 1.2rem; }
		.process{
			padding-top: 20px;
		}
}

/* ========== ??¡ã?³ã????¼ä??è¦? ========== */
#memberList{ width: 100%;}
#memberList li{
	display: block;
	float: left;
	width: 20%;
	padding: 0 30px 0 0;
	font-size: 1.2rem;
	line-height: 1.4;
	}
	#memberList.kitchenMember li{
		width: 16%;
	}
#memberList div{
	display: inline-block;
	width: 47px;
	height: 47px; 
	margin-bottom: 5px;
	background: #ff9292;
	vertical-align:middle;
	}
#memberList img{
	display: block;
	width: 47px;
	height: 47px;
	background: #ff9292;
	}
#memberList span{ 
	display: inline-block;
	font-weight: bold;
}
#memberList p{ 
	color: #666; }

@media screen and (min-width: 0) and (max-width: 767px) {
	#memberList li,
	#memberList.kitchenMember li{
		width: 33%;
		padding: 5px;
		height: 170px;
	}
	#memberList li p{ 
		margin-bottom: 0; }
}

/* ========== ?????¼ã????³ã?¢ã?³ã?±ã?¼ã?? ========== */

.questionBlock{
	background: #F9F6EC;
	margin-top: 60px;
}

.questionBlock .inner{
	padding: 20px;
}

.questionBlock .inner p {
	margin-bottom: 20px;
}

.questionBlock h3{
	border-bottom: 2px solid #F0A500 !important;
	padding: 20px 15px;
	margin-bottom: 0;
}

.questionBlock h4.questionTxt{
	border: none !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    color: #333 !important;
    font-size: 1.6rem !important;
}

.questionBlock label{
	display: block;
	cursor: pointer;
	margin-bottom: 10px;
}

.questionBlock .submitBtn{
	text-align: center;
}

.questionBlock button{
	margin: 10px auto 0 auto;
}

.questionBlock rect{
	fill: none;
}


.chart {
  width: 100%; 
  height: 400px;
}

@media screen and (min-width: 0) and (max-width: 767px) {
	width: 100%; 
	height: 200px;
}