@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
body {
  /* フォントの種類 */
  font-family: verdana,"游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
}

/*
 * 
 * サイドバー ：カテゴリー
 * 
 */
.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 {
    padding: 2px;
    display: inline;
    font-size: 13px;
}
.date-tags {
    line-height: 1.3;
    text-align: left;
	margin-bottom: 0px;
}

/* サイドバーカテゴリー */
.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: 3px;
	text-align:left;
}
.sidebar h3:before{
	content: "";
	position: absolute;
	top: 100%;
	left: 10%;
 	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #efefef;
}
.sidebar h3 p {
	margin: 0;
	padding: 0;
}
/*---吹き出し end-----*/

/*
 * 
 *  関連記事一覧
 * 
 */
.rect-mini-card .related-entry-card-content {
    padding-top: 10px;
}
.related-entry-card .cat-label {
    font-size: 13px;
}
.related-entry-heading {
	background-color:#fff2f2;
	padding : 10px;
}
/* 
 * 
 * 記事一覧画面
 * 
 */
/* カテゴリー */
.cat-label {
    position: static;
    border: 0px;
    font-size: 13px;
    color: #000;
    background: none;
    padding: 2px;
    max-width: 80%;
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
	line-height: 1.2;
}
/* サムネイル画像 丸く*/
.card-thumb img {
	border-radius : 5%;
	border:1px #000 dotted;
}
.entry-card-content {
    margin-left: 22%;
	 padding-top: 15px;
}
.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リンクのスタイル 
 * 
 */
.amakuri-default-comment{
	border-radius: 10px;
	font-size: 13px;
	border: 1px #000 dotted;
	text-align: left;
	line-height: 1.5em;
	padding: 15px;
	margin: 5px 5px 10px 5px;
	overflow: hidden;
	_zoom: 1;
}
.product-item-box {
    width: 90%;
	 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;
    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 {
	color: #fff;
	font-size:16px;
	position: absolute;
	top: 0;
	left: 5px;
	text-shadow: #ff0000 2px 2px 0
}

/*
 * 
 *  アーカイブウィジェットのスタイル
 * 
 */
.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){
  /*必要ならばここにコードを書く*/

}

/*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;
}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.ect-entry-card .card-content, .rect-entry-card .card-content, .ect-big-card-first .card-content {
		padding: 6px;
    line-height: 17px;
    margin-left: 31%;
	}
	.card-content img{
	   padding : 10px;
	}
	.entry-title, .archive-title {
		font-size: 20px;
		margin: 5px 0;
		line-height: 0;
		padding : 3px;
	}
	.entry-card-title {
		font-size: 15px;
		margin: 0px 0 5px -3px;
		line-height: 1.3;
		padding : 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;
		box-shadow: 0px 1px 15px rgba(0,0,0,0.1);
	}
	#navi ul ul{
	  top: 30px;  /*サブメニュー？が画面上部とくっついてしまう対策*/
	}
	#header {
	  margin-top: 70px; /*ヘッダーの上に空白を作る*/
	}
	.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;
}

}