@charset "utf-8";
h1 {margin-top: 0.4em;}
#mainArea{
	line-height: 1.5em;
}
 /*コラム*/
#article #paragraphs .description ul li{line-height:1.7em; font-size: 13px; padding:2px; margin-right:1%; margin-bottom:0.7em; background-color:#fbfaf3;border: 2px dotted #CCCCCC;}
#article #paragraphs .description ul li span.listNumber{  text-indent:-0.1em;font-style:oblique; float:left; font-size:1.9em; margin: 2px 5px 2px 2px;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;}

#article #mainArea{ line-height: 1.4em;}
#article article{}
#mainarea #article p {  margin: 0.7em 0;}
#article .description  p:first-of-type{margin: 2px 0  0.7em 0;}

/* コラム 関連種リンク*/
div.syuGroups div.syuBox{padding:5px; border-bottom:1px dotted #555555; display:flex;width: 100vw;}
div.syuBox div.relatedSyuFlexBox1{order:1; padding-right:1vw; width: 40vw;}
div.syuBox div.relatedSyuFlexBox2{order:2;width: 60vw; font-size: 14px; line-height: 1.2em;padding-right: 5px;}
div.syuBox span.photo_title{ margin-bottom:1em;}
div.syuGroups div.syuBox div.photo_title span{line-height:1em;font-size:13px;font-weight:normal;}
div.syuGroups div.syuBox:last-child{border-bottom:none;}
#article div.syuBox div.relatedSyuFlexBox2 a.btn2{ -moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px; display: inline-block;cursor: pointer;
font-family: Arial; margin: 0.3em 0.1em 0.2em 0.1em !important; padding: 4px 9px 3px 1.8em; vertical-align: top; float: right; text-decoration: none;
border: 1px solid #CCC; background: url(images/logo_ss.png) 8px 50% no-repeat;}

div.syuGroups div.syuImage{	float:right;}
div.syuGroups a{text-decoration:none; margin-top:0.8em;}
div.syuGroups h2 a,div.syuGroups h2 a:visited{text-decoration:none; color:#FFFFFF; border-bottom:1px solid #FFFFFF;padding:5px 2px 1px 2px ;}
div.syuGroups h2 a:hover{color:#0261fd; border-bottom:1px solid #0261fd;}
div.syuBox span.syu{display:block;font-size:1.2em; font-weight:bold;line-height:1.3em; }
div.syuBox span.syu_eng{display:block; line-height:1em; font-size:1em; margin-bottom:0.3em;}
div.syuGroups div.syuBox img{	width:100%; max-width: 300px; margin: 0;}
div.syuGroups div.syuBox div.photo_title{line-height:1.6em;	padding:0 3px 1em 0;	font-size:1.3em;	font-weight:bold;height:auto;width:50%;  width : -webkit-calc(50% - 0px) ; width : calc(50% - 0px); float:left;}

/*Custom 検索*/
#mainArea div.paging {width:96%; padding: 0.4em 4px 0.4em 4px; background-color:#F9F9F9; position:relative; margin:0.2em auto 0.3em; text-align:left; border:1px solid #CCC;}
#mainArea div.paging p.page_mes{line-height:1.3em; margin:0.3em 4px;}
#mainArea div.paging ul {width:100%; position:relative; margin:5px 0px; line-height: 35px;}
#mainArea div.paging li.current_page,
#mainArea div.paging li{display:block; float:left; min-width:35px; min-height:35px;  text-align:center; margin: 0 4px 0.3em; border-radius: 2px; background-color:#DDD; text-decoration:none; color:#0053BF;}
#mainArea div.paging a{text-decoration:none; color:#0053BF;}
#mainArea div.paging li.current_page{ background-color:#3388CC; color:#FFF; }

/*ページ内リンク*/
#pageMenu{ margin:0.3em 5px 0.3em 5px; text-indent:0; border:1px solid #C3DFE8; border-radius:2px;}
#pageMenu p { margin:0; padding:2px 3px; background-color: #D2E8FA;	border-radius:2px 2px 0 0;}
#pageMenu ol{ margin:0;	padding:0.2em 1em 0.2em 1.8em; list-style-type:square; list-style-position:outside; color:#0053BF;}
#pageMenu ol li{line-height:1.5em;list-style-type:square;}
#pageMenu ol li a{text-decoration: none;}
#pageMenu ol ol{ margin:0;	padding-left:1em;}

body.paragraphs h2{margin-top: 10px;   border-top: 1px solid #fff;   padding: 10px 0.3em !important;   background-color: #006FC9;   color: #fff;   text-align: center;}
.description{	padding: 5px;}
.description h3{	margin: 20px 0 10px 0 !important;	padding-bottom: 2px;}
.description h3 {	margin: 10px 0 4px 0 !important;  background-color: #89BFF5;  padding: 8px 5px 5px 3px;  position: relative;  /*border-bottom:1px solid #3388CC;*/}
.description h3:before {  content: ' ';  height: 0;  position: absolute;  width: 0;  border: 8px solid transparent;  border-width: 4px;  /*border-top-color: #ddd;*/
    border-left-width: 32px;  border-right-width: 0;  top: 100%;  left: 0;}
.description h3:after {  content: ' ';  height: 0;  position: absolute;  width: 0;  border: 8px solid transparent;  border-width: 1px;  /*border-top-color: #aaa;*/
    border-left-width: 32px;  border-right-width: 0;  top: 100%;  left: 0;}
#article #contents h3,
#paragraphs h3{ background-color:#D2E8FA;line-height:1.9em; text-indent:0.2em; margin:0.6em 0 0.3em;  font-size:1.1em; }
#article #contents h3 + div.description,
#paragraphs h3 + div.description{padding:3px;}
#article #contents h4,
#paragraphs h4{border-bottom: 1px dotted #CCCCCC;line-height:1.4em; text-indent:0.1em;  margin:0.5em 0 0.2em;  font-size:1em;}
#article #contents h4 + div.description,
#paragraphs h4 + div.description{padding:3px;}
#article #contents #paragraphs h4::before,
#paragraphs h4::before {content: "\f0c8";  font-family: FontAwesome;  color:#3388CC;  font-size:0.6em;  padding-right:0.4em;  padding-left:2px;  vertical-align:+2px;}
div.p1 {margin: 6px 0;}
div.coltitle1 { padding:0.2em 0 0.1em 0 ; font-weight:bold; text-indent:0.2em; border-top:3px solid #FFF;
background-color: #BCDEF5;
margin-bottom:0.3em;}
span.coltitle2 {line-height:1.6em; background-color:#DDDDDD; margin-top:5px; padding:1px 0.6em; border-radius:4px; font-weight:bold;font-size: 0.9em;}

/*ランキング*/
div#ranking_wrap{ width:100%;}
div#ranking_title{ background-color:#E38400; color:#ffffff; text-align:center;margin-top: 10px; padding: 10px}
div.rankings{box-sizing:border-box; width: 50%;  margin-bottom:.8em; float:left; padding:3px 2px; background-color:#FFFFFF; margin: 0px; min-height:230px;}
div.rankings p.title{ margin:0; padding:1px 3px; background-color:#edeace; color:#000;}
div.rankingsSyu{ width: 100%; }

div.rankingsSyubox2{ width: 100%; display:flex;}
div.rankingsSyubox2 .fitCover{width: 36px; height: 36px; object-fit:cover; object-position: 0% 50%; }
.rankingSyuBoxInner1-2 {padding:2px 2px 0 0;}
.rankingSyuBoxInner2-2 {padding:2px;font-size: 0.85em; line-height:1.4em; }

span.rank_num1,
span.rank_num2,
span.rank_num3,
span.rank_num4,
span.rank_num5 {border-radius: 2px; padding:0px 4px; color:#777777; font-size:9px;}
span.rank_num1 { background-color:#bdb258; color:#FFFFFF;}
span.rank_num2 { background-color:#979797; color:#FFFFFF;}
span.rank_num3 { background-color:#a09857; color:#FFFFFF;}
span.rank_num4, span.rank_num5 { background-color:#ededed; color:#000000;}

/*画像幅*/
div.description img.col_img_right {padding:3px 0 4px  0.1rem; float:right; border-left:0.4em solid #f9f9f9;}
div.description img.col_img_left {padding:3px 0.1rem 4px 0; float:left; border-right:0.4em solid #f9f9f9; z-index: 1;}
div.description img.col_img_ {padding:0 0 4px;}
br.col_clear{clear: both; }
img.w130{width:33%;min-width:130px;}
img.w150{width:150px;}
img.w180{width:40%; min-width:180px;}
img.w200{width:200px;}
img.w220{width:45%;min-width:220px;}
img.w250{width:250px;}
img.w280{width:50%;}
img.w300{width:300px;}
img.w350{width:350px;}
img.w380{width:60%;}
img.w400{width:100%;padding:3px 0 0 0; }
img.w450{width:100%; padding:3px 0 0 0; }
img.w500{width:100%; padding:3px 0 0 0; }

#paragraphs h2{background-color:#8d4343;}
h2#parag0 {
	margin-top: 0.3em;
}
/*SOCIAL BUTTONS*/
.socialButtons{	margin-top:0; padding: 5px 0px 2px 0px;	text-align: right;}
.socialButtons ul{}
.socialButtons ul li{	display:block;	float:right; margin-right:0.5em;}

/*アーティクル最新リスト*/
#article #rightArea2  h2.article_list_tag_title{ border-radius:0; margin-bottom:6px;
    border: 1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; font-size:13px; display: block; border-left: double 5px #d77b15;
    color: #bf3e00;line-height: 1.5em;margin-top: 0;  padding: 8px 3px 3px 5px;
    font-weight: bold;background: linear-gradient(to bottom, #FFFFFF 0%,#dfdfdf 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#dfdfdf',GradientType=0 );overflow: hidden;
    }
.article_list{margin-bottom:0.5em; }
.article_list div.article_type_wrap{ width:140px; text-align:center;}
.article_list div.article_single_box{ position:relative;overflow:hidden; border-bottom: 1px solid #b3b3b3; margin:0 0 0.4em;}
.article_list  div.article_list_title{padding:0 0 0;  line-height: 1.6em; width:68vw; float:right;}
.article_list  div.article_list_title a {padding: 0 2px;}
#mainArea .article_list  h2{margin:1px 0 2px;}
.article_list  .article_thumbnail{display:flex;  justify-content: center;align-items: center; overflow:hidden; margin-bottom:2px;width: 30vw;border-right: 1vw solid #FFFFFF;border-left: 1vw solid #FFFFFF;float: left;}
.article_list  img {padding: 0 0 2px; float: left;}
.article_list  img.thumbnail_art{width:100%;}

/*article type and tag icon*/
span.article_tag{white-space: nowrap;display:inline; margin:1px; background-color:#3e8cd9; color:white; padding:2px 5px 1px; border-radius:3px; font-size:12px;}
span.article_type{white-space: nowrap;display:inline; text-decoration:none; margin:1px; background-color:#800040; color:white; padding:2px 5px 1px; border-radius:3px; font-size:12px;}
.article_list_title a {text-decoration:none; }
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: 14px;padding: 4px 4px 0; background-color: #efefef; margin: 1px 0 2px 0;font-size: 13px;}

div.wrapArticleCategory{margin-top:8px;}
div.wrapArticleCategory a{ text-decoration:none;}
div.wrapArticleCategory a:hover span{color:#fbff0b; text-decoration:none;}
div.wrapArticleCategory div.article_date{line-height:1.2em; background-color:#dbdbdb; font-size:13px; padding: 4px 6px 2px; display:inline-block; border-radius:3px; margin:1px 1px 5px 1px; }
div.wrapArticleCategory span{margin: 1px; line-height: 1.2em; padding: 3px 6px 3px; border-radius: 3px; font-size: 13px;}

/*article list*/
div.center_article  {margin-top:3px;}
div.center_article div.article_single_box{ position:relative;overflow:hidden;  border-bottom: 1px solid #999999;margin-bottom: 6px; margin-top: 6px;}
div.center_article  div.article_list_title{ color:#ffffff; margin-bottom:3px; overflow: auto;}
#mainArea div.center_article  h2.article_list_tag_title{ text-indent:0; font-size:13px; margin:0; background-color:#5a5a5a;}
div.center_article   h3 + div.description{padding:3px 0.6em;}
div.center_article   h4 + div.description{padding:3px 0.6em;;}
div.center_article  img {padding: 0 0 4px; float: left; border-right: 0.4em solid #FFFFFF;object-fit: cover; width:150px;}

/*検索*/
div.wrapBoxSearchOptions{margin:10px; padding:5px 5px; background-color:#efefef;}
div.boxSearchOption{margin-top:0.3em;}
div.ui-select{margin-top:1px;}
div.boxSearchOptionsTitle{padding: 4px 8px; background-color: #4494e6; font-weight: normal; color: #FFFFFF; display: block;}
div.boxSearchOption span.label{font-size:0.8em; padding-left:0.1em;}