@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/



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

/*PC対応CSS*/
/*1カラム時の幅*/
@media screen and (min-width: 1024px) {
.no-sidebar .content .main{
 width: 800px;
 margin:0 auto;
}
}



 /* スマホ用のCSS */
/*モバイルの余白をなくすコード*/
@media only screen and (max-device-width: 480px) {
#container {
    overflow: hidden;
}
}

/*メインカラムサイドバー背景色*/
.header-container,
.main, 
.sidebar,
.footer {
background-color: #fffcfb;
}


/* グローバルナビメニュースクロール */

    ul.menu-header{
        overflow-x: auto;
        overflow-y: hidden;
        display: flex !important;
        flex-wrap: nowrap;
        font-size: 14px;
        justify-content: flex-start;
        padding: 0 1em;
        position: relative;
    }
    ul.menu-header > li{
        padding-right: 1em;
        white-space: nowrap;
    }
    ul.menu-header　.item-label{
        white-space: nowrap;
        font-size: 14px;
    }

/* グローバルナビカスタム*/

#header-container .navi-in > ul li {
   height: auto;
   font-weight: 600;
   line-height:1.3;
}

#header-container #navi{
   background:#4d637c; /* 背景色 */
}
#header-container #navi a{
   color:#fff; /* 文字色 */
   padding:0.8em 1em;
}

#header-container #navi a:hover{
   color:#4d637c; /* マウスホバー時の文字色 */
   background:#f6ede8; /* 背景色 */
}


/* カード */
.a-wrap {
	padding: 0px;
	margin-top: 11px;
	border-radius: 8px;
}


/* 全体hover追記 */
.a-wrap:hover {
    background-color: #f6ede8;
	transform: translate(0px,-5px);
}


/* ⑥エントリーカード - 上部 */
.entry-card-thumb-image {
	border-radius: 8px 8px 0px 0px;
}

/* ⑦エントリーカード - 下部 */
.entry-card-content {
	padding: 3px 15px 30px 15px;
}

/* ⑧エントリーカード - 投稿日・更新日 */
.post-date, .post-update {
	padding: 0px 10px 7px 0px;
}


/* ⑩エントリーカードのカテゴリーを消す */
.entry-card .cat-label{
	display: none;
}


/* ⑪もっと見るボタン */
.list-more-button {
	font-size: 16px !important;
	transition: 0.3s;
	color: #ffffff; 
	padding: 4px 18px !important;
	background-color: #4d637c !important;
	border: none;
}

/* ⑫もっと見るボタン (hover)*/
@media screen and (min-width: 980px) {
	.list-more-button:hover {
		color: #ffffff;
		background-color: #b26573 !important;
		transform: translate(0px,-5px);
	}
}

/* ⑬現在ページ */
.page-numbers {
  color: #b26573;
  border: none;
  border-radius: 50%;
}
.pagination .current {
  background-color: #b26573;
  color: #fff;
}
.page-numbers.dots {
  opacity: 1;
  background: none;
}
.pagination a:hover {
  background-color: #fffcfb;
  border: none;
  color: #b26573;
  transform: translate(0px,-5px);
}

/* ⑭次のページリンクを消す */
.pagination-next {
	display: none;
}



/* 引用カスタム＝＝＝ここから↓↓ */
blockquote{
  background: #f6ede8;/*背景色*/
  border: none;
}
blockquote:before{ /*上の引用アイコン*/
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: '\f10d';
  font-weight: 900;
  top: 5px;/*上からの距離*/
  left: 5px;/*左からの距離*/
  color: #b26573;
  font-size: 1em;
}
blockquote:after{ /*下の引用アイコン*/
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: '\f10e';
  font-weight: 900;
  bottom: 15px;/*下からの距離*/
  right: 5px;/*右からの距離*/
  color: #b26573;
  font-size: 1em;
}
/* 引用カスタム＝＝＝ここまで↑↑ */


/************************************
** SNS ボタンの色をまとめて変更する
************************************/

/*ボタンカラーが「ブランドカラー」の場合*/
.bc-brand-color[class*="sns-"] a[class*="-button"] {
	background-color: #5e6e80; /*背景の色*/
	color: #fffcfb; /*アイコン・キャプション等の色 */
}

/*ボタンカラーが「ブランドカラー（白抜き）」の場合*/
.bc-brand-color-white[class*="sns-"] a[class*="-button"] {
	border-color: #0d273e;/*線の色*/
	color: #0d273e; /*アイコン・キャプション等の色*/
}

/*ボタンカラーが「モノクロ」の場合*/
.bc-monochrome[class*="sns-"] a[class*="-button"] {
	background-color: #5e6e80; /*背景の色*/
	color: #fffcfb; /*アイコン・キャプション等の色 */
}

/* インデックスカード タイトル文字色 */
.entry-card-title,
.e-card-info > span{
color: #0d273e;
}

/*ブログカードタイトル文字色 */
/*人気記事のタイトル文字色 */
/* 関連記事 タイトル文字色 */
.related-entry-card-title,.blogcard-title, .popular-entry-card-title,.e-card-info > span, .entry-card-snippet,.blogcard-snippet{
color: #5e6e80;
}

/*前へ次へのタイトル文字色*/
.prev-post .prev-post-title {
color: #5e6e80;
}
.next-post .next-post-title {
 color: #5e6e80;
}


/* 見出しのデザインリセット */
/*H2 */
.entry-content h2{
border:none;
background:none;
padding: 0;
}

/* H3 */
.entry-content h3{
border:none;
background:none;
padding: 0;
}

/* H4 */
.entry-content h4{
border:none;
background:none;
padding: 0;
}

/* H5 */
.entry-content h5{
border:none;
background:none;
padding: 0;
}

/* H6 */
.entry-content h6{
border:none;
background:none;
padding: 0;
}

/* 見出しのデザイン設定 */

/*H1*/
.entry-content h1 {
  color: #4d637c;/*文字色*/
  padding: 0.5em 0;/*上下の余白*/
  border-top: solid 3px #4d637c;/*上線*/
  border-bottom: solid 3px #4d637c;/*下線*/
}

/*H2*/
.entry-content h2{
  background: #4d637c; /*背景色*/
  padding: 0.5em;/*文字周りの余白*/
  color: white;/*文字を白に*/
  border-radius: 0.5em;/*角の丸み*/
}

/*H3*/
.entry-content h3 {
  padding: 0.5em;/*文字周りの余白*/
  color: #4d637c;/*文字色*/
  background: #f6ede8;/*背景色*/
  border-left: solid 5px #4d637c;/*左線（実線 太さ 色）*/
}

/*H4*/
.entry-content h4 {
  position: relative;
  padding: 0.5em;/* 吹き出しの大きさ */
  border-radius: 0.5em;
  color: #fffcfb;/*文字色*/
  background: #4d637c;
  left: 9px;
  padding-left: 0.8em;/*左へ*/
}

h4:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #4d637c;
  width: 0;
  height: 0;
}




/*H5*/
.entry-content h5{
color: #4d637c; /* 文字色 */
font-size: 1em; /* 文字サイズ */
padding: 10px;
padding-left: 1.2em;/*左へ*/
border-bottom: dotted 3px #eac1af;/* 下側に点線・色*/
}


/*H6*/
.entry-content h6 {
  position: relative;/*相対位置*/
  padding-left: 2.2em;/*アイコン分のスペース*/
  line-height: 1.4;/*行高*/
  color: #7a4a37;/*文字色*/
}

.entry-content h6:before {
  font-family: "Font Awesome 5 Free";
  content: "\f1b0";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1.0em;/*サイズ*/
  left: 0.8em;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #b26573; /*アイコン色*/
}

/*---------------------------------
　　記事タイトル
---------------------------------*/

h1.entry-title {
  color: #7a4a37;/*文字色*/
  background: #f6ede8; /*背景色*/
  padding: 1em;/*文字周りの余白*/
}

/*---------------------------------
 　ホバー
---------------------------------*/
a:hover {
color: #b26573; 
}




/*---------------------------------
  Njimablog アプリーチ用CSS
---------------------------------*/
.appreach {
  text-align: center;
  padding: 15px;
  border: 1px solid #d3b7aa;
  border-radius: 4px;
  overflow: hidden;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach a:after {
  display: none;
}
.appreach__icon {
  border-radius: 10%;
  width: 100px;
  height: auto;
}
.appreach__detail {
  display: block;
  margin-top: 12px;
}
.appreach__name {
  color: #111;
  font-weight: bold;
}
.appreach__info {
  font-size: 11px;
  line-height: 17px;
  margin-top: 5px !important;
  color: #999;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
  color: #5e6e80;/* 本文のリンク色と揃えてもいいかも */
  text-decoration: none;
}
.appreach__links {
  margin-top: 12px;
}
.appreach__links a img {
    width: 135px;
    height: 40px;
}
.appreach__links a:nth-of-type(2) img {
    /* ボタンが2つある場合の2つ目のボタンに対してマージンを指定 */
    margin: 10px 0 0;
}

@media screen and (min-width: 360px) {/* 画面幅360px以上のとき */
.appreach__links a:nth-of-type(2) img {
    margin: 0 0 0 10px;
}  
}

@media screen and (min-width: 481px) {/* 画面幅481px以上のとき */
.appreach {
    text-align: left;
}
.appreach__icon {
    float: left;
    margin: 0 15px 0 0;
}
.appreach__detail {
    margin-top: 0;
    margin-left: 115px;
}
.appreach__links {
    margin-left: 115px;
}
}

@media screen and (min-width: 640px) {/* 画面幅640px以上のとき */
.appreach__icon {
    margin: 0 20px 0 0;
    width: 120px;
}
.appreach__detail {
    margin-left: 140px;
}
.appreach__info {
    margin-top: 6px !important;
}
.appreach__links {
    margin-top: 15px;
    margin-left: 140px;
}
}
/*アプリーチCSS終わり*/

/************************************
****　Rinker
************************************/


/* ボタン色変更 */
.amazonlink a {
	background: #73b9c0!important;
}
.rakutenlink a {
	background: #f48788!important;
}
.yahoolink a {
	background: #f3c0ad!important;
}
.mercarilink a {
	background: #aec092!important;
}
.freelink1 a {
	background: #b6aabf!important;
}
.freelink2 a {
	background: #b6aabf!important;
}


/* 商品タイトルリンク色変更 */
div.yyi-rinker-title a {
color: #7a4a37 !important;

}



/*投稿マウスオーバー*/
.post ul li 
a:hover{
background-color: #f6ede8; /*背景色*/
transition: all 0.5s ease;
}

.post a:hover{
background-color: #f6ede8; /*背景色*/
transition: all 0.5s ease;
}


/*サイドバー文字設定*/
.sidebar{
  color: #0d273e;
}

#sidebar a {
  color: #0d273e;
  text-decoration: none;
}
#sidebar a:hover {
color: #c47986;
text-decoration: none;
}

/*サイドバーの見出し設定*/

.sidebar h3{
  background-color:#4d637c;/*背景色*/
  color:#ffffff;/*文字色*/
  padding:14px 10px;
  margin:14px 0;
  border-radius: 0.5em;/*角の丸み*/
}

.sidebar h2{
  background-color:#4d637c;/*背景色*/
  color:#ffffff;/*文字色*/
  padding:14px 10px;
  margin:14px 0;
  border-radius: 0.5em;/*角の丸み*/
}

.sidebar ul li 
a:hover{
background-color: #fffcfb; /*背景色*/
transform: translate(0px,-5px);
}

.sidebar a:hover{
background-color: #fffcfb; /*背景色*/
transform: translate(0px,-5px);
}

/************************************
** ボックスメニュー
************************************/
.box-menu-icon{
  color: #b26573;
}

.box-menu{
background-color: #fffcfb;
color: #7a4a37 !important;
box-shadow: none;  /* 枠線のシャドウを消す */

}	

.box-menu:hover{
background-color: #f6ede8 !important;
box-shadow: none;  /* 枠線のシャドウを消す */
transform: translate(0px,-5px);
transition: all 0.5s ease;
}


/* プロフィール
-------------------------------------------------- */

.sidebar .author-box, #footer .author-box {
  border: 0;
  line-height: 1.4;
  position: relative;
	background-color: #f6ede8;
  padding: 20px 0 20px 0;

}

.sidebar .author-box .author-thumb, #footer .author-box .author-thumb {
  float: none;
  width: 100%;
  margin: 9px auto 0;
  height:10px;
  padding-top: 83px;
  position: relative;
}

.sidebar .author-box .author-thumb img, #footer .author-box .author-thumb img {
  border: 3px dashed #4d637c;/*点線の色*/
  width: 35%;
  padding: 6px;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -25%;
}

.sidebar .author-box .author-content, #footer .author-box .author-content {
  margin: 0;
  padding: 2em 1em 0;
}

.sidebar .author-box .author-content p, #footer .author-box .author-content p {
  font-size: .9em;
}

.sidebar .author-box .author-content .author-name a, #footer .author-box .author-content .author-name a {
  color: #0d273e !important;/*名前の文字色*/
  font-size: 1.2em;
}
.sidebar .author-box .author-content .author-name a:hover {
  color: #b26573 !important;/*名前の文字色*/
	background-color: #f6ede8; /*背景色*/
}

.sidebar .author-box .author-content .author-description p, #footer .author-box .author-content .author-description p {
  margin-top: .3em;
  line-height: 1.6;
}

#footer .author-box .author-thumb {
  padding-top: 95px;
}

.balloon1 {
  position: relative;
  display: inline-block;
  margin: 0 0 1.5em;
  padding: 7px 10px;
  min-width: 110px;
  max-width: 100%;
  color: #fff;
  font-size: 16px;
  background: #4d637c;/*吹き出しの色1*/
  border-radius: 8px;
}

.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #4d637c;/*吹き出しの色2*/
}

.balloon1 p {
  margin: 0;
  padding: 0;
}

/* プロフィール内のGoogle広告を非表示 */
.sidebar .author-box ins.adsbygoogle,
#footer .author-box ins.adsbygoogle {
  display: none !important;
}




/************************************
****　検索
************************************/
/* ①ボックス部分 */
.search-edit, .search-box input[type="text"] {
	color: #4d4435;
	border-radius: 10px;
	outline: none;
	padding-left: 20px;
	border-color: #0d273e
}

/* ②検索ボタン */
[type=submit].search-submit {
	top: 0;
	right: 0;
	height: 100%;
	padding: 8px 15px;
	background: #0d273e; 
	color: #fff; 
	font-size: 16px;
	font-weight: bold;
	border: none;
	border-radius: 0 10px 10px 0;
	transition:0.3s;
}

/* ③検索ボタン(hover) */
@media screen and (min-width: 980px) {
	[type=submit].search-submit:hover {
		color: #fff;
		background: #b26573;
	}
}


/************************************
****　サイドバープロフィールカスタム
************************************/
/*詳しくはこちらボタン 背景・文字*/
.author-description > p:nth-of-type(2)>a {
  background: #4d637c;
	color:#fff !important;
  border-radius: 10px;
  padding: 5px 20px;
  font-size:14px;
}

/*詳しくはこちらボタン 位置*/

.author-description > p:nth-of-type(2) {
   position: absolute;
   top: 80%;
   left: 50%;
   transform: translateX(-50%);
}


/*詳しくはこちらボタン　ホバー*/
@media screen and (min-width: 980px) {
	.author-description > p:nth-of-type(2) :hover{
		background-color: #b26573;
		color:#fff !important;
	}
}


/************************************
****　目次
************************************/
.toc{
    font-size: 0.9em;
    padding: 0.8em 0.8em 0.8em;
    background-color: #f6ede8; /*←背景色*/
    border: none;
}
.toc-title {
    font-size: 1.2em;
    font-weight: 600;
    color: #5e6e80;  /*←タイトルの文字色*/
    margin-top: 1em;
}
   
}
.toc-title{
font-weight:bold;
}

.toc-title:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0ca"; /*←アイコン*/
	font-weight: 900;
	font-size: 1em;
    border-radius: 50%;
	color: #fff; /*←アイコンの色*/
	background-color: #4d637c; /*←アイコンの背景色*/
    padding: 9px;
    margin-right: 3%;
}

.toc-list > li a {
font-weight: bold;
display:block;
margin-top:10px;
margin-left: 10px;
color: #0d273e ; /*←見出しの文字色*/
}
.toc-list > li a::before {
    font-family: "Font Awesome 5 Free";
    content: "\f004"; /*←見出しアイコン*/
	  color: #5e6e80; /*←見出しアイコンの色*/

margin-right: 7px;
}

.toc-list > li li a {
font-weight: normal;
font-size: 95%;
margin-top:1px ;
margin-left: 1em;
}
.toc-list > li li a::before {
content: "";
width: 10px;
height: 10px;
left: 3px;
display: inline-block;
border-radius: 50%;
background: #5e6e80;/*点の色*/
position: relative;
margin-bottom: 0.5px;
}
.toc-list > li li a:hover {
color: #b26573; 
background-color: #f6ede8;
text-decoration: none;
}
.toc-list > li a:hover {
color: #b26573; 
background-color: #f6ede8 !important;
text-decoration: none;
}

@media (max-width:880px){
.toc-list > li a {
margin-left: -10px;
}
.toc-list > li li a {
margin-left: -1.5em;
}
.toc-list > li li a::before {
left: 3px;
margin-bottom:1px;
}
#sidebar .toc {
display: none;
}	
}

.sidebar .toc-list > li li a {
margin-top:-20px ;
margin-left: 1em;
}

.sidebar .toc-list > li a {
margin-top:-3px;
}	

.sidebar .toc-list > li li a:hover {
background-color: #f6ede8; /*背景色*/
transform: none;
}

.sidebar .toc-list > li a:hover {
background-color: #f6ede8; /*背景色*/
transform: none;
}


/************************************
****　フッター
************************************/

.navi-footer-in a:hover {
	color: #4d637c !important;
}



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

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


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