@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    0.0.5
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

.sidebar h3 {
	font-size: 16px; /*文字サイズを小さく*/
    letter-spacing: 2px; /*文字の間隔を少し広く*/
	padding: 5px; /*余白をなしに*/
}

.article h1 {
  position: relative;
  padding: .5em .75em;
  background-color: #0000ff;
  border-radius: 15px;
  color: #ffffff;
	
}
.article h1::after {
  position: absolute;
  top: 100%;
  left: 30px;
  content: '';
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top: 15px solid #0000ff;
}

.article h2 {
    color: #0000ff;
    padding: .8em 1em;
    margin-top: 40px;
    background: #444d53;
    border-top: 4px solid #0000ff;
    border-bottom: 4px solid #0000ff;
}
.article h3 {
    color: #444d53;
    padding: .5em 0;
    margin-top: 40px;
    border-top: 3px solid #444d53;
    border-bottom: 3px solid #444d53;
}
.article h4 {
    border: none;
    padding: 0;
}
.article h5 {
    border: none;
    padding: 0;
}
.article h6 {
    border: none;
    padding: 0;
}

ul.wpp-list li {
    border-bottom: 1px dashed #000000;/*記事間の点線と色*/
    position: relative;/*相対位置*/
}

ul.wpp-list li img {/*アイキャッチ画像*/
    margin: 10px 10px 10px 0px;/*画像の余白*/
    padding: 3px;/*画像の位置*/
}
 
ul.wpp-list li a.wpp-post-title {/*記事タイトル*/
    display: block;/*ブロック形式で表示*/
    font-size: 14px;/*文字サイズ*/
    color: #0000ff;/*文字色*/
	font-weight: bold;/*太字に*/
    padding: 1px;/*タイトル位置*/
}

ul.wpp-list li:before {/*ランキングカウンター全体*/
    content: counter(wpp-count);/*カウンターを表示*/
    display: block;/*ブロック形式で表示*/
    position: absolute;/*絶対位置*/
    font-size: 12px;/*数字サイズ*/
    font-weight: bold;/*数字を太字に*/
    color: #fff;/*数字の色*/
    background-color: #00f;/*背景色*/
    padding: 5px 30px;/*縦と横の幅*/
    border-radius: 6px;/*角の丸み*/
    left: 0;/*右からの位置*/
    top: 0;/*下からの位置*/
    opacity: 1;/*透明度*/
    z-index: 8000;/*重なりの順序*/
}

ul.wpp-list li {
    counter-increment: wpp-count;/*カウント数*/
}

.widget_recent_entries ul li a,
.widget_categories ul li a,
.widget_archive ul li a,
.widget_pages ul li a,
.widget_meta ul li a,
.widget_rss ul li a,
.widget_nav_menu ul li a{
	padding:0 10px 0;
	margin:10px;
	line-height:1.3;
}

.widget-entry-card-date {
	display: block;
	padding-top: 0.2em;
	text-align: right;
        position: absolute;
        right: 0;
        bottom: 0;
}

.widget-entry-card-update-date {
  display: none;
}

/**カルーセル左右矢印の色・大きさ**/
.carousel .slick-arrow:before{
color:#0000ff;
font-size:28px;
}

/**カルーセル記事タイトル文字**/
.carousel-entry-card-title{
margin-top:10px;
color:#0000ff;
font-size:13px;
font-weight:bold;
max-height: 5.2em;
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
ul.wpp-list li {
    border-bottom: 1px dashed #000000;/*記事間の点線と色*/
    position: relative;/*相対位置*/
}

ul.wpp-list li img {/*アイキャッチ画像*/
    margin: 10px 10px 10px 0px;/*画像の余白*/
    padding: 3px;/*画像の位置*/
}
 
ul.wpp-list li a.wpp-post-title {/*記事タイトル*/
    display: block;/*ブロック形式で表示*/
    font-size: 14px;/*文字サイズ*/
    color: #0000ff;/*文字色*/
	font-weight: bold;/*太字に*/
    padding: 1px;/*タイトル位置*/
}
 

/*1030px以下*/
@media screen and (max-width: 1030px){
  /*必要ならばここにコードを書く*/
ul.wpp-list li {
    border-bottom: 1px dashed #000000;/*記事間の点線と色*/
    position: relative;/*相対位置*/
}

ul.wpp-list li img {/*アイキャッチ画像*/
    margin: 10px 10px 10px 0px;/*画像の余白*/
    padding: 3px;/*画像の位置*/
}
 
ul.wpp-list li a.wpp-post-title {/*記事タイトル*/
    display: block;/*ブロック形式で表示*/
    font-size: 14px;/*文字サイズ*/
    color: #0000ff;/*文字色*/
	font-weight: bold;/*太字に*/
    padding: 1px;/*タイトル位置*/
}
}
 
/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
ul.wpp-list li {
    border-bottom: 1px dashed #000000;/*記事間の点線と色*/
    position: relative;/*相対位置*/
}

ul.wpp-list li img {/*アイキャッチ画像*/
    margin: 10px 10px 10px 0px;/*画像の余白*/
    padding: 3px;/*画像の位置*/
}
 
ul.wpp-list li a.wpp-post-title {/*記事タイトル*/
    display: block;/*ブロック形式で表示*/
    font-size: 14px;/*文字サイズ*/
    color: #0000ff;/*文字色*/
	font-weight: bold;/*太字に*/
    padding: 1px;/*タイトル位置*/
}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
ul.wpp-list li {
    border-bottom: 1px dashed #000000;/*記事間の点線と色*/
    position: relative;/*相対位置*/
}
}

ul.wpp-list li img {/*アイキャッチ画像*/
    margin: 10px 10px 10px 0px;/*画像の余白*/
    padding: 3px;/*画像の位置*/
}
 
ul.wpp-list li a.wpp-post-title {/*記事タイトル*/
    display: block;/*ブロック形式で表示*/
    font-size: 14px;/*文字サイズ*/
    color: #0000ff;/*文字色*/
	font-weight: bold;/*太字に*/
    padding: 12px;/*タイトル位置*/
}
}

/*YARPP設定*/
ul.related-post{
	width:100%;
	overflow:hidden;
	margin:20px 0;
	height:100%;
	display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
 
ul.related-post li {
	float: left;
	width:22%;
	display: block;
	margin-right: 4%;
	margin-bottom: 20px;
}
 
ul.related-post li:nth-child(4n) {
	margin-right: 0;
}
 
ul.related-post li a:hover{
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}
 
ul.related-post li p.title{
	line-height: 1.8;
    font-size: 95%;
}
 
ul.related-post li p.title a{
	text-decoration: none;
}
 
ul.related-post li img{
	width: 100%;
}
 
@media (max-width: 599px) {
/* small devices */
 
ul.related-post li {
	width:48%;
}
 
ul.related-post li:nth-child(2n) {
	margin-right: 0;
}
 
}