@charset "utf-8";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
html {
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
body {
	box-sizing : border-box;
    font-feature-settings: "palt" 1;
    font-size: 10px;
    font-size: 0.85rem;
    line-height: 1;
    font-weight: 300;
    text-rendering: optimizeSpeed;
    color: #444;
    background-color: #ffffff;
}
h1, h2, h3, h4, h5, h6 {
    clear: both;
}
a {
    -webkit-tap-highlight-color: rgb(0, 0, 0, 0);
    color: #333;
}
ol, ul {
    list-style: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display: block;
}
img {
    max-width: 100%;
    height: auto;
    border: 0;
    -ms-interpolation-mode: bicubic;
}
*{
	-webkit-appearance: none;
	-moz-appearance: none;
}
embed, iframe, object, video {
    max-width: 100%;
}
/* Reset non-text input types */
input[type="checkbox"], input[type="radio"], input[type="file"], input[type="hidden"], input[type="image"], input[type="color"] {
    border: 0;
    border-radius: 0;
    padding: 0;
}
button, input[type="submit"], input[type="button"], input[type="reset"] {
    cursor: pointer;
}
button, input, textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	color: #333;
	background-color: #ccc;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-family: inherit;
    padding: 6px;
    padding: 0.428571429rem;
}
button, input {
    line-height: normal;
}
/* Clearing floats */
.clear:after, .wrapper:after, .format-status .entry-header:after {
    clear: both;
}

.clear:before, .clear:after, .wrapper:before, .wrapper:after, .format-status .entry-header:before, .format-status .entry-header:after {
    display: table;
    content: "";
}
.clear {
    clear: both;
}
/*--------------------------------------------
 head >>
---------------------------------------------*/
#masthead {
    height: 50px; /*バナーあり95px*/
}
hgroup {
    position: absolute;
    top: 0px; /*バナーあり50px*/
    left: 0;
    width: 100%;
    height: 50px;
}
#top_banner {
	text-align: center;
}
/*#top_banner a {
    display: block;
    width: 100%;
    height: 50px;
	text-align: center;
}
#top_banner a img {
	height: 100%;
	object-fit: cover;
}*/
/*--------------------------------------------
 header - navi >>
---------------------------------------------*/
#head_wrap {
	display: block;
	text-align: center;
	height: 45px;
	width: 100%;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0 1px 3px -1px #d9d5d2;
}
.head_wrap_fixed {
	position: fixed;
    top: 0;
    z-index: 1000;
}
#sp_logo {
    display: inline-block;
	padding: 7px 10px 7px 0px;
}
#sp_logo a img {
	width: auto;
    height: 30px;
}
#head_wrap > a {
	z-index: 1;
	position: absolute;
	width: 30px;
	top: 10px;
	text-align: center;
	color: #786c61;
}
#mob_nav_menu {
	left: 10px;
}
#mob_nav_search {
	right: 10px;
}
#mob_nav_menu .icon-menu {
	font-size: 16px;
	margin-bottom: 1px;
}
.head-menu-text {
	display: block;
	margin: 5px auto;
	font-size: 9px;
	transform: scale(0.8);
}
#sp_search_visible_wrap { 
	width: 100%;
	height: 90px;
	background-color: #fff;
	padding-top: 0.1rem;
}
#sp_search_visible {
	margin: 0.5rem;
}
#sp_search_visible form {
	position: relative;
	margin-bottom: 0.7rem;	
}
#sp_search_visible form div{
	width: 100%;
}
#sp_search_visible form * input.keyword:focus {
	background-color: #f9f8f8;
}
#sp_search_visible form * input.keyword{
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 100%;
	margin: 0;
	font-size: 0.9rem;
	height: 35px;
	line-height: 35px;
	border: none;
	background-color: #f1ede9;
	border: solid 1px #786c61;
}
input::placeholder {
  color: #d0c7bc;
}
#h_s_btn {
	position: absolute;
	width: 40px;
	right: 0px;
	top: 0px;
	font-family: icomoon;
	font-size: 0.9rem;
	padding: 0.5rem 0.4rem;
	height: 35px;
	color: #fff;
	box-shadow:none;
	border: none;
	background-color: #786c61;
	border-radius: 0px 3px 3px 0px;
	-webkit-border-radius: 0px 3px 3px 0px;
	-moz-border-radius: 0px 3px 3px 0px;
}
#sp_search_kw_list {
	position: relative;
}
#sm_kw {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin: auto;
	overflow-x: scroll;
	white-space: nowrap;
	overflow-y: hidden;
}
#sm_kw ul{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	font-size: 10px;
	color: #281d1a;
}
#sm_kw ul li {
	float: left;
	margin-right: 0.5rem;
	background-color: #f1ede9;
	padding: 0.5rem;
	border-radius: 20px;
}
#sm_kw ul li a {
	text-decoration: none;
	color: #424242;
}
#sm_kw::-webkit-scrollbar {  /* Chrome, Safari 対応 */
	display:none;
}
#sp_search_kw_arr {
	position: absolute;
	top: 4px;
	right: 0;
	color: rgba(0,0,0,0.3);
}
.mob_menu_fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.col_2,
.col_3,
.col_4 {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;	-webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	-webkit-box-lines : multiple; /* for so old webkit browser */
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin: 0.5rem;
}
#other_menu {
	display: none;
	overflow-y:scroll;
	background-color: rgba(0, 0, 0, 0.5);
	color: #f1ede9;
	font-size: 110%;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
}
#other_menu > ul {
	background-color: #fff;
	padding: 0.5rem;
}
#other_menu > ul li {
	height: 45px;
}
#other_menu > ul li a:before {
  display: inline-block;
  float: right;
  margin: 17px;
  content: "";
  width: 7px;
  height: 7px;
  vertical-align: middle;
  border-top: 1px solid #281d1a;
  border-right: 1px solid #281d1a;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}
#other_menu>  ul li a{
	color: #281d1a;
    text-decoration: none;
    display: block;
    height: 100%;
    font-size: 90%;
	text-align: center;
}
#other_menu > ul li a span{
	vertical-align: middle;
    line-height: 3;
    margin-left: 10px;
}
#other_menu > ul li a span.other_menu-icon {
	font-size: 16px;
	line-height:1 ;
}

.nav_title{
	padding: 0.6rem 1rem;
    background-color: #d0c7bc;
    color: #281d1a;
    font-size: 95%;
    font-weight: normal;
}
.nav_head_title {
	padding: 0.6rem 1rem;
    color: #281d1a;
    font-weight: normal;
	background-color: #f1ede9;
	font-size: 15px;
	height: 30px;
	line-height: 2;
}
.nav_head_title span {
	margin-left: 5px;
	font-size: 95%
}
.col_2 li{
	width: 49%;
	background-color: #fff;
    font-size: 95%;
    text-align: center;
    padding: 0.5%;
}
.col_3 li{
	width: 32.5%;
	background-color: #fff;
    font-size: 12px;
	padding: 0.4%;
}
.col_4 li{
	width: 24%;
	background-color: #fff;
    font-size: 12px;
	padding: 0.5%;
}
.col_2 li a ,
.col_3 li a ,
.col_4 li a {
	display: block;
	height: 25px;
	padding: 8px 10px;
	color: #333;
	text-decoration: none;
	border: 1px solid #f1ede9;
	border-radius: 2px;
}
ul.col_2 li a {
	padding-left: 10px;
}

.col_2 li a span,
.col_3 li a span,
.col_4 li a span{
	vertical-align: middle;
	vertical-align: -moz-middle-with-baseline;
	vertical-align: -webkit-baseline-middle;
}
.col_3 li a span {
	letter-spacing: -0.05rem;
}
.cat-icon{
	font-size: 18px;
    color: #525252;
    margin-right: 0.5rem;
}
.tag-icon{
	font-size: 115%;
    color: #525252;
    margin-right: 0.25rem;
}
#wrap_recipe_h_menu {
	display: none;
	overflow-y:scroll;
	-webkit-overflow-scrolling: touch;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#wrap_recipe_h_menu h3 #menu_h_close_recipe ,
#menu_h_close_search ,
#menu_h_close_report ,
#menu_h_close_other {
	float: right;
	border: solid 1px #281d1a;
	border-radius: 3px;
	padding: 1px 5px 0px 5px;
	font-size: 80%;
	height: 27px;
}

#recipe_h_menu {
	/*display:none;*/
	width: 100%;
	background-color: #FFF;
}
.menu_close {
	background-color: #f1ede9;
    font-size: 15px;
    height: 30px;
    text-align: center;
    line-height: 2;
}
#wrap_recipe_h_menu li {
	list-style: none;
}
#side_wrap_search_menu {
	display: none;
}
#side_search_menu {
	margin-bottom: 4rem;
}
.side_search_menu_ttl {
	text-align: center;
	margin: 2rem 0 1rem 0;
}
#header_menu,
#footer_menu,
.sidebar__item--fixed,
#side_top_banner {
	display:none;
}
/*--------------------------------------------
 header - navi <<
---------------------------------------------*/
/*--------------------------------------------
 head <<
---------------------------------------------*/
/*--------------------------------------------
 top-info >>
---------------------------------------------*/
/*#top-info_wrap {
	position:fixed;
	margin: 0.5rem 0.5rem 0rem 0.5rem;
	padding: 0.3rem 0.8rem;
	color: #3c260d;
	font-size: 0.75rem;
	line-height: 1rem;
	border: 1px solid #f1ede9;
	border-radius: 2px;
	background-color: #f1ede9;
	z-index: 0;
}*/
#top-info_wrap {
    display: none;
    position: fixed;
    z-index: 100;
    bottom: calc(env(safe-area-inset-bottom) + 45px);
    width: calc(100% - 1.6rem - 2px - 1rem - 35px - 0.3rem);
    margin: 0.5rem 0.5rem 0rem 0.5rem;
    padding: 0.3rem 0.8rem;
    color: #3c260d;
    font-size: 0.75rem;
    line-height: 1rem;
    border: 1px solid rgba(60, 38, 13, 0.35);
    border-radius: 2px;
    background-color: #f1ede9;    
}
@media screen and (min-width: 575px) {
    #top-info_wrap {
    	display: none;
        position: fixed;
        z-index: 100;
        width: auto;
		max-width: calc(960px - 4rem);
		left: 10px;
        bottom: 30px;
        padding: 1rem 2rem;
        color: #3c260d;
        line-height: 200%;
        border: 1px solid rgba(60, 38, 13, 0.35);
        border-radius: 5px;
        background-color: #f1ede9;
    }
}
/*
#top-info_wrap:before {
	position:absolute;
	font-family: icomoon;
	content: "\e92a";
	right: 0.4rem;
	color: #fff;
	font-size: 1rem;
	top: 0.4rem;
	z-index: -1;
}*/
#top-info_wrap::before {
    position: absolute;
    font-family: icomoon;
    content: "\e92a";
    left: 0.5rem;
    color: #fff;
    font-size: 1rem;
    top: 0.2rem;
    z-index: -1;
}
.top-info {
	display: flex;
	margin: 0.4rem 0;
}
.top-info_date {
	margin-right: 0.5rem;
}
.top-info a {
	color: #3c260d;
	text-decoration: none;
	border-bottom: 0.8px dashed #3c260d;
}
#top-info_close {
    position: absolute;
    top: -25px;
    right: -29px;
    font-size: 28px;
    color: rgba(60, 38, 13, 0.59);
}
/*--------------------------------------------
 top-info >>
---------------------------------------------*/
@media print, screen and (min-width: 960px) {
	#masthead,#head_wrap {
		height: 100px;
		box-shadow: none;
	}
	hgroup {
		top: 0px;
		height: auto;
	}
	#top_banner a,
	#mob_nav_search,
	#mob_nav_menu {
		display: none;
	}
	.head_wrap_fixed {
		position: initial;
	}
	#sp_logo {
		padding: 30px 10px 29px 0px;
	}
	#sp_logo a img {
		width: auto;
		height: 40px;
	}
	#page {
		width: 960px;
		margin: 0 auto;
		display: flex;
	}
	#primary {
		display: block;
		width: 620px;
	}
	#sidebar {
		width: 320px;
		margin-left: 20px;
	}
	.sidebar__item {
		margin-bottom: 20px;
	}
	.sidebar__item--fixed {
		display: block;
		position: sticky;
		margin-bottom: 0;
		top: 10px;
		z-index: 1;
	}
	#side_top_banner {
		display: block;
		margin-bottom: 1.5rem;
	}
	#side_top_banner a {
		display: block;
		width: 320px;
		border-radius: 3px;
	}
	#side_top_banner a img {
		height: 50px;
		object-fit: cover;
		border-radius: 3px;
	}	
	#side_wrap_search_menu {
		display: block;
	}
	#sp_search_visible_wrap {
		height: auto;
	}
	#sm_kw ul{
		flex-wrap: wrap;
	}
	#sm_kw ul li {
		margin-bottom: 0.5rem;
		border: solid 1px #f1ede9;
	}
	#sm_kw ul li:hover {
		background-color: #fff;
		border: solid 1px #786c61;
	}
	#sp_search_kw_arr {
		display: none;
	}
	#side_search_menu #recipe_h_menu * a:hover {
		background-color: #f1ede9;
	}
	#footer_menu,
	#header_menu {
		display: flex;
	}
	#header_menu {
		position: absolute;
		right: 5%;
		top: 38px;
		font-size: 90%;
	}
	.simple_menu {
		justify-content: center;
		font-weight: 500;
	}
	.simple_menu li {
		margin: 0.5rem 0;
		padding: 0 1rem;
		border-right: 1px solid #c2c2c2;
	}
	.simple_menu li a {
		text-decoration: none;
		color: #3c260d;
	}
	.simple_menu li#footer_menu_right {
		border-right: none;
	}
	#bottom_menu {
		display: none;
	}
	#headLine_book:after {
		left: 49%;
	}
	#page_related {
		margin: 0 1rem 5rem;
	}
	#top-info_wrap {
		margin-top: 0;
	}
}

/*--------------------------------------------
 content- entrylist >>
---------------------------------------------*/
.new_entry {
	position: relative;
	float: left;
	width: 50%;
}
.new_entry:before {
	position: absolute;
	display: block;
	width: 2rem;
	height: 2rem;
	color: #FFF;
	text-align: center;
	line-height: 2rem;
	background-color: rgba(120, 108, 97, 0.98);
	content: 'NEW';
	border-radius: 2rem;
	z-index: 99;
	font-size: 65%;
	transform: rotate(-20deg);
}
div.pr_flg {
	position: absolute;
	top: 0.5rem;
	left: 0;
	background-color: #fff;
	padding: 0.3rem 0.5rem;
	filter: alpha(opacity=85);
	-moz-opacity: 0.85;
	opacity: 0.85;
	font-size: 90%;
	color: #444;
}
div.v_flg {
	position: absolute;
	top: 0.2rem;
	right: 0.2rem;
	background-color: #fff;
	padding: 0.2rem 0.4rem;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
	font-size: 135%;
	color: #A0A0A0;
	border-radius: 0px 3px 0px 3px;
	-webkit-border-radius: 0px 3px 0px 3px;
	-moz-border-radius: 0px 3px 0px 3px;
}
.articleList {
	padding: 0.5rem;
	max-width: 640px;
	margin: 0 auto;
}
.articleList article,
ul.wpp-list li, ol.wpp-list li {
	position: relative;
	float: left;
	width: 50%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0.2rem;
	min-height: 200px;
	border-bottom: none;
}
.articleList .new_entry article {
	width: 100%;
}
.articleList article * img.size-sp_list_tmn,
ul.wpp-list li * img.size-sp_list_tmn, 
ol.wpp-list li * img.size-sp_list_tmn{
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
.articleList_title {
	margin-top: 0.3rem;
	margin-bottom: 0.1rem;
	line-height: 1.3;
	min-height: 2.5rem;
}
.articleList_title h2 {
	/*font-weight: bold;*/
}
.articleList_title_recipe h2 {
	max-height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.articleList * div.cat_now {
    font-size: 85%;
	padding: 0;
	margin: 0.2rem 0.3rem 0rem 0rem;
	color: #3c260d;
}
.articleList * div.content_tag, 
#push_recipe a div.content_tag {
 	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
.articleList * div.content_tag > span,
#push_recipe a div.content_tag > span {
	font-size: 85%;
    color: #3c260d;
    margin-right: 0.4rem;
}
.articleList * div.content_tag span span.tag_num,
#push_recipe a div.content_tag span span.tag_num,
.wrapSLinkTxt .content_tag .tag_num {
	font-size: 125%;
    margin: 0.1rem;
    font-weight: 500;
    color: #3c260d;
}
.articleList * div.content_tag span [class^="icon-"],
#push_recipe a div.content_tag span [class^="icon-"] {
	margin-right: 0.2rem;
}
.articleList * div.content_tag span .icon-clock,
#push_recipe a div.content_tag {
	margin-right: 0.1rem;
}
.articleList * div.cooking_method {
	font-size: 90%;
	margin-top: 0.2rem;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
.articleList * div.cooking_method span,
#push_recipe a div.cooking_method span {
	margin-right: 5px;
    vertical-align: text-bottom;
}
.articleList * div.content_tag span.list-tag-cat-icon,
#push_recipe a div.content_tag span.list-tag-cat-icon {
	font-size: 13px;
    margin-right: 2px;
}
.content_tag_float {
	float: left;
}
.content_list_link {
    text-decoration:none;
}
.content_list_link img {
	border-radius: 3px;
}
.articleList article a.wpfp-del-link {
	position: absolute;
	text-indent: initial;
	white-space: initial;
	text-decoration: none;
	background-color: #786c61;
	padding: 0.5rem;
	border-radius: 0.2rem 0rem 0.2rem 0rem;
	color: #fff;
}
li#ranking-more div.content_list a {
	position: absolute;
	width: 90%;
	height: 65%;
	margin: 5%;
	padding-top: 25%;
	text-indent: initial;
	text-align: center;
	text-decoration: none;
	line-height: 1.5;
	border-radius: 4px;
	background-color: #f8f8fa;
	color: #786c61;
}
li#ranking-more div.content_list a #pp_more {
	display: inline-block;
	font-size: 70%;
	margin: 0.5rem;
	padding: 0.6rem;
	border: solid #786c61 1px;
	background-color: #fff;
	border-radius: 20px;
}
@media screen and (min-width: 321px) {
	.articleList article,
	ul.wpp-list li,
	ol.wpp-list li {
		min-height: 217px;
	}
}
@media screen and (min-width: 376px) {
	.articleList article,
	ul.wpp-list li,
	ol.wpp-list li {
		min-height: 219px;
	}
}
@media screen and (min-width: 389px) {
	.articleList article,
	ul.wpp-list li,
	ol.wpp-list li {
		min-height: 231px;
	}
}
@media screen and (min-width: 575px) {
	.articleList article,
	ul.wpp-list li,
	ol.wpp-list li {
		min-height: 297px;
	}
}
@media screen and (min-width: 960px) {
	.articleList article,
	.type-wpp-page ol.wpp-list li{
		min-height: 290.44px;
	}
	ul.wpp-list li ,
	ol.wpp-list li {
		min-height: 200px;
	}
	.articleList_title {
		line-height: 1.7;
    	min-height: auto;
	}
}
/*--------------------------------------------
 content- entrylist <<
---------------------------------------------*/
/*--------------------------------------------
 breadcrumbs >>
---------------------------------------------*/
.breadcrumbs {
	overflow-x: scroll;
	white-space: nowrap;
	overflow-y: hidden;
    margin-top: 7px;
    margin-top: 0.7rem;
    margin-left: 0.3rem;
    margin-right: 0.3rem;
    font-size: 80%;
    line-height: 150%;
}
.breadcrumbs::-webkit-scrollbar {
    display:none;
}
.breadcrumbs span a {
    color: #585858;
    text-decoration: none;
}
/*--------------------------------------------
 breadcrumbs <<
---------------------------------------------*/
/*--------------------------------------------
 Sort etc >>
---------------------------------------------*/
.ct_sort {
	  padding: 0.9rem 0rem 1.0rem 0.8rem;
	  border-bottom: 1px solid #A0A0A0;
}
.ct_sort form{display: inline!important;}
.ct_sort input[type="submit"]{
  color: #8B8B8B;
  padding: 0;
  margin: 0;
  box-shadow: none!important;
  background: none!important;
  text-shadow: none;
  border: none!important;
  font-size: 95%;
  text-decoration: underline;
  cursor: pointer;
}
.ct_sort input[type="submit"]:hover {
    color: #5C5C5C !important;
}
.sort_current{
  font-weight: bold!important;
  text-decoration: none!important;
}

.tag_description {
	font-size: 85%;
	line-height: 1.6;
	margin: 0.3rem 0.5rem;
	padding: 0.8rem;
	background-color: #f8f8fa;
	border-radius: 2px;
}

#pp_text {
  font-size: 90%;
  margin-top: 0.5rem;
}
#ga_info_txt {
	font-size: 90%;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-left: 0.3rem;
	border-bottom: 1px solid #E0E0E0;
}
#ga_info_txt span{
	margin-left:0.3rem;
}

#browsing-history {
	margin-top: 0.5rem;
	border-top: 1px solid #A0A0A0;
}
/*--------------------------------------------
 Sort etc <<
---------------------------------------------*/
/*--------------------------------------------
 side - pcup-contents >>
---------------------------------------------*/
.pcup-contents_txt {
	margin-top: 1.5rem;
}
#pcup-contents {
	text-align: center;
	margin: 0.3rem 0.8rem 1.5rem 0.8rem;
}
#pcup-contents a {
	display: inline-block;
	margin-bottom: 1rem;
}
@media screen and (min-width: 960px) {
#pcup-contents {
	margin: 0.3rem 0rem 1.5rem 0rem;
}
}
/*--------------------------------------------
 side - pcup-contents <<
---------------------------------------------*/
/*--------------------------------------------
 pagination >>
---------------------------------------------*/
div.pagination {
	display: flex;
	justify-content: center;
	clear: both;
	padding: 2rem 0.5rem 2rem 0.5rem;
	text-align: center;
	font-size: 16px;
}
div.pagination span, .pagination a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	margin: 0 3px;
	font-weight: 600;
    text-decoration: none;
    color: #666;
    background: #fff;
    border: solid 0.1rem #B1B1B1;
    border-radius: 2px;
}
div.pagination a:hover {
    color: #fff;
    background: #d0c7bc;
    border: 1px;
    border: solid 0.1rem #d0c7bc;
}
div.pagination .current {
    background: #786c61;
    color: #fff;
    border: solid 0.1rem #786c61;
}

/*--------------------------------------------
 pagination <<
---------------------------------------------*/
/*--------------------------------------------
 pagination <<
---------------------------------------------*/
.headLine {
	position: relative;
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	color: #281d1a;
	margin: 4rem 0rem 3.2rem 0rem;
}
#headLine_search {
	margin-top: 1.2rem;
}
#headLine_pp {
	margin-top: 1.2rem;
}
#headLine_feature {
	margin-top: 2rem;
}
.headLine:after {
	content: '';
	position: absolute;
	bottom: -0.8rem;
	height: 1.7px;
	left: calc(50% - 9px);
	color: rgba(177, 167, 154, 0.59);
}
#headLine_search:after {
	font-family: icomoon;
	content: "\e951";
}
#headLine_pp:after {
	font-family: icomoon;
	content: "\e99e";
	color: #b4a329;
}
#headLine_feature:after {
	font-family: icomoon;
	content: "\e934";
}
#headLine_new:after {
	font-family: icomoon;
	content: "\e91c";
}
#headLine_matome:after {
	font-family: icomoon;
	content: "\e90c";
}
#headLine_book:after {
	font-family: icomoon;
	content: "\e90b";
}
#headLine_fb:after {
	font-family: icomoon;
	content: "\e90e";
}
#headLine_related:after {
	font-family: icomoon;
	content: "\e981";
}
#headLine_fb {
	margin: 1rem 0rem 2rem 0rem;
}
/*--------------------------------------------
 pagination <<
---------------------------------------------*/
.contents-btm-bnr {
    text-align: center;
    margin: 0.3rem 0.8rem 1.5rem 0.8rem;
}
/*--------------------------------------------
 content - amazon rakuten >>
---------------------------------------------*/
.ama_btn {
    position: relative;
    color: #fff;
    text-decoration: none;
    display: block;
    text-align: center;
    margin: 0.15rem;
    font-size: 90%;
    padding: 5px 0px;
	background-color: #79644b;
	font-weight: 500;
	border-radius: 2px;
}

.ama_btn:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 0.55rem;
    width: 6px;
    height: 6px;
    margin: -4px 0 0 0;
    border-top: solid 0.14rem #fff;
    border-right: solid 0.14rem #fff;
    -webkit-transform-style: rotate(45deg);
    transform: rotate(45deg);
}

.raku_btn {
    position: relative;
    color: #fff;
    text-decoration: none;
    display: block;
    text-align: center;
    margin: 0.15rem;
    font-size: 90%;
    padding: 5px 0px;
	background-color: #79644b;
	font-weight: 500;
	border-radius: 2px;
}

.raku_btn:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 0.55rem;
    width: 6px;
    height: 6px;
    margin: -4px 0 0 0;
    border-top: solid 0.14rem #fff;
    border-right: solid 0.14rem #fff;
    -webkit-transform-style: rotate(45deg);
    transform: rotate(45deg);
}
/*--------------------------------------------
 content - amazon rakuten <<
---------------------------------------------*/

/*--------------------------------------------
 foot >>
---------------------------------------------*/
/*--------------------------------------------
 side - sp_practice_banner >>
---------------------------------------------*/
#side_matome,
#side_new {
	margin: 0 1rem;
}
@media screen and (min-width: 960px) {
	#side_matome,
	#side_new {
		margin: 0;
	}
}
#side_matome .simpleLink a,
#side_new .simpleLink a {
	margin: 1rem 0rem;
}
/*--------------------------------------------
 side - sp_practice_banner <<
---------------------------------------------*/
/*--------------------------------------------
 side - book >>
---------------------------------------------*/
#side_book div.wrap_title_slash {
    text-align: center;
    margin: 0.5rem;
    font-size: 110%;
}
#1c_book {
	margin-bottom: 1rem;
}
#side_book div #top_book_content {
    width: 51%;
    text-align: center;
    margin: 0 auto;
}
#otherbooks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
div[id^="book"] {
	width: 45%;
	text-align: center;
	max-width: 135px;
	margin: 1rem 0;
}
#top_book_content a,
div[id^="book"] a {
    text-decoration: none;
    margin: 0.2rem auto;
}
#side_book div #top_book_content p.book-text a {
	width: 110px;
}
#side_book div #top_book_content a img {
    height: 165px;
}

#top_book_content a img,
div[id^="book"] a img {
    margin: 5px 0px;
    width: auto;
    height: 140px;
}
#top_book_content a img {
    margin: 5px;
}
.book-text {
    line-height: 130% !important;
    font-size: 80% !important;
    margin: 2px 7px;
}

.newr_desc {
    font-size: 90% !important;
}

.new_book {
    position: relative;
    display: inline-block;
    background-color: rgba(120, 108, 97, 0.98);
	background-image: repeating-linear-gradient(-45deg,
	#fff, #fff 1px,
	transparent 0, transparent 3px);
	border-radius: 3px;
}

.new_book:before {
	position: absolute;
	display: block;
	top: -0.8rem;
	left: -0.9rem;
	width: 2rem;
	height: 2rem;
	color: #FFF;
	text-align: center;
	line-height: 2rem;
	background-color: rgba(120, 108, 97, 0.98);
	content: 'NEW';
	border-radius: 2rem;
	z-index: 99;
	font-size: 65%;
	transform: rotate(-20deg);
}

/*--------------------------------------------
 side - book <<
---------------------------------------------*/
/*--------------------------------------------
 bottom_menu >>
---------------------------------------------*/
#bottom_menu {
    z-index: 99;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 40px;
    background-color: #fff;
    border-top: 1px solid #f1ede9;
	padding-bottom: env(safe-area-inset-bottom);
}
#bottom_menu ul {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}
#bottom_menu ul li {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
#bottom_menu * a {
    text-decoration: none;
    color: #786c61;
}
#bottom_menu * .bottom_menu_icon {
	display: block;
	font-size: 15px;
	line-height: 15px;
	margin-top: 3px;
}
#bottom_menu * .bottom_menu_text {
    font-size: 8px;
    line-height: 8px;
    letter-spacing: -1.2px;
    color: #281d1a;
}
/*--------------------------------------------
 bottom_menu <<
---------------------------------------------*/
/* Footer */
#colophon {
	box-sizing: border-box;
	width: 100%;
	margin-top: 2rem;
	padding: 1rem 1.2rem;
	background: #f4f4f4;
	color: #91877e;
	font-size: 12px;
	line-height: 1.8;
}
.site-info {
	padding: 1rem 0 4.2rem 0;
	text-align: center;
}
#fo_attention {
    font-size: 85%;
}
/*--------------------------------------------
 side - popular post >>
---------------------------------------------*/
ul.wpp-list , ol.wpp-list {
    counter-reset: wpp-ranking;
}
ol.wpp-list-2 {
    counter-reset: wpp-ranking 30;
}
ul.wpp-list li:before , ol.wpp-list li:before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    color: #FFF;
    text-align: center;
    line-height: 1.5rem;
    background-color: rgba(120, 108, 97, 0.95);
    content: counter(wpp-ranking, decimal);
    counter-increment: wpp-ranking;
    border-radius: 2rem;
}
ul.wpp-list li#ranking-more:before {
    display: none;
}
ul.wpp-list::after {  /* 変更 */
  clear: both ;
  content: ''; 
  display: block;
}
#wpp-page-recipe-link {
	position: relative;
	display: block;
	margin: 2rem auto;
	max-width: 250px;
	padding: 10px;
	height: 25px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background-color: #786c61;
	font-size: 150%;
	font-weight: bolder;
	border-radius: .1em;
}
#wpp-page-recipe-link:after {
	background: #786c61;
	content: "";
	height: 32.5px;
	position: absolute;
	right: -15px;
	top: 6.48px;
	width: 32.5px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	-moz-border-radius: .4em;
	-webkit-border-radius: .4em;
	border-radius: .1em;
}
/*--------------------------------------------
 side - popular post <<
---------------------------------------------*/
/*--------------------------------------------
 share >>
---------------------------------------------*/
#cmn_share_menu {
	background-color: #fff;
	padding: 2rem 0;
	font-size: 90%;
}
#cmn_share_footer {
	padding: 3rem 0 4rem 0;
	font-size: 95%;
}
.cmn_share_div_wrap {
	text-align: center;
}
.cmn_share_ttl {
	font-size: 10px;
	font-weight: 600;
	color: #3c260d;
}
/* バックスラッシュ、スラッシュ囲み */
.cmn_share_ttl {
    position: relative;
    display: inline-block;
    padding: 0 30px;
	font-size: 10px;
	font-weight: 600;
	color: #3c260d;
}
.cmn_share_ttl:before, .cmn_share_ttl:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 15px;
    height: 1.5px;
    background-color: black;
}
.cmn_share_ttl:before {
    -webkit-transform: rotate(-120deg);
    transform: rotate(-120deg);
}
.cmn_share_ttl:after {
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
}
.cmn_share_ttl:before {
    left: 0;
}
.cmn_share_ttl:after {
    right: 0;
}
ul.cmn_share_ul {
	padding: 0.8rem;
	list-style-type: none;
}
ul.cmn_share_ul li {
	display: inline-block;
}
ul.cmn_share_ul li a {
	text-decoration: none;
	color: #3c260d;
	padding: 0.3em 0.7em;
	font-size: 1.4em;
}
/*--------------------------------------------
 share <<
---------------------------------------------*/
/*--------------------------------------------
 page_top <<
---------------------------------------------*/
#page_top{
	display:none;
	position: fixed;
	right: 0.3rem;
	bottom: 45px;
	bottom: calc(env(safe-area-inset-bottom) + 45px);
	background: #786c61;
	opacity: 0.8;
	border-radius: 2px;
}
#page_top a{
	display: block;
	width: 35px;
	height: 35px;
	text-decoration: none;
}
#page_top a::before{
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	font-family: icomoon;
	content: '\e968';
	font-size: 17px;
	color: #fff;
	text-align: center;
	line-height: 35px;
	}
/*--------------------------------------------
 page_top <<
---------------------------------------------*/
/*--------------------------------------------
 foot >>
---------------------------------------------*/
/*--------------------------------------------
 装飾 >>
---------------------------------------------*/
/* SimpleLink start */
.simpleLink a {
	display: flex;
	position: relative;
	text-decoration: none;
	margin: 1rem;
	border: solid 1px #f1ede9;
	background-color: rgb(255 255 255 / 50%);
}
.simpleLink a:after {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 0.5rem;
	padding: 0rem 0.5rem;
	content: 'MORE';
	color: #fff;
	font-size: 50%;
	line-height: 2.5;
	border-radius: 2px;
	background-color: #dfd8d1;
	font-weight: 500;
	z-index: -1;
}
.simpleLink div.v_flg {
	display:none;
}
.wrapSLinkImg {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 30%;
	margin: 1.5%;
}
.wrapSLinkTxt {
	display: flex;
	justify-content: left;
	align-items: center;
	width: 64%;
	margin: 1.5% 3% 1.5% 1.5%;
	font-size: 95%;
	font-weight: 500;
	line-height: 1.4em;
}
.wrapSLinkTxt > div {
	width: 100%;
}
.wrapSLinkTxt .content_tag {
	margin: 0.1rem 0;
	font-size: 90%;
}
.wrapSLinkTxt .content_tag  > span {
	font-size: 95%;
	color: #3c260d;
	margin-right: 0.4rem;
}
.wrapSLinkTxt .content_tag > span .icon-calendar {
	margin-right: 4px;
}
.wrapSLinkTxt .content_tag > span .list-tag-cat-icon,
.wrapSLinkTxt .content_tag > span [class^="icon-"] {
	margin-right: 3px;
}
.wrapSLinkTxt .content_tag > span .icon-clock {
	margin-right: 2px;
}
/* SimpleLink end */
.text_center {
    text-align: center;
}

.under_pink {
    background: linear-gradient(transparent 70%, #f5a198 0%);
}

.under_green {
    background: linear-gradient(transparent 70%, #89c997 0%);
}

.under_yellow {
    background: linear-gradient(transparent 70%, #e8bf2f 0%);
}
.bold {
	font-weight:600;
}
.bottom3 {
	margin-bottom: 3rem;
}
.top15 {
	margin-top: 1.5rem;
}
.top3 {
	margin-top: 3rem;
}
/* シンプルな吹き出し */
.simpleBalloon {
    border-bottom: 2px solid #755E5A;
    margin: 15px 5px;
    padding: 5px 0;
    position: relative;
    font-weight: bold;
    font-size: 105%;
}

.simpleBalloon:before, .simpleBalloon:after {
    content: '';
    border-right: 20px solid #fff;
    border-top: 15px solid #755E5A;
    bottom: -17px;
    position: absolute;
    left: 24px;
}

.simpleBalloon:after {
    border-top-color: #fff;
    border-right-color: transparent;
    bottom: -13px;
    left: 26px;
}

/* 真ん中ライン */
p.mid_line {
    position: relative;
    text-align: center;
}

p.mid_line span {
    position: relative;
    z-index: 2;
    display: inline-block;
    margin: 0 2.5em;
    padding: 0 1em;
    background-color: #fff;
    text-align: left;
}

p.mid_line::before {
    position: absolute;
    top: 50%;
    z-index: 1;
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #ccc;
}

.simple_head {
    font-feature-settings: normal;
    color: #333;
    font-size: 130%;
    line-height: 160%;
    font-weight: bold;
    text-align: center;
    margin-top: 0.5rem;
    padding: 0.5rem;
}

.simple_head span.icon-trophy {
    font-size: 130%;
    color: #b4a329;
}

/* バックスラッシュ、スラッシュ囲み */
.title_slash {
    position: relative;
    display: inline-block;
    padding: 0 30px;
    font-size: 110%;
    line-height: 30px;
}

.title_slash:before, .title_slash:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 20px;
    height: 2px;
    background-color: black;
}

.title_slash:before {
    -webkit-transform: rotate(-120deg);
    transform: rotate(-120deg);
}

.title_slash:after {
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

.title_slash:before {
    left: 0;
}

.title_slash:after {
    right: 0;
}
.widget-title-icon {
	margin-left: 7px;
    font-size: 25px;
    vertical-align: -4px;
}
.text_highlight_link {
	text-align: center;
	margin: 1rem 1rem;
}
.text_highlight_link a {
	display: block;
	padding: 0.5rem 1rem;
	font-weight: 600;
	color: #da8d8d;
	text-decoration: none;
	border-radius: 14px;
	background-color: #f5eaea;
	border: solid 1px #da8d8d;
}
.text_highlight_link a:hover {
	color: #da8d8d;
	color: #fff;
	background-color: #da8d8d;
	border: solid 1px #da8d8d;
}
/*--------------------------------------------
 装飾 <<
---------------------------------------------*/
/*--------------------------------------------
 Ads >>
---------------------------------------------*/
.ads_margin {
	margin: 1.5rem 0rem 1.5rem 0rem;
	clear:both;
}
.ads_margin_bottom_0 {
	margin-bottom: 0;
}
/*--------------------------------------------
 Ads <<
---------------------------------------------*/