@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/************************************
  フロントページのカルーセルをカスタマイズ
************************************/
.carousel-content::before {
    content: "よく読まれている記事";
	margin-left: 8px;
    margin-top: 5px;
	padding: 1px;
	font-size: 12px;
	border-bottom: dotted 1px;
}
.carousel-content {
	margin: auto;
    margin-top: 5px;
	padding: 10px;
	width: 70%;
	border-radius: 10px;
	background: #F5F5F5;
    color: #555;
	font-family: "Sawarabi Gothic";
}
.carousel-entry-card-thumb {
    padding-top: 7px;
}
.carousel .cat-label {
  display: none;/*カテゴリーを消す*/
}

.ad-area {
    overflow: visible;
}

/*
 * 
 * サイドバー ：カテゴリー
 * 
 */
.widget_categories ul li ul li a .post-count {
  display: contents;
}
.widget_categories ul li ul li a .post-count:before{
	content: ' （ ';
}
.widget_categories ul li ul li a .post-count:after{
	content: ' ）';
}
.widget_categories ul li a .post-count:after{
	white-space: pre-wrap;
	font-family: FontAwesome;
	content: '  '"\f0f6"'  ';
}

/* 投稿日のスタイル */
 .post-date, .post-comment-count {
    padding: 2px;
    display: inline;
    font-size: 13px;
}
.date-tags {
    display: unset;
}

/* サイドバーカテゴリー */
.widget_categories ul li a{
    color: #333;
    text-decoration: none;
		padding: 5px 0;
    display: block;
    padding-right: 4px;
    padding-left: 4px;
	 border-bottom: 1px #000 dotted;
}

/* サイドバー タイトル 装飾*/
.sidebar h3 {
	font-size: 16px; /*文字サイズを小さく*/
	letter-spacing: 2px; /*文字の間隔を少し広く*/
	position: relative;
	display: inline-block;
 	margin-bottom: 20px;
	/*padding: 10px;*/
	width: 100%;
 	color: #000;
	background: #efefef;
	border-radius: 38px;
	text-align:center;
}
.sidebar h3:before{
	content: "";
	position: absolute;
	top: 100%;
	left: 20%;
 	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #efefef;
}
.sidebar h3 p {
	margin: 0;
	padding: 0px;
}
/*---吹き出し end-----*/

/*
 * 
 *  関連記事一覧
 * 
 */
.rect-mini-card .related-entry-card-content {
    padding-top: 4px;
}

.related-entry-heading {
	background-color:#fff2f2;
	padding : 10px;
}
/* 
 * 
 * 記事一覧画面
 * 
 */
/* カテゴリー */
.cat-label {
	top: -0.7em;
	left: 0.5em;
	background-color: #ffff00;
	color: #000;
}
.entry-card-meta, .related-entry-card-meta {
     bottom: auto;
    position: absolute;
    right: auto;
}
/* サムネイル画像 丸く*/
.card-thumb img {
	border-radius : 5%;
	border:1px #000 dotted;
}
.entry-card-content {
    margin-left: 22%;
	 padding-top: 10px;
}
.entry-card-thumb {
    width: 20%;
}
.a-wrap {
    text-decoration: none;
    display: block;
    color: #333;
    padding: 10px;
    margin-bottom: 5px;
}
.entry-card-title, .related-entry-card-title {
    font-size: 17px;
    margin: 0px 0 5px -2px;
    line-height: 1.2;
    /* margin-bottom: 5px; */
    font-weight: bold;
}
.a-wrap:hover {
  background-color: transparent;
  transition: none;
  color: #333;
}

/*
 * 
 *  投稿ページ
 * 
 */
/* カテゴリー */
.cat-link {
    color: #000;
    text-decoration: none;
    display: inline-block;
    margin-right: 5px;
    padding: 2px 6px;
    font-size: 12px;
    background-color: #fff;
    border-radius: 2px;
    word-break: break-all;
}

/*
 * 
 * 前の記事・後の記事
 * 
 */
.pager-post-navi a figure {
    min-width: 70px;
    max-width: 70px;
}

.pager-post-navi a.prev-post .prev-post-title {
    font-weight:bold;
}
.pager-post-navi a.next-post .next-post-title {
  font-weight:bold;
}

/*
 * 
 *  メニュー
 * 
 */
/* メニューの背景色 */
#header-container .navi, #navi .navi-in>.menu-header .sub-menu {
    background-color: #efefef;
}
div.sub-caption {
    opacity: 1;
}
.navi-in > ul li {
    display: block;
    /*width: 176px;*/
    width: 10%;
    height: 70px;
    padding: 10px 0;
}
.caption-wrap {
		height: 50px;
}

/*
 * 
 *  吹き出し見出し
 * 
 */
.balloon1 {
 	position: relative;
	display: inline-block;
 	margin: 1.5em 0;
   padding: 10px 0px;
	width: 100%;
 	color: #555;
	font-size: 15px;
	font-weight:bold;
	background: #e0edff;
	text-align:center;
}
.balloon1:before{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
 	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #e0edff;
}
.balloon1 p {
	margin: 0;
	padding: 0;
}
.balloon2 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 20px;
  width: 100%;
  color: #555;
  font-size: 15px;
  font-weight:bold;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
	border-radius: 15px;
	text-align:center;
}
.balloon2:before{
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}
.balloon2:after{
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #555;
  z-index: 1;
}
.balloon2 p {
	margin: 0;
	padding: 0;
}
.balloon3 {
 	position: relative;
	display: inline-block;
 	margin: 15px 0;
   padding: 10px 0px;
	width: 260px;
 	color: #606060;
	font-size: 14px;
	font-weight:bold;
	background: #ededed;
	text-align:center;
	border-radius: 38px;
}
.balloon3:before{
	content: "";
	position: absolute;
	top: 100%;
	left: 20%;
 	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #ededed;
}
.balloon3 p {
	margin: 0;
	padding: 0;
}
/* 
 * 
 * Amazonリンクのスタイル 
 * 
 */
.product-item-box {
    width: 100%;
	border-radius: 10px;
    border:1px #000 dotted;
}
/*
 * 
 * コメント表示
 * 
 */
/*コメント表示_アバター*/
.commets-list .avatar {
	float: left;
	margin-right:15px;
	border-radius:5%;	
}
/*コメント表示_返信ボタン*/
.commets-list .reply {
    text-align: left;
    font-size: 0.8em;
}
.commets-list .comment-body, .commets-list .st-comment-body {
    margin-bottom: 2em;
}
/*サイドバー最近のコメント*/
.recent-comment-info{
	font-size: 15px;
	margin-bottom:10px;
}
.avatar, .avatar-42, .photo img{
	border-radius:5%;
}
.recent-comment-content {
    position: relative;
    background: #fff;
    border: 1px solid #ccc;
    padding: 6px;
    margin-top: 4px;
    font-size: 0.8em;
    border-radius: 5px;
}
.recent-comment-article::before {
   font-family: FontAwesome;
	content: "\f0f6  [";
	padding-right: 2px;
}
.recent-comment-article::after {
   font-family: FontAwesome;
	content: "]";
	padding-left: 2px;
}
.recent-comment-article{
	font-size:0.7em;
}

/*
 * 
 * 記事タイトル
 * 
 */
.entry-title, .archive-title {
    font-size: 26px;
    margin: 5px 0 0px 0;
    line-height: 1.3;
}


/*
 * 
 * 広告表示エリア
 * 
.ad-area {
	text-align: center;
	margin-bottom: 0.8em;
	font-size:12px;
	background-color: #f7f7f7;
	background-image: linear-gradient(to top right, #fff 0%, #fff 25%, transparent 25%, transparent 50%, #fff 50%, #fff 75%, transparent 75%, transparent 100%);
	background-size: 6px 6px;
}
*/
/*
 * 
 * 本文下リンク画像
 * 
 */
.kadomaru img{
	border-radius:5px;
	box-shadow: 3px 3px 3px #444;
}
.yokonarabi {
	float: left;
	margin-right: 15px;
	position:relative;
}
.new {
	position: relative;
}
.new p{
	color: #ff0000;
	font-size:15px;
	position: absolute;
	font-weight:bold;
	text-shadow: 1px 1px 0 #fff,
               -1px 1px 0 #fff,
               1px -1px 0 #fff,
               -1px -1px 0 #fff;
	top: -28px;
	left: 28px;
	font-family:Courier;
}

/*
 * 
 *  アーカイブウィジェットのスタイル
 * 
 */
.widget_archive ul li a{
	padding: 2px 0 2px 5px;
}
a.jaw_years span.jaw_symbol:before{
	white-space: pre-wrap;
	font-family: FontAwesome;
	content:"\f073"' ';
	font-size: 12px;
}
a.jaw_months span.jaw_symbol:before{
	white-space: pre-wrap;
	content:'-- ';
}
/*a.jaw_years:after {
    content: '年';
}*/
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
	.entry-card-content {
		margin-left: 33%;
	}
	.entry-card-thumb {
		width: 30%;
	}
}

/*1030px以下*/
@media screen and (max-width: 1030px){
  /*必要ならばここにコードを書く*/

}

@media screen and (max-width: 834px){
	#navi .navi-in > .menu-mobile li {
    width: 15%;
    height: unset;
    line-height: 40px;
}
}
	
/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/

	#navi .navi-in > .menu-mobile li {
		width: 16%;
		height: 60px;
		line-height: 60px;
		padding: 6px 0;
	}
	#navi .navi-in > .menu-mobile {
    display: flex;
    height: 60px;
}
	.caption-wrap {
		height: 50px;
	}
	.rect-mini-card .related-entry-card-content {
		margin-left: 33%;
		line-height: 16px;
	}
	main.main{
    margin: 0px 0;
	/*letter-spacing:0.1em;*/
}
.new p{
	left: 40px;
}

}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.ect-entry-card .card-content, .rect-entry-card .card-content, .ect-big-card-first .card-content {
	  padding: 0 6px;
    line-height: 17px;
    margin-left: 31%;
	}
	.card-content img{
	   padding : 10px;
	}
	.entry-title, .archive-title {
		font-size: 22px;
		margin: 0px;
		line-height: 0;
		padding : 5px 0 0 3px;
	}
	.entry-card-title {
		font-size: 18px;
		margin: 0px 0 0px -3px;
		line-height: 1.3;
		padding : 2px 0 0 3px;
	}

	.entry-card-content {
		margin-left: 35%;
	}
	.entry-card-thumb {
		width: 30%;
	}

	div.sub-caption {
    	font-size: 10px;
    	line-height: 17px;
		font-weight: 800;
		color: #888;
}
	.logo-image {
		padding: 0px 0;
	}
	#header-container .navi, #navi .navi-in {
		background-color: #fff;
		left: 0;  /*左端が切れてしまうのでその対策*/
		top: 0px;  /*メニューバーを画面上部へ*/
		width: 100%;
		position: fixed; 
		z-index: 10;
		border-bottom: 1px solid #f2f2f2;
		/*box-shadow: 0px 1px 15px rgba(0,0,0,0.1);*/
	}
	#navi ul ul{
	  top: 30px;  /*サブメニュー？が画面上部とくっついてしまう対策*/
	}
	#header {
	  margin-top: 60px; /*ヘッダーの上に空白を作る*/
	}
	.breadcrumb {
     margin-top: 0px;
	}
	.item-label img{
		width :60%;
	}
	.caption-wrap {
		height: 40px;
	}
		#navi .navi-in > .menu-mobile li {
		width: 16%;
		height: 50px;
		line-height: 50px;
	}
	#navi .navi-in > .menu-mobile {
    display: flex;
    height: 50px;
}
.new p{
	left: 28px;
}
	.date-tags {
		padding-left: 3px;
	}



}