@charset "UTF-8";

/*!
Theme Name: mororeco
Description: mororeco theme
Theme URI: 
Author: mororeco
Author URI: https://morobrand.net/mororeco/profile/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
table th, table td {
    border-color:#ccc;
}

.article h2{
	border-bottom: double 5px #1f3c38;
	padding: 20px 16px;
	background:#fdfbf5;
}

.article h3{
	padding: 0.5em 0.5em;/*上下 左右の余白*/
	color: #5ebfb2;/*文字色*/
	background: transparent;/*背景透明に*/
	background: #fafafa;
	border-left: solid 5px #5ebfb2;/*左線*/
	font-size: 1.5em;
}

.article h4{
	border-bottom: solid 3px #1f3c38;
 	position: relative;
	padding: 9px 0px;
}

.article h4:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px #5ebfb2;
	bottom: -3px;
	width: 30%;
}

.article h5{
	position: relative;
	display: inline-block;
	padding: 0 55px;
	padding: 9px 6px;
}
.article h5:before, .article h5:after {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 45px;
	height: 1px;
	background-color: black;
}

.article h6{
	color: #1f3c38;/*文字色*/
	padding: 0.5em 0;/*上下の余白*/
	border-top: solid 2px #4abaa4;/*上線*/
	border-bottom: dotted 2px #4abaa4;/*下線*/
	padding: 9px 6px;
}

/* 投稿サムネイルのサイズ変更 */
.entry-card-thumb {
  width: 180px;
}

/* 投稿カードの右側の位置調整 */
.entry-card-content {
    margin-left: 200px;
}

/* 投稿カードのタイトルと抜粋文 */

h2.entry-card-title{
	color: #5ebfb2 ;
	line-height: 1.2em;
	font-size: 1.3em;
	background: #fafafa;
	padding: 0.5em;
	margin-bottom: 0.5em;
	border-bottom: 2px solid #5ebfb2;
}

div.entry-card-content div.entry-card-snippet{
	font-size: 1.0em;
	line-height: 1.5em;
}

/* sidebar */

#sidebar h3.widget-sidebar-title{
	background: #1f3c38;
	color:#fff;
}

#sidebar ul{
	padding-bottom:1.0em;
	border-bottom: 1px solid #1a1a1a;
}
#sidebar ul li{
	padding-left: 1.0em;
}
#sidebar ul li:before{
  content: "\f138";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-right: 10px;
  color: #1f3c38;
}
#sidebar ul li a{
	display: inline-block;
}
#sidebar aside.widget_nav_menu{
	margin-bottom:1.0em;
}

.copyright{
	color:#fff;
}
/* blockquote */

blockquote {
  position: relative;
  padding: 10px 20px 20px 40px;
  box-sizing: border-box;
  font-style: italic;
  color: #57837d;
  background: #fcfcfc;
  border-color: #57837d;
  border-top: solid 3px #57837d; 
}
  blockquote p {
    position: relative;
    padding: 1em 0 0;
    margin: 10px 0;
    z-index: 3;
    line-height: 1.7; 
}
  blockquote::before {
    display: inline-block;
    position: absolute;
    left: 0px;
    width: 40px;
    height: 30px;
    text-align: left;
    color: #fff;
    background: #57837d; }
  blockquote::after {
    content: ""; }
  blockquote footer {
    padding: 0 1em 1em;
    text-align: right; }
  blockquote cite {
    text-align: right;
    color: #888888;
    font-size: 0.9em; }
    
/* モバイル */
@media screen and (max-width: 480px) {
  /* blockquote */
  .content blockquote {
    padding: 0; 
}
    .content blockquote p {
      padding: 2em .4em .4em; 
}
}

/************************************
** カスタムCSS
************************************/

@media screen and (max-width: 1023px){
	.mobile-menu-buttons .menu-caption{
		display: none;
	}
	.mobile-menu-buttons{
		align-items: center;
	}
  /*×アイコンを移動*/
	.menu-close-button {
		padding-top: 15px;
		padding-left: 25px;
		padding-bottom: 30px;
		text-align: left;
		font-size: 1.5em;
	}
	.menu-drawer a {
		font-size: 0.9em;
		line-height: 1.8em;
		border-bottom: solid 1px #e6e6e6;
	}
	.menu-drawer a:hover {
		background-color:#e6e6e6;　/*マウスオーバー時の背景色*/
	}
	.sub-menu li {                                      
		margin: left -20px;px;
		font-size: 0.9em;
		color: #e6e6e6;
	}
}


p.demo-sample a{
	border:2px solid #ddba5e;
	border-radius: 5px;
	padding: 1em;
	text-decoration: none;
	background:#ddba5e;
	width:100%;
	color:#FFF;
	display:block;
	text-align:center;
}
p.demo-sample a:hover{
	background: #FFF;
	color: #ddba5e;
	text-decoration: none;
}

#cate-ic {
	clear:both;
	float:left;
	min-width:60px;
	margin-right:10px;
	font-size:10px;
	font-weight:bold;
	text-align:center;
	color:#FFF;
	padding:2px 5px;
	text-align:center;
}


.cat-label{
	border: none;
	color: #FFF;
}
.cat-label-10{
	background-color: #7b8d42;
}
.cat-label-244{
	background-color: #164a84;
}
.cat-label-8{
	background-color: #d7a98c;
}
.cat-label-220{
	background-color: #47885e;
}
.cat-label-2{
	background-color: #8b968d;
}
.cat-label-144{
	background-color: #007bbb;
}
.cat-label-4{
	background-color: #3f312b;
}
.cat-label-5{
	background-color: #00a497;
}
.cat-label-6{
	background-color: #cca6bf;
}
.cat-label-7{
	background-color: #4a488e;
}
.cat-label-9{
	background-color: #a59564;
}
.cat-label-84{
	background-color: #ed6d3d;
}
.cat-label-48{
	background-color: #ba2636;
}
.cat-label-264{
	background-color: #c5834e;
}
.cat-label-145{
	background-color: #89b9cd;
}
.cat-label-16{
	background-color: #c89932;
}
.cat-label-17{
	background-color: #6e7955;
}
.cat-label-433{
	background-color: #915c8b;
}
.cat-label-466{
	background-color: #E9546B;
}
.cat-label-455{
	background-color: #002E4E;
}
.cat-label-465{
	background-color: #4682b4;
}
.cat-label-464{
	background-color: #808000;
}
.cat-label-275{
	background-color: #A52A2A;
}
.cat-label-552{
	background-color: #4c2baa;
}
.cat-label-589{
	background-color: #e73e34;
}
.cat-label-595{
	background-color: #21a366;
}
/*サイドバーSNSアイコン*/
.sns-list li{
	display:inline;
}

/*関連する記事YARPP*/
.yarpp-related{
    overflow : hidden;
    margin-bottom: 1.0em;
    padding: 0.3em;
    width:100%;
}
 
.related-h,
.related-none-h{
    margin-top: 0em;
}
h3.related-none-h{
	text-indent:10px;
}
.related-h img {
	margin-left:10px;
}
.related-post{
    width: 100%;
    margin: 0 auto;
}
 
.related-post ul{
    display: block;
    margin:0;
    list-style: none;
}
 
.related-post ul li{
    display: block;
    margin: 0 0 6px 0;
    width: 46%;
    background-color:#fefefe;
    float: left;
    height:90px;
    padding:3px;
    border-bottom: 1px dotted #CCC;
}
 
.related-post ul .related-leftlist{
	border-right: 1px dotted #CCC;
	border-left: 1px dotted #CCC;
	padding:10px;
}
.related-post img {
	border:3px solid #FFF;
	box-shadow:2px 2px 3px #ccc;
}
.related-post ul .related-rightlist{
	border-right: 1px dotted #CCC;
	padding:10px;
}
 
.related-post ul li img{
    display: block;
    float: left;
}
 
.related-post ul li .meta{
    width: 65%;
    float: left;
    padding:0;
    display: inline;
    margin: 0 0 0 10px;
}
 
.related-post ul li .date{
    font-size: 0.8em;
    margin: 0;
    font-weight: bold;
}
 
.related-post ul li .title{
    width: 100%;
    font-size: 0.9em;
    margin:0; 
    padding:0;
    line-height:0.5em;
}
 
.related-post ul li .title a{
    color:#333;
    display:block;
    margin:0 0 10px 0;
    line-height:0.5em;
}

/* 最近の投稿 */

#npcatch li{
    overflow: hidden;
    clear: both;
    margin: 0;
    padding: 5px;
    width:99%;
}
.npthum {
	float:left;
	margin-left:2px;
	width:60px;
}

#npcatch a img {
	float:left;
	width:60px;
	height:60px;
	padding:1px;
	border: 3px solid #ccc;
	margin-right:5px;
}
ul#npcatch li span.title{
	width:70%;
	float:left;
}
 
#npcatch li:hover{
	background-color:#EFEFEF;
}
 
#npcatch li:hover .title{
}
 
#npcatch li:hover .title a{
}
 
#npcatch li:hover .date{
}
#npcatch li{
	overflow:hidden;
	clear:both;
	margin:0;
	font-size:12px;
	line-height:1.5em;
	padding-left:5px;
}

@media screen and (max-width: 960px) {
	#npcatch .title{
		width:65%;
		float:left;
		padding-left:10px;
	}
}
@media screen and (max-width: 758px) {
	#npcatch .title{
		width:80%;
		float:left;
		padding-left:10px;
	}
}
@media screen and (max-width: 480px) {
#npcatch .title{
		width:70%;
		float:left;
		padding-left:10px;
	}
}

/*サイドバーカレンダー*/
#calendar_wrap caption {
	text-align:center;
	border-radius:3px;
	font-size:90%;
	background-color:#222;
	color:#FFF;
	margin-bottom:3px;
}
#calendar_wrap th a,#calendar_wrap td a{
	border-collapse:collapse;
	font-weight:bold;
	color:#00a497;
}
#calendar_wrap th {
	background-color:#FFF;
	width:28px;
	height:28px;
	border-radius: 14px;
	-moz-border-radius: 14px;
	-webkit-border-radius: 14px;
	color:#222;
	text-align:center;
	line-height:28px;
}
#calendar_wrap td {
	text-align:center;
}
.entry-meta {
	background-color:#faf8f8;
	padding:5px;
	border-top:1px solid #CCC;
	border-bottom:1px dashed #CCC;
}
.site-logo{
	margin:0 auto;
	width:250px;
	height:80px;
}
.entry-content a.more-link {
	color:#FFF;
}

/* download用 */

/*AI*/
.ai-down {
	background-color:#EEE;
	padding:20px 50px;
	background-image:url(http://morobrand.net/mororeco/wp/wp-content/uploads/icon/ai-down.png);
	background-repeat:no-repeat;
	background-position:left 5px center;
	border-bottom: 3px solid #2a9392;
	border-radius: 8px 8px 0 0;
}

/*PSD*/
.psd-down {
	background-color:#EEE;
	padding:20px 50px;
	background-image:url(http://morobrand.net/mororeco/wp/wp-content/uploads/icon/psd-down.png);
	background-repeat:no-repeat;
	background-position:left 5px center;
	border-bottom: 3px solid #2a9392;
	border-radius: 8px 8px 0 0;
}

/*PDF*/
.pdf-down {
	background-color:#EEE;
	padding:20px 50px;
	background-image:url(http://morobrand.net/mororeco/wp/wp-content/uploads/icon/pdf-down.png);
	background-repeat:no-repeat;
	background-position:left 5px center;
	border-bottom: 3px solid #2a9392;
	border-radius: 8px 8px 0 0;
}

/*ZIP*/
.zip-down {
	background-color:#EEE;
	padding:20px 50px;
	background-image:url(http://morobrand.net/mororeco/wp/wp-content/uploads/icon/zip-down.png);
	background-repeat:no-repeat;
	background-position:left 5px center;
	border-bottom: 3px solid #2a9392;
	border-radius: 8px 8px 0 0;
}

/*JPG*/
.jpg-down {
	background-color:#EEE;
	padding:20px 50px;
	background-image:url(http://morobrand.net/mororeco/wp/wp-content/uploads/icon/jpg-down.png);
	background-repeat:no-repeat;
	background-position:left 5px center;
	border-bottom: 3px solid #2a9392;
	border-radius: 8px 8px 0 0;
}

/*PNG*/
.png-down {
	background-color:#EEE;
	padding:20px 50px;
	background-image:url(http://morobrand.net/mororeco/wp/wp-content/uploads/icon/png-down.png);
	background-repeat:no-repeat;
	background-position:left 5px center;
	border-bottom: 3px solid #2a9392;
	border-radius: 8px 8px 0 0;
}

/*GIF*/
.gif-down {
	background-color:#EEE;
	padding:20px 50px;
	background-image:url(http://morobrand.net/mororeco/wp/wp-content/uploads/icon/gif-down.png);
	background-repeat:no-repeat;
	background-position:left 5px center;
	border-bottom: 3px solid #2a9392;
	border-radius: 8px 8px 0 0;
}

/*CSS*/
.css-down {
	background-color:#EEE;
	padding:20px 50px;
	background-image:url(http://morobrand.net/mororeco/wp/wp-content/uploads/icon/css-down.png);
	background-repeat:no-repeat;
	background-position:left 5px center;
	border-bottom: 3px solid #2a9392;
	border-radius: 8px 8px 0 0;
}

/*PHP*/
.php-down {
	background-color:#EEE;
	padding:20px 50px;
	background-image:url(http://morobrand.net/mororeco/wp/wp-content/uploads/icon/php-down.png);
	background-repeat:no-repeat;
	background-position:left 5px center;
	border-bottom: 3px solid #2a9392;
	border-radius: 8px 8px 0 0;
}
/* 外部リンク */
p.link_url{
	background-color: #53adac;
	padding:10px 15px;
	border-top:5px solid #17302d;
	border-radius: 0 0 0 8px;
}
p.link_url a{
	color:#FFF;
}
/*
p.link_url a::after {
	content: " ";
	background : url("http://morobrand.net/mororeco/wp/wp-content/uploads/2014/05/link-ic.png");
	position: relative;
	left:10px;
	display:inline-block;
	width:10px;
	height:10px;
}
*/

/* 投稿用マーカー */

.crayon1 {
	font-weight: bold;
	background: linear-gradient(transparent 60%, #f7e78c 0%);
}
.crayon2 {
	font-weight: bold;
    background: linear-gradient(transparent 60%, #fed480 0%);
}
.crayon3 {
	font-weight: bold;
	background: linear-gradient(transparent 60%, #fbc0a3 0%);
}
.crayon4 {
	font-weight: bold;
	background: linear-gradient(transparent 60%, #fea7a7 0%);
}
.crayon5 {
	font-weight: bold;
	background: linear-gradient(transparent 60%, #fccfde 0%);
}
.crayon6 {
	font-weight: bold;
	background: linear-gradient(transparent 60%, #ebcffc 0%);
}
.crayon7 {
	font-weight: bold;
	background: linear-gradient(transparent 60%, #c3e3fb 0%);
}
.crayon8 {
	font-weight: bold;
	background: linear-gradient(transparent 60%, #b2f1d1 0%);
}
.crayon9 {
	font-weight: bold;
	background: linear-gradient(transparent 60%, #c6e3b6 0%);
}
.crayon10 {
	font-weight: bold;
	background: linear-gradient(transparent 60%, #fecd7c1 0%);
}
.crayon11 {
	font-weight: bold;
	background: linear-gradient(transparent 60%, #dcdcd9 0%);
}

/* blockquote(引用) */
.quoteArea { 
	color: #333;
	padding: 3em 3.5em;
	position: relative;
	width:80%;
	border-left:none;
	background-color:#ddd;
	border-radius:10px;
	margin:0 0 10px;
}
.quoteArea p{
	font-size:90%;
}
.quoteArea::before, .quoteArea::after {
	background-color: #FFF;
	border-radius: 50%;
	color: #666;
	line-height: 3.0em;
	height: 3.0;
	position: absolute;
	text-align: center;
	width: 3.0em;
}
.quoteArea::before {
	content: url("http://morobrand.net/mororeco/wp/wp-content/themes/hiero_remake/images/b-before.png");
	left: 5px;
	top: 5px;
}
.quoteArea::after {
	content: url("http://morobrand.net/mororeco/wp/wp-content/themes/hiero_remake/images/b-after.png");
	bottom: 5px;
	right: 5px;
}


/* カスタムヘッダーイメージ */
.mainImage {
	width: 980px;
	margin: 0 auto;
	padding: 0;
}
.mainImage img {
	border-radius:3px;
}

@media screen and (max-width: 960px) {
	.mainImage {
		width: 100%;
	}
}

.entry-content img.mainImg{
	box-shadow: 0 0 5px #666; 
	border: 1px solid #FFF;
	margin-bottom: 15px;
}

/* パンくずリスト */

.bread-list{
	font-size: 85%;
}

/* もしもリンク */
.entry-content #moshimo_link a{
 display:inline;
 margin-right:10px;
}

/* pre */
.precode{
	background: #666666;
	color: #FFF;
	padding: 5px 10px;
	border-radius: 3px;
	width:96%;
	margin: 10px auto 0;
	line-height: 1.6em;
	font-size:80%;
	letter-spacing: 0.075em;
}

/* MW WP Form */
.form-mail{
	width: 60%;
}
.form_sub{
	font-size: 26px;
	font-weight: bold; 
	margin-bottom: 30px;
}
.fonm_waku{
	background: #f4f4f4;
	padding: 30px 30px 20px;
}
.form_btn a{
	padding: 15px 30px;
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  #header,#navi{
	display: none;
}
}

/*480px以下*/
@media screen and (max-width: 480px){


.list{
	flex-wrap: wrap;
}
.ect-entry-card{
    width: 100%;
}
.entry-card-content {
    display: block;
    width: 100%;
}
.entry-card-thumb {
    width: 100%;
}
h2.entry-card-title{
	font-size:1.0em;
}
.e-card-title{
	height: 95px;
}
}