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

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

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

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

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

/* タブ
-------------------------------------------------- */
#main #index-tab-wrap .index-tab-buttons {
  box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.2);
}

#main #index-tab-wrap .index-tab-buttons .index-tab-button {
  border: none;
  background-color: #fff;
  border-radius: unset;
  color: #b9b9b9;
  margin: 0;
}

#main #index-tab-wrap .index-tab-buttons .index-tab-button:hover {
  color: #fff;
  background-color: #ff7524;
}

#main #index-tab-wrap #index-tab-1:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-1"] {
  background: linear-gradient(45deg, #ff9f67, #ffb47f);
  color: #fff;
}

#main #index-tab-wrap #index-tab-2:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-2"] {
  background: linear-gradient(45deg, #ff9f67, #ffb47f);
  color: #fff;
}

#main #index-tab-wrap #index-tab-3:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-3"] {
  background: linear-gradient(45deg, #ff9f67, #ffb47f);
  color: #fff;
}

#main #index-tab-wrap #index-tab-4:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-4"] {
  background: linear-gradient(45deg, #ff9f67, #ffb47f);
  color: #fff;
}

/* ウィジェット 目次
-------------------------------------------------- */
#sidebar .toc-widget-box .toc {
  margin: unset;
}

#sidebar .toc-widget-box .toc .toc-content > ol > li > a {
  font-weight: bold;
}

#sidebar .toc-widget-box .toc .toc-content ol {
  /* 目次のデザインカスタマイズ */
  padding: 0 0.5em;
  position: relative;
}

#sidebar .toc-widget-box .toc .toc-content ol > li {
  line-height: 1.5;
  padding: 0.7em 0 0.5em 1.4em;
  border-bottom: 1px dotted rgba(125, 125, 125, 0.2);
  /*カテゴリ間の下線種類*/
  list-style-type: none !important;
}

#sidebar .toc-widget-box .toc .toc-content ol > li:before {
  /* 目次の各節の先頭にあるアイコンを設定 */
  font-family: "Font Awesome 5 Free";
  content: "\f138";
  /* アイコンを変える場合はここを変更 */
  position: absolute;
  left: 0.5em;
  color: #ff9f67;
  /* 色を変える場合はここを変更 */
  font-weight: bold;
}

#sidebar .toc-widget-box .toc .toc-content ol > li:last-of-type {
  border-bottom: none;
}

#sidebar .toc-widget-box .toc .toc-content ol > li > ol > li:before {
  /* 目次の各節の先頭にあるアイコンを設定 */
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  /* アイコンを変える場合はここを変更 */
  position: absolute;
  left: 0.5em;
  color: #ff9f67;
  /* 色を変える場合はここを変更 */
  font-weight: bold;
}

/* 目次
-------------------------------------------------- */
#main .entry-content .toc {
  /* 目次全体デザイン */
  background: #F9F9F9;
  /* 目次全体の背景色を変える場合はここを変更 */
  border: none;
  display: block;
  border-top: 5px solid;
  border-top-color: #ff9f67;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  padding: 20px 25px;
}

#main .entry-content .toc .toc-title {
  /* 目次の文字指定 */
  text-align: left;
  margin: 0 20px 20px -10px;
  padding-left: -20px;
  font-size: 23px;
  font-weight: 700;
  color: #ff9f67;
  /* 目次の文字色を変える場合はここを変更 */
}

#main .entry-content .toc .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: #ff9f67;
  /* アイコンの背景色を変える場合はここを変更 */
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  padding: 14px;
}

#main .entry-content .toc .toc-content ol {
  /* 目次のデザインカスタマイズ */
  padding: 0 0.5em;
  position: relative;
}

#main .entry-content .toc .toc-content ol li {
  line-height: 1.5;
  padding: 0.7em 0 0.5em 1.4em;
  border-bottom: dashed 1px silver;
  list-style-type: none !important;
}

#main .entry-content .toc .toc-content ol li:before {
  /* 目次の各節の先頭にあるアイコンを設定 */
  font-family: "Font Awesome 5 Free";
  content: "\f138";
  /* アイコンを変える場合はここを変更 */
  position: absolute;
  left: 0.5em;
  color: #ff9f67;
  /* 色を変える場合はここを変更 */
  font-weight: bold;
}

#main .entry-content .toc .toc-content ol li:last-of-type {
  border-bottom: none;
}

#main .entry-content .toc .toc-content .toc-list li {
  font-weight: 700;
  /* h2のみ太文字に */
}

#main .entry-content .toc .toc-content .toc-list li li {
  font-weight: normal;
  /* h3以降の文字サイズを普通に */
}
/* ウィジェット アーカイブ
-------------------------------------------------- */
.widget_archive ul li {
  /*親カテゴリ*/
  padding-left: 10px;
  border-bottom: 1px dotted rgba(125, 125, 125, 0.2);
  /*カテゴリ間の下線種類*/
}

.widget_archive ul li a {
  /*リンク*/
  font-size: .95rem;
}

.widget_archive ul li a .post-count {
  /*記事数*/
  border: 1px solid rgba(221, 221, 221, 0.867);
  /*囲い*/
  border-radius: 5px;
  /*ボーダーの丸み*/
  font-size: .8em;
  /*数字サイズ*/
  padding: 1px 10px;
  /*囲いの大きさ*/
}

.widget_archive ul li a:before {
  /*アイコン*/
  font-family: "Font Awesome 5 Free";
  content: "\f138";
  /*種類*/
  color: #ff9f67;
  /*色*/
  margin-right: 6px;
  /*アイコンと文字の距離*/
  font-weight: bold;
}

.widget_archive ul li a:hover {
  /*ホバー*/
  background: transparent;
  margin-left: 5px;
  /*hover時動く幅*/
  background-color: #efefef;
}

.widget_archive ul li a:hover .post-count {
  border-color: #ffb47f;
  /*囲線色*/
  background: #ff9f67;
  /*背景色*/
  color: #fff;
  /*文字色*/
  transition: .4s;
  /*変化スピード*/
}
/* SNSシェアボタン
-------------------------------------------------- */
.article-footer .sns-share {
  margin: 0 0 24px;
}

.article-footer .sns-share .sns-share-buttons a {
  border: unset;
  transition: 0.3s;
}

.article-footer .sns-share .sns-share-buttons a:hover {
  transform: translateY(-4px);
}

.article-footer .sns-share .sns-share-buttons a .button-caption {
  display: none;
}

.article-footer .button-caption .button-caption {
  display: none;
}

.article-footer .sns-share-buttons {
  padding-right: 15%;
  padding-left: 15%;
}

.article-footer .sns-share-buttons a {
  transition: 0.4s;
}

.article-footer .comment-btn {
  margin-top: 1em;
}
/* SNSシェアボタン
-------------------------------------------------- */
.article-footer .sns-share, .article-header .sns-share {
  margin: 0 0 24px;
}

.article-footer .sns-share .sns-share-buttons a, .article-header .sns-share .sns-share-buttons a {
  border: unset;
  transition: 0.3s;
}

.article-footer .sns-share .sns-share-buttons a:hover, .article-header .sns-share .sns-share-buttons a:hover {
  transform: translateY(-4px);
}

.article-footer .sns-share .sns-share-buttons a .button-caption, .article-header .sns-share .sns-share-buttons a .button-caption {
  display: none;
}

.article-footer .button-caption .button-caption, .article-header .button-caption .button-caption {
  display: none;
}

.article-footer .sns-share-buttons, .article-header .sns-share-buttons {
  padding-right: 15%;
  padding-left: 15%;
}

.article-footer .sns-share-buttons a, .article-header .sns-share-buttons a {
  transition: 0.4s;
}

.article-footer .comment-btn, .article-header .comment-btn {
  margin-top: 1em;
}
/* SNSフォローボタン
-------------------------------------------------- */
.article-footer .sns-follow .sns-follow-buttons {
  justify-content: center;
}

.article-footer .sns-follow .sns-follow-buttons a {
  width: 10%;
  border: unset;
  transition: 0.3s;
}

.article-footer .sns-follow .sns-follow-buttons a:hover {
  transform: translateY(-4px);
}

.article-footer .sns-follow .sns-follow-buttons a .button-caption {
  display: none;
}

.article-footer .button-caption .button-caption {
  display: none;
}

.article-footer .sns-share-buttons {
  padding-right: 15%;
  padding-left: 15%;
}

.article-footer .sns-share-buttons a {
  transition: 0.4s;
}

.article-footer .comment-btn {
  margin-top: 1em;
}
/* SNSシェア・フォローボタン
-------------------------------------------------- */
.article-footer .sns-share, .article-footer .sns-follow {
  text-align: center;
}

.article-footer .sns-share .sns-share-message, .article-footer .sns-share .sns-follow-message, .article-footer .sns-follow .sns-share-message, .article-footer .sns-follow .sns-follow-message {
  position: relative;
  color: #cccfd7;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 1px;
  display: inline-block;
  padding: 0px 25px;
}

.article-footer .sns-share .sns-share-message:before, .article-footer .sns-share .sns-follow-message:before, .article-footer .sns-follow .sns-share-message:before, .article-footer .sns-follow .sns-follow-message:before {
  left: 0;
  -webkit-transform: rotate(50deg);
  transform: rotate(50deg);
  display: inline-block;
  position: absolute;
  top: 50%;
  width: 20px;
  height: 3px;
  border-radius: 3px;
  background-color: #d8dae1;
  content: "";
}

.article-footer .sns-share .sns-share-message:after, .article-footer .sns-share .sns-follow-message:after, .article-footer .sns-follow .sns-share-message:after, .article-footer .sns-follow .sns-follow-message:after {
  right: 0;
  -webkit-transform: rotate(-50deg);
  transform: rotate(-50deg);
  display: inline-block;
  position: absolute;
  top: 50%;
  width: 20px;
  height: 3px;
  border-radius: 3px;
  background-color: #d8dae1;
  content: "";
}
/* ウィジェット カテゴリ
-------------------------------------------------- */
.widget_categories ul li {
  /*親カテゴリ*/
  padding-left: 10px;
  border-bottom: 1px dotted rgba(125, 125, 125, 0.2);
  /*カテゴリ間の下線種類*/
}

.widget_categories ul li a {
  /*リンク*/
  font-size: .95rem;
}

.widget_categories ul li a .post-count {
  /*記事数*/
  border: 1px solid rgba(221, 221, 221, 0.867);
  /*囲い*/
  border-radius: 5px;
  /*ボーダーの丸み*/
  font-size: .8em;
  /*数字サイズ*/
  padding: 1px 10px;
  /*囲いの大きさ*/
}

.widget_categories ul li a:before {
  /*アイコン*/
  font-family: "Font Awesome 5 Free";
  content: "\f138";
  /*種類*/
  color: #ff9f67;
  /*色*/
  margin-right: 6px;
  /*アイコンと文字の距離*/
  font-weight: bold;
}

.widget_categories ul li a:hover {
  /*ホバー*/
  background: transparent;
  margin-left: 5px;
  /*hover時動く幅*/
  background-color: #efefef;
}

.widget_categories ul li a:hover .post-count {
  border-color: #ffb47f;
  /*囲線色*/
  background: #ff9f67;
  /*背景色*/
  color: #fff;
  /*文字色*/
  transition: .4s;
  /*変化スピード*/
}

.widget_categories ul .children li {
  /*子カテゴリ*/
  border-bottom: none;
}

.widget_categories ul .children li a {
  /*リンク*/
  padding: 3px 10px;
  font-size: .85rem;
  /*文字サイズ*/
}

.widget_categories ul .children li a:before {
  /*アイコン*/
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  /*種類*/
  color: #ff9f67;
  /*色*/
  font-weight: normal;
  margin-right: 6px;
  /*アイコンと文字の距離*/
  font-weight: bold;
}
/* メインのエントリー記事をフワッと浮かせる
-------------------------------------------------- */
#main #list .entry-card-wrap, #main .tab-cont .entry-card-wrap {
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1), 0 2px 3px 0 rgba(0, 0, 0, 0.2);
}

#main #list .entry-card-wrap:hover, #main .tab-cont .entry-card-wrap:hover {
  box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15), 0 0 5px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}
/* ページネーション
-------------------------------------------------- */
#main .pagination .page-numbers {
  display: inline-block;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  font-size: 17.5px;
  font-weight: bold;
  text-decoration: none;
  line-height: 46px;
  border: unset;
}

#main .pagination .current {
  color: #fff;
  background-color: #ff9f67; /* 背景色 */
}

#main .pagination a:hover {
  background-color: #efefef; /* ホバー時の背景色 */
}
/* ウィジェット　見出し
-------------------------------------------------- */
.sidebar h3, #footer h3 {
  background-color: #f5f6f7;
  padding: 12px;
  margin: 16px 0;
  border-radius: 2px;
  background: 0 0;
  font-size: 20px;
  letter-spacing: 2px;
  display: inline-block;
  position: relative;
  width: 100%;
  padding: 0;
  text-align: center;
}

.sidebar h3:before, #footer h3:before {
  content: '';
  position: absolute;
  top: 50%;
  width: 28%;
  border-top: 3px solid #444d53;
  left: 0;
}

.sidebar h3:after, #footer h3:after {
  content: '';
  position: absolute;
  top: 50%;
  width: 28%;
  border-top: 3px solid #444d53;
  right: 0;
}
/* プロフィール
-------------------------------------------------- */
#sidebar .author-box, #footer .author-box {
  border: 0;
  line-height: 1.4;
  position: relative;
  padding: 0;
}

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

#sidebar .author-box .author-thumb img, #footer .author-box .author-thumb img {
  border: 3px dashed #ff9f67;
  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: .8em;
}

#sidebar .author-box .author-content .author-name a, #footer .author-box .author-content .author-name a {
  text-decoration: none;
  color: #333;
}

#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: 120px;
  max-width: 100%;
  color: #fff;
  font-size: 16px;
  background: #ff9f67;
  border-radius: 15px;
}

.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #ff9f67;
}

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

/* ウィジェット　見出し
-------------------------------------------------- */
.sidebar h3, #footer h3 {
  background-color: #f5f6f7;
  padding: 12px;
  margin: 16px 0;
  border-radius: 2px;
  background: 0 0;
  font-size: 20px;
  letter-spacing: 2px;
  display: inline-block;
  position: relative;
  width: 100%;
  padding: 0;
  text-align: center;
}

.sidebar h3:before, #footer h3:before {
  content: '';
  position: absolute;
  top: 50%;
  width: 28%;
  border-top: 3px solid #444d53;
  left: 0;
}

.sidebar h3:after, #footer h3:after {
  content: '';
  position: absolute;
  top: 50%;
  width: 28%;
  border-top: 3px solid #444d53;
  right: 0;
}

/************************************
****　おすすめカード
************************************/
div#recommended-in.recommended-in.wrap.cf{
margin-top: 20px;
max-height:220px;
}
@media screen and (min-width: 1024px){
div#recommended-in.recommended-in.wrap.cf{
padding:0 2em;
}}
div#content.content.cf{
margin-top:0;
}
.widget-entry-cards .a-wrap{
transition: all .2s;
}
.widget-entry-cards .a-wrap:hover {
transform: translateY(-1px);
transition: all .2s;
}
figure.navi-entry-card-thumb.widget-entry-card-thumb.card-thumb{
opacity:.8;
}
.recommended.rcs-center-white-title .a-wrap:hover .card-content {
transition: all .1s;
opacity: 1;
}
.widget-entry-cards.large-thumb-on .card-content{
background: rgba(151, 151, 151, 0);
}
a.navi-entry-card-link.widget-entry-card-link.a-wrap{
border-radius:10px!important;
margin:1em .5em;
background-color:#FFFFFF;/*Cocoon設定「全体」の「サイト背景色」に合わせてください*/
}
div.navi-entry-card-title.widget-entry-card-title.card-title{
color:#333333;
font-weight:bold;
font-size:.8em;
background-color: rgba(255, 255, 255, 0.8);
padding: .6em .5em;
border-radius:30px;
}
@media (max-width:834px){
a.navi-entry-card-link.widget-entry-card-link.a-wrap{
margin:.3em 0em;
}
div.navi-entry-card.widget-entry-card.e-card.cf{
border-radius:10px!important;
overflow:hidden;
max-height:100px;
margin:0 .3em 0;
box-shadow: 0px 1px 4px 0 rgba(0,0,0,.1)!important;
}
.widget-entry-cards.large-thumb-on .a-wrap:hover {
box-shadow:none;
}
}
@media (max-width:834px){
div.navi-entry-card-title.widget-entry-card-title.card-title{
font-size:.6em;
padding: .5em;
}
div#recommended-in.recommended-in.wrap.cf{
margin: .7em .2em .3em;
}
.widget-entry-cards.large-thumb-on .card-content{
background: rgba(151, 151, 151, 0.2);
}
}
main#main.main{
margin:0;
}
.body .navi-entry-cards{
margin-bottom: 0;
}