@charset "UTF-8";
ul,li { margin: 0; padding: 0; }
li { list-style-type: none; }
h1,h2{ color: #484848; font-size: 13px; margin: 0; padding: 0; }
h1{margin-top: 10px;}

div#leftArea { width:190px; float: left; margin-right: 5px;margin-bottom: 10px; order: 1; margin-right:10px;}
/*div#contents{ width: 700px; float: left; margin-bottom: 10px; }
div#contents:after {content : ""; display : block; height : 0; clear : both; }*/
#index div#header #mailmagazine_banner { display:none;}
div#content_banner{text-align:center;}
div#topnavi{clear:both;	width: 100%;	margin-top: 5px;	padding-top: 10px;	border-top: 1px solid #131083;	height:70px;}
div#exmenuleft{margin-bottom:0.6em;}
div#topnavi ul{margin-left: 50px;}

div#topnavi p{ color: #131083; font-size: 11px; margin: 0; }
div#topnavi li { width: 230px; float: left; margin-right: 5px; }
div#topnavi li#topnavi3 { margin-right: 0; }
div#topnavi li a { background-image: url(../img/topnavi.jpg); text-indent: -9999px; width: 228px; height: 38px; overflow: hidden; border: solid 1px #131083; display: block; }
div#topnavi li#topnavi2 a { background-position: -228px 0; }
div#topnavi li#topnavi3 a { background-position: -456px 0; }
div#topnavi li a:hover { background-position: 0 -38px; }
div#topnavi li#topnavi2 a:hover { background-position: -228px -38px; }
div#topnavi li#topnavi3 a:hover { background-position: -456px -38px; }

/*div#topnavi p{
	color: #131083;
	font-size: 11px;
	margin: 0;
	line-height: 13px;
}
div#topnavi ul { margin-bottom: 20px; }
div#topnavi li { width: 160px; margin-bottom: 10px; }
div#topnavi li#topnavi3 { margin-right: 0; }
div#topnavi li a { background-image: url(../img/topnavi.jpg); background-position: -10px 0;text-indent: -9999px; width: 158px; height: 38px; overflow: hidden; border: solid 1px #131083; display: block; }
div#topnavi li#topnavi2 a { background-position: -238px 0; }
div#topnavi li#topnavi3 a { background-position: -466px 0; }
div#topnavi li a:hover { background-position: -10px -38px; }
div#topnavi li#topnavi2 a:hover { background-position: -238px -38px; }
div#topnavi li#topnavi3 a:hover { background-position: -466px -38px; }*/

div#wrapMainAndRight{flex-wrap: wrap;}
div#main{ width: 530px; order:1;}
div#rightnavi{ width: 260px; padding-top:0; order:2; margin-bottom:4px;}
div#main2{ background-color:#CCCCCC;flex-grow: 1;order:3; width:100%;}
div.mainCenter{ width: 800px; }
div.centerArticle{width:530px;}
div.mainRight{ width: 260px; margin-left:10px;}
/*
div#books_intro1{ margin:0; padding:0; line-height: 0.5em;}
div#books_intro2{ margin:0; padding:3px 0; border-left: #CCC 1px solid; border-right: #CCC 1px solid; border-bottom: #CCC 1px solid; margin-bottom: 8px;}

div.books_intro_book{ margin:3px 3px 3px 3px; padding:5px 3px; width: 500px; border-bottom: #CCC 1px dotted; clear: both;}
div.books_intro_book img{ float:left; margin-right:6px;}
div#books_intro2 div.books_intro_book:last-child{ border:none;}
*/

div#books_intro1{ margin:0; padding:0; line-height: 0.5em; background-color:#efefef;}
div#books_intro2{ border-left: #CCC 1px solid; border-right: #CCC 1px solid; border-bottom: #CCC 1px solid; margin-bottom: 5px;}

div.books_intro_book{ margin:2px; padding:2px; width: 256px; float:left;line-height: 1.4em;}
div.books_intro_book img{ float:left; margin-right:4px;}
div.book_kansyuu{ margin:3px; padding:3px; width: 240px; float:right; background:url(../img/top_book_kansyu_title2.png) 0 0 no-repeat; overflow:visible; padding-left:126px; margin-left:126px; margin-right:17px;}

div#topfb{width: 260px; text-align:center; padding:0px; border:0px solid #CCC; margin-bottom: 5px; }

div#renew_msg { font-size:1em; width: 510px; background-color: #f48255; margin:5px 0; padding: 4px 10px; }
div#to_mobile_msg { font-size:1em; width: 780px; background-color: #f48255; margin:0 0 5px 0; padding: 4px 10px 4px 10px; }

div#news { width: 530px; background-color: #ffba00; background-image: url(../img/wn_bk.gif); background-repeat: no-repeat; background-position: right bottom; clear: both; padding-bottom: 10px; }
div#news h2 { background-image: url(../img/tit_wn.gif); text-indent: -9999px; width: 530px; height: 28px; overflow: hidden; }
div#news dl { margin-top: 10px; margin-left: 10px; }
div#news dt { width: 40px; float: left; clear: left; }
div#news dd {  width: 420px; float: left; }
div#news:after {content : ""; display : block; height : 0; clear : both; }

div.blog{ color: #131083; width: 260px; float: left; background-color: #e4f5ff ;  margin-bottom: 10px;}
div.blog dl { margin-top: 10px; margin-right: 5px; margin-left: 5px; }
div.blog dt { color: #09f; font-size: 11px; }
div.blog dd { margin: 0 0 3px 15px; padding: 0; }
div#blog_sushi{margin-right: 10px}
div.blog h2 a{ width: 260px; height: 33px;  text-indent: -9999px; overflow: hidden; display: block;}
div#blog_sushi h2 a{ background-image: url(../img/tit_sushizukan.gif);  }
div#blog_zanmai h2 a{ background-image: url(../img/tit_zanmai.gif);  }

h2.right_col_title{font-size:14px; width: 100%; line-height: 30px; text-indent: 4px; font-weight: bold; color:#FFF; background-color:#7b8aa5;}
div#ads_right{ margin-top:0; margin-left:20px; }
div.box_side{ margin-bottom:15px;}

#article_lists h2.right_col_title{background-color:#459ea1;}

/*右コラムリスト*/
div.right_article{width:auto;}
div.right_article > div.right_col{ overflow:hidden auto; }
div.right_article ul li{display:block;  display:flex; justify-content:space-between; padding:7px 0 1px; border-bottom:1px dotted #666666;line-height:16px;}
div.right_article ul li a{display:block; order:1; line-height:1.3em; text-decoration:none;}
div.right_article ul li span{align-self: center; order:2;display:block; white-space:nowrap; color:#a0a0a0; font-size:0.8em; margin-left:3px;}
div#slideshow {	position:relative;	height:280px;	overflow: hidden;	margin-bottom: 8px;}
div#slideshow img {	position:absolute;	top:0;	left:0;	z-index:8;	width: 530px;}
div#slideshow img.active { z-index:10;}
div#slideshow img.last-active {z-index:9;}

/*ランキング*/
div#ranking_wrap{ width:260px; border: 1px solid #cccccc; padding:1px; margin-bottom:10px; box-sizing:border-box;}
div#ranking_title{ width: 81px; min-height:230px; margin:0 1px 0 0;padding:2px 3px; background:url(/common/img/top/top_ranking_title2.png) top left no-repeat; border:none;}
div.rankings{width: 256px;  margin-bottom:.8em; padding:1px 0; background-color:#FFFFFF; margin: 0; }
div.rankings:first-of-type{width: 100%; box-sizing:border-box; min-height:50px; margin:0 1px 0 0;padding:2px 3px; background:url(/common/img/top/top_ranking_title2.png) 2px 2px no-repeat #e2aa00; border:none; }
div.rankings p.title{ margin:0; padding:4px 2px 2px; font-size:12px;background-color:#ddd5a6; color:#000;}
div.rankingsSyu{ width: 100%; }
div.rankingsSyu ul { width: 256px;  position:relative; margin:0 1px 0}
div.rankingsSyu ul li{ padding: 0; vertical-align:middle; float:left; }
div.rankingsSyu div.rankingsyubox{ width: 138px; height: 70px; margin-right: 0; text-align: center; text-indent:0;}
div.rankingsSyu div.rankingsyubox p {margin:2px 0 ;}

div.rankingsSyu div.p1 {width: 43px; height: 25px; margin-bottom:1px; padding: 2px 2px 1px 0; display:float; float:left; position: relative; overflow: hidden;}
div.rankingsSyu div.p1   img { width: 100%; height: auto; max-width: 100%; max-height: none; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);  transform: translate(-50%, -50%);}
@supports (object-fit: cover) {
  div.rankingsSyu div.p1   img { position: static; height: 100%; width: 100%; object-fit: cover; -ms-transform: none; -webkit-transform: none; transform: none; object-position: center left;}
}
div.rankingsSyu div.photo_title { width:199px; min-height:28px;font-size:14px;  padding-top: 1px; padding-left:2px; height:auto; display:flex;align-items: center;}
div.rankingsSyu div.photo_title a{ line-height:22px; padding-left:3px; margin-top:3px;}

li.rankingsyubox:hover {border:0; /* IE6 needs this to show large image */	z-index:1;}
li.rankingsyubox a span { 	position:absolute;	visibility:hidden;}

/* banner*/
div.ad_banner {
	border:1px solid #CCCCCC;
}
h4.official_sponcer{
	margin-top:0; width: 795px; line-height: 30px; text-indent: 4px; font-weight: bold; color:#FFF; background-color:#E08C1D; margin-bottom:0.3em; margin-left:5px; }
div.bannerarea_top_middle {position:relative; margin:0; margin-bottom:5px; margin-left:5px;}
div.bannerarea_top_middle div.banner_top_middle{border:1px solid #DDDDDD; width:390px; margin:0; padding:0; height:90px;}
div.bannerarea_top_middle div.banner_top_middle_left{ float:left;}
div.bannerarea_top_middle div.banner_top_middle_right{ float:right;}

/*SOCIAL BUTTONS*/
div#headerLeadTop{ margin-top:2px;}
div#headerLeadTop #lead1{margin-top:2px;}
div#headerLeadTop .socialButtons{	padding: 1px 3px;	text-align: right;	height:23px;}
div#headerLeadTop .socialButtons ul{	margin-top:4px;}
div#headerLeadTop .socialButtons ul li{	display:block;	float:right;	margin-left:0.4em;}

/*article list*/
#article {margin-top:3px;}
div.article_single_box{ position:relative;overflow:hidden; height: 105px; border-bottom: 3px solid #FFFFFF;margin-bottom: 3px; }
#article div.article_list_title{ background-color:#eaead5; color:#ffffff; margin-bottom:3px;overflow: auto;}
#article  h2{text-indent:0; padding:2px 0 0 2px;background-color:#eaead5; }
#article  h3 + div.description{padding:3px 0.6em;}
#article  h4 + div.description{padding:3px 0.6em;;}
#article img {
    padding: 0 0 4px; float: left; border-right: 0.4em solid #FFFFFF;object-fit: cover; width:150px;height:100px;
}

span.article_tag{white-space: nowrap;display:inline; margin:1px; background-color:#3e8cd9; color:white; padding:4px 5px 3px; border-radius:3px; font-size:12px;}
span.article_type{white-space: nowrap;display:inline; text-decoration:none; margin:1px; color:white; padding:4px 5px 3px; border-radius:3px; font-size:12px;}
span.article_type{display:inline-block; margin:1px; background-color:#800040; margin:2px 2px; padding:2px 8px 0; line-height:1.4em; border-radius:3px; font-size:12px;}
span.article_type_identify{background-color:#374f9f;}
span.article_type_food{background-color:#a57a40;}
span.article_type_history{background-color:#b96db0;}
span.article_type_culture{background-color:#8b66b1;}
span.article_type_column{background-color:#5ba0ff;}
span.article_type_others{background-color:#6e7b85;}
span.article_type_recipe{background-color:#b35e6f;}
span.article_type_kakouhin{background-color:#a9a226;}
div.move_to_article{line-height: 16px; position:absolute; bottom:0; border:1px solid #2f7dbd; right:1px; background-color:#FFFFFF;font-weight:normal;  padding:2px 10px  0 7px;; white-space:nowrap;}
a.move_to_article{height:24px; position:absolute; bottom:0; right:0; width: 11.4em; background-color: #FFFFFF;}
div.article_date{color:#000000; line-height:1.4em; padding:3px 3px 00;}



#article  #paragraphs h4::before {	content: "\f0c8"; font-family: FontAwesome; color:#3388CC; font-size:0.6em; padding-right:0.3em;}
#article #paragraphs .description{padding:0 0.5em;}
#article #paragraphs .description p{margin-bottom:0.7em; padding:0 0.2em;}
#article #paragraphs .description p:first-of-type{margin-top:2px;}
#article #paragraphs .description ul{
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
    }

 /*コラム*/
#article #paragraphs .description ul li{line-height:1.5em; font-size: 13px; -ms-flex-preferred-size:  29.67%; flex-basis: 29.67%;padding:1%; margin-right:1%; margin-bottom:0.7em; background-color:#fbfaf3;border: 2px dotted #CCCCCC;}
#article #paragraphs .description ul li span.listNumber{  text-indent:-0.25em;font-style:oblique; float:left; font-size:1.4em; margin: 1px 6px 2px 0px;border:1px solid #ffffff; width:1.5em; height:1.5em; display:block; color: white;
background-color:#d8b34a; text-align:center; padding-bottom:-2px;     display:-ms-flexbox;    display:-webkit-flex;    display:-moz-flex;    display:flex;
-webkit-box-align:center;    -moz-box-align:center;    -ms-flex-align:center;    -webkit-align-items:center;    -moz-align-items:center;    align-items:center;
-webkit-box-pack: center;	-ms-flex-pack: center;	justify-content: center; }
 #article #paragraphs .description ul li span.listNumber span{position: relative;top:2px; left:1px;}
 #articleMenuleft{margin-bottom:8px;}
.jumpMenu{line-height:2em;width: 100%; border-color:#CCC; padding:3px 1px;}