@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*Googleフォントを読み込む*/
@import url(https://fonts.googleapis.com/css?family=M+PLUS+1p:400,700|Noto+Sans+JP:400,700&display=swap);
body{
	font-family: "Noto Sans JP","游ゴシック","YuGothic","ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",sans-serif !important;
	/*font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro",sans-serif !important;*/
	letter-spacing: -1px;
}

.site-name-text{
	font-size: 36px;
	font-family: 'M PLUS 1p', sans-serif;
}

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

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

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

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


/************************************
** デザインカスタマイズ
************************************/
 /*----- AdSense広告フォント -----*/
.ad-label {
font-size: 0.8em;
color: #888;
}
/*---- カテゴリの文字の色----*/
.cat-label {
color:#dddddd;
}
.cat-link {
color:#dddddd;
}

/*---- Hタグ -----*/
.article h1 {
	font-size: 160%;
	padding: 0em 0em;
	font-family: 'M PLUS 1p', sans-serif;
}

.article h2 {
	background: #315931;
	font-size: 150%;
	color: #f0f0f0;/*文字色*/
	padding: 0.4em 0.5em;/*上下の余白*/
	border-top: solid 3px #36864e;/*上線*/
	border-bottom: solid 3px #36864e;/*下線*/
}

.article h3 {
    border: none;
	font-size: 130%;
	padding: 0.25em 0.5em;/*上下 左右の余白*/
	color: #36864e;/*文字色*/
	background: transparent;/*背景透明に*/
	border-left: solid 15px #36864e;/*左線*/
}


/************************************
** アプリーチ
************************************/
.appreach {
  text-align: left;
  padding: 10px;
  border: 1px solid #7C7C7C;
  overflow: hidden;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach a:after {
  display: none;
}
.appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 3% 0 0 !important;
  width: 25% !important;
  height: auto !important;
  max-width: 120px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
}
.appreach__detail:after {
  content: "";
  display: block;
  clear: both;
}
.appreach__name {
  font-size: 16px;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 8px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}
/*
 * ページネーション変更
 */
.pagination-next, .next, .prev, .pager-prev-next{display: none;}
.pager-numbers a {text-decoration: none;}
.page-numbers{
  border: none !important;
  border-radius: 50%;
  font-family: sans-serif;
  font-size: 80%;
  color: #666 !important;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
  transition: all .1s ease;
  background-color: #ffffff;
}
.pagination a.page-numbers:hover,.pager-numbers a:hover .page-numbers{
  background-color: #f44336;
  color: #fff !important;
}
.pagination .current, .pager-links .current{
  background-color: #ccc;
  color: #fff;
}

/*
 * 箇条書き変更（番号なし）
 */
.entry-content ul {
  border: solid 2px #36864e;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
}

.entry-content ul li {
  line-height: 1.2;
  padding: 0.5em 0;
  list-style-type: none!important;/*ポチ消す*/
}

.entry-content ul li:before {
  font-family: FontAwesome;
  content: "\f00c";
  position: absolute;
  left : 1em; /*左端からのアイコンまで*/
  color: #36864e; /*アイコン色*/
}

/*
 * 内部ブログカードを変更
 */
.blogcard {
  padding: 1rem;
  color: #666;
  position: relative;
  border-color: #68d6cb !important;
}
a.blogcard-wrap:hover{
  background-color: transparent!important;
  opacity: 0.8;
}
a.blogcard-wrap:hover img.blogcard-thumb-image{
  transform: scale(1.1);
  transition: .3s;
}
.blogcard-thumbnail {
  line-height: 0;
  margin-right: 1rem;
  overflow: hidden;
}
.blogcard-title{
  margin-bottom: .5rem;
}
.blogcard-snipet{
  font-size: 70%;
  line-height: 1.7;
  padding-right: 10%;
}
@media screen and (max-width: 480px){
  .blogcard-thumbnail{
    width: 40%;
  }
  .blogcard-snipet{
    display: none;
  }
}
.internal-blogcard-footer{
  display: none;
}
.blogcard::before{
  content: 'あわせて読みたい';
  position: absolute;
  top: -.8rem;
  left: auto;
  font-size: 60%;
  background-color: #58c6bb;
  padding: .6em 1em;
  font-weight: bold;
  color: #fff;
  border-radius: 2px;
}
.internal-blogcard::after{
  content: '続きを読む \00bb';
  position: absolute;
  bottom: .5rem;
  right: 1rem;
  font-size: 80%;
  background-color: #dfc232;
  padding: .4em 3em;
  font-weight: bold;
  color: #fff;
  border-radius: 2px;
}
/*
 * 検索ボックスをまるく
 */
.search-box{
  margin: 1em;
}
.search-edit{
  height: 40px;
  border-radius: 40px;
}
.search-submit{
  line-height: 0;
  top: 0;
  bottom: 0;
}
.search-edit:focus{
  outline: none;
  border-color: #e4ab3d;
}

/*
 * 目次にアイコン追加
 */
.toc-title:before{
  font-family:FontAwesome;
  content:"\f0ca";
  font-size:18px;
  margin-right:5px;
  color:#FFF;
  background-color:#36864e;
  border-radius:50%;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  padding:14px;
}


/*画像を画面幅いっぱいに*/

.entry-content {
    overflow: hidden;
    margin-left: -10px;
    margin-right: -10px;    
}
.entry-content p:not(.max-img),#toc_container {
    margin-left: 10px;
    margin-right: 10px;
}
.entry-content h1,.entry-content h2,.entry-content h3 {
    margin-left: 0px;
    margin-right: 0px;
}
#kanren,.tagst,div#breadcrumb,.blogbox {
    padding-left: 10px;
    padding-right: 10px;
}

@media screen and (max-width: 500px) {
	main.main {
		padding: 3%;
	}
	.entry-content img {
		margin-left: -3%;
		max-width: 106%;
	}
}

@media screen and (max-width: 768px) {
	.max-img {
		margin: 0;
	}
}

/* jQuery Archive List Widget */

/* 月別アーカイブ展開表示 */
ul.jaw_widget{
	font-size:14px;
	line-height: 0em;
}
a.jaw_months{
	margin-left:1px;
}
a.jaw_years:before {
    font-family: FontAwesome;
	content: "\f067"; /* +のアイコン */
    margin-right: 1px;
    display: inline-block;
    color: #36864e; /* アイコンの色 */
}
.expanded a.jaw_years:before {
	font-family: FontAwesome;
	content: "\f068"; /* －のアイコン */
    display: inline-block;
    color: #36864e; /* アイコンの色 */
}