@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.2
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*PCのみ表示*/
.pcpc	{ display:inline!important; }
.mbmb	{ display:none!important; }
@media screen and (max-width: 768px) {
/*タブレット、スマホのみ表示*/
.pcpc	{ display:none!important; }
.mbmb { display:inline!important; }
}
/*ページふわっと*/
body {
  -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
  animation: fadeIn 1.5s ease 0s 1 normal;
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

/*ヘッダーのサイトタイトル*/
.logo.logo-header.logo-text {
  font-family: 'Sriracha';
}

/*ナビ半透明*/
.content-in {
    justify-content: center;
}

/*ふわっと*/
.a-wrap:hover {
background-color: #ECCDB4;
transform: translateY(-2px);
box-shadow: 2px 2px 6px 0 #A9907E;
border-radius: 10px;
}

/*フッダーの背景色*/
.footer {
    background-color: antiquewhite;
}
/*フッダータイトル*/
.footer h3{
  text-align: center;
  font-family: 'Sriracha';
  color: #754B2F;
}

/*タグクラウド*/
.tag-caption .fa-tag {
  display: none;
}
.tagcloud a { 
 background: #ECCDB4;
 border: 1px solid #754B2F;
 border-radius: 20px; /*角の丸み*/
 color: #754B2F; /*文字色*/
 display: inline-block;
 padding: 3px 10px;
 text-decoration: none;
 font-size: 13px;
 margin: 2px;
 flex: 0 1 auto;
 display: flex;
 justify-content: space-between;
}
.tagcloud a .tag-caption::before {
    font-family: "Font Awesome 5 Free";
    content: "\f02b";
    padding-right: 3px;
}
.tagcloud a:hover { /*マウスホバー時*/
    background: #754B2F;
    border: 1px solid #754B2F;
    color: #ECCDB4;
    transition: 0.5s; /*アニメーションの時間*/
}
.author-box {
    background-color: #FFF;
}
/*記事*/
.main,
.main img{
  border-radius: 15px;
}
/*アイキャッチとタイトル入れ替え*/
.entry-header {
  display: flex;
  flex-direction: column;
}
.entry-header .eye-catch-wrap {
  order: -1;
}
/*記事ヘッダー表示順、アイキャッチの下*/
.entry-header .entry-title { order: 1;}
.entry-header .entry-categories-tags { order: 2;}
.entry-header .date-tags { order: 3;}
.entry-header .pr-label { order: 4;}
.entry-header .widget { order: 5;} /* ウィジェット */

/*サイドバー*/
.sidebar h3 {
  background: none;
  font-size: 18px;
  letter-spacing: 2px;
  display: inline-block;
  position: relative;
  width: 100%;
  padding: 0;
  text-align: center;
  font-family: 'Sriracha', cursive;
}
.sidebar h3::before, .sidebar h3::after {
  content: '';　
  position: absolute;
  top: 50%;
  width: 26%;
  border-top: 15px dotted #B78677;
}
.sidebar h3::before {
  left: 0;
}
.sidebar h3::after {
  right: 0;
}
/*サイドバーの色を透明にして背景色にする*/
#sidebar {
  background-color: transparent;
}
/*サイドバー目次スクロールバー*/
.widget_toc{
	overflow-y:auto;/*縦方向スクロールを設置*/
	max-height: calc(100vh - 120px); /* 目次の高さ上限*/
}
.widget_toc::-webkit-scrollbar {
	width: 10px;/*幅*/
}
.widget_toc::-webkit-scrollbar-track {
	background: transparent;/*背景色を消す*/
}
.widget_toc::-webkit-scrollbar-thumb {
	background: #fff;/*可動部のみ背景色を付ける*/
	border-radius: 10px;
}
/* 目次全体デザイン */
.toc{
    background:#F7F4EF; /* 目次全体の背景色を変える場合はここを変更 */
    border:none;
    display:block;
    border-top:5px solid;
    border-top-color:#B78677;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    padding: 20px 25px;
}
/* 目次の文字指定 */
.toc-title {
    text-align:left;
    margin: 0 20px 20px -10px;
    padding-left: -20px;
    font-size: 23px;
    font-weight: 700;
    color: #B78677; /* 目次の文字色を変える場合はここを変更 */
}
/* 目次のアイコン設定 */
.toc-title:before {
    top: 0;
    left: -45px;
    width: 50px;
    height: 50px;
    font-family: "Font Awesome 5 Free";
    content : "\f03a"; /* アイコンを変える場合はここを変更 */
    font-size:20px;
    margin-right:5px;
    color:#FFF; /* アイコンの色を変える場合はここを変更 */
    background-color:#B78677; /* アイコンの背景色を変える場合はここを変更 */
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding:14px;
}
/* 目次のデザインカスタマイズ */
.toc-content ol {
    padding: 0 0.5em;
    position: relative;
}
.toc-content ol li {
    line-height: 1.2;
    padding: 0.5em 0 0.5em 1.4em;
    border-bottom: dashed 1px silver;
    list-style-type: none!important;
}
/* 目次の各節の先頭にあるアイコンを設定 */
.toc-content ol li:before {
    font-family: "Font Awesome 5 Free";
    content: "\f138"; /* アイコンを変える場合はここを変更 */
    position: absolute;
    left : 0.5em;
    color: #B78677; /* 色を変える場合はここを変更 */
    font-weight: bold;
}
.toc-content ol li:last-of-type {
    border-bottom: none;
}
.toc-content .toc-list li {
    font-weight:700; /* h2のみ太文字に */
}
.toc-content .toc-list li li {
    font-weight:normal; /* h3以降の文字サイズを普通に */
}
/*PR*/
.pr-label-l{
  border: 1px #6b5338;
  border-radius: 15px;
  border-style: dashed;
  color: #6b5338;
  padding: 3px;
}
/* 見出しのデザインリセット */
.article  h2,
.article  h3,
.article  h4,
.article  h5,
.article  h6 {
border:none;
background:none;
padding: 0;
}
/*H2*/
.article h2 {
  position: relative;
  background: #93604a;
  padding: 8px 5px 8px 50px;
  font-size: 20px;
  color: #ffffff;
  border-radius: 20px;
}
.article h2:before {
  font-family: "Font Awesome 5 Free";
  content: "\f004";
  display: inline-block;
  line-height: 40px;
  position: absolute;
  padding: 0em;
  color: white;
  background: #93604a;
  font-weight: 900;
  width: 43px;
  text-align: center;
  height: 43px;
  line-height: 43px;
  left: -1px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border: solid 2px white;
  border-radius: 50%;
}
/*H3*/
.article h3 {
  position: relative;
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;
  border-bottom: double 1px #6C3428;
}
.article h3:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #6C3428; /*アイコン色*/
  font-weight: 900;
}
/*カテゴリラベル*/
.cat-link,
.cat-label{
  background-color: #B78677;
  border-radius: 12px;
  padding: 4px 12px;
}
.entry-categories-tags {
  margin-bottom: 5px;
}
/*関連記事のカテゴリラベル*/
.related-entry-card .cat-label {
  font-size: 12px;
}
.tag-link{
  border: 1px dotted #93604a;
  color: #B78677;
  border-radius: 12px;
  padding: 4px 12px;
}
/*アイキャッチのカテゴリを非表示*/
.eye-catch .cat-label {
  display: none;
}
/*アイキャッチを角丸*/
.eye-catch img {
  border-radius: 15px;
}
/*ページ送り*/
#pager-post-navi .card-thumb img{
  aspect-ratio: 16/9;
}
/************************************
****　SNSシェアボタン
************************************/
.sns-share{
margin: 0 0 24px ;
}
.sns-share-message:before, .sns-follow-message:before, span.related-entry-main-heading.main-caption:before, .comment-title:before {
letter-spacing:.3em;
border-radius:20px;
border: 0;
padding: 0;
background-color:#3f5569;/*SHARE 背景色の変更はこちら*/
color:#fff;
display: inline-block;
width: 40%;
}
.sns-share-message, .sns-follow-message, span.related-entry-main-heading.main-caption, .comment-title {
margin:20px 0 10px 0;
}
.sns-share.ss-high-and-low-lc a .button-caption.button-caption{
display:none;
}
.sns-share-buttons {
padding-right:10%;
padding-left:10%;
}
.sns-share-buttons a {
transition:0.5s;
}
.sns-share.ss-top.ss-col-6 a, .sns-share.ss-bottom.ss-col-6 a {/*設定したカラム数に応じて数字を変更してください(例：カラム6列→6)*/
width: 13%;
}
.sns-share.ss-high-and-low-lc a .social-icon{
font-size: 25px;
}
@media (max-width:480px){
.sns-share-message:before, .sns-follow-message:before, span.related-entry-main-heading.main-caption:before, .comment-title:before {
width: 55%;
}
.sns-share-buttons {
padding-right:5%;
padding-left:5%;
}
.sns-share.ss-top.ss-col-6 a, .sns-share.ss-bottom.ss-col-6 a {/*設定したカラム数に応じて数字を変更してください(例：カラム6列→6)*/
width: 15%;
}
.sns-share.ss-high-and-low-lc a .social-icon{
font-size: 20px;
}
}
/*ページネーション*/
.pagination-next-link {
  background-color: #A4907C;
  color: #fff;
  border: none;
  border-radius: 30px;
  box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2); /*「次のページ」部分の影*/
}
.pagination-next-link:hover {
  background-color: #F7EFE5;
  transition: all 0.5s ease;
  color: #9F8772;
}
.page-numbers {
  color: #A4907C;
  border: 1px solid #A4907C;
  border-radius: 50%;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2); /*数字部分の影*/
}
.pagination .current {
  background-color: #A4907C;
  color: #fff;
}
.page-numbers.dots {
  opacity: 1;
  background: none;
}
.pagination a:hover {
  background-color: #F7EFE5;
  color: #9F8772;
}
a.prev, a.next {
  display: none;
}
@media screen and (max-width: 480px) {
.page-numbers {
  width: 48px;
  height: 48px;
  line-height: 48px;
}
}
/*スムーズにスクロール*/
html { scroll-behavior: smooth;}

/*ヘッダーモバイルボタンの文字色と背景色を変更*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background: #ebdbce;
	color: #6b5338;
}

.logo-menu-button.menu-button{
	background: #ebdbce;
}

.mobile-menu-buttons{
	background: #ebdbce;
}

/*新着記事一覧用*/
a.entry-card-wrap article.entry-card {
    display: flex;
}
a.entry-card-wrap:nth-child(even) article.entry-card {
    flex-direction: row-reverse;
}
.entry-card-thumb {
    width: 100%;
    margin: auto;
}
.entry-card-content{
    width: 100%;
    margin: 7px;
}
.related-entry-card-meta, .entry-card-meta {
    position: relative;
}
.e-card-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
  main.main{
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
  }
/*ここまで*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
  main.main{
    margin-left:10px;
	  margin-right:10px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
  }
.logo-menu-button img {
	width: 170px;
  max-height: none;
	margin: 2px auto 0;
}
  /*ここまで*/
}