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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
:root{
  --main-border-radius: 10px;
}

/* Header */
#navi .navi-in a:hover{
	background: #456651;
  transition: all 0.5s ease;
}
#navi .navi-in a {
  border-radius: var(--main-border-radius);
}
.navi-in > ul {
  justify-content: space-around;
}

/* Content top*/
#content #main {
  border-radius: var(--main-border-radius);
}
#content #sidebar {
  border-radius: var(--main-border-radius);
}
#content .entry-title:before {
  content: '';
  display: inline-block;
  width: 50px;
  height: 50px;
  background-image: url("./media/banner1.png");
  background-size: contain;
  vertical-align: middle;
}
#content .article .toc {
  background: rgba(225,172,154,.2);
}

/*Content body*/
#main .button-caption {
  display: none; /*キャプション非表示*/
}
#main .speech-balloon {
  background-color: #456651;
  border: 2px solid #456651;
  color: white;
}
#main .sbp-l .speech-balloon::before {
  border-right: 12px solid #456651;
}
#main .sbp-r .speech-balloon::before {
  border-left: 12px solid #456651;
}
#main .sbp-l .speech-balloon::after {
  border-right: 12px solid #456651;
}
#main .sbp-r .speech-balloon::after {
  border-left: 12px solid #456651;
}
#main .speech-icon .speech-icon-image {
  border-color: #456651;
}

.wp-block-cocoon-blocks-icon-box.information-box {
  background: rgba(227,199,126,.4);
  border: 2px solid rgba(69,102,81,1);
}
.wp-block-cocoon-blocks-icon-box.information-box::before {
  color: rgba(69,102,81,1);
  border-right: 1px solid rgba(69,102,81,1);
}

.wp-block-cocoon-blocks-info-box.primary-box {
  background: rgba(227,199,126,.4);
  color: #333333;
}
.wp-block-cocoon-blocks-blank-box-1.blank-box {
  border: 3px dashed rgba(69,102,81,1);
}

.wp-block-cocoon-blocks-sticky-box.sticky {
  border-color: #e1ac9a;
  background-color: rgba(225,172,154,.3);
}

.wp-block-cocoon-blocks-tab-box-1.bb-check {
  border-color: rgba(69,102,81,1);
  background: rgba(227,199,126,.4);
}
.wp-block-cocoon-blocks-tab-box-1.bb-check .bb-label {
  background-color: rgba(69,102,81,1);
}

.wp-block-cocoon-blocks-timeline.timeline-box {
  background-color: #e1ac9a;
  color: white;
  border: none;
}
.wp-block-cocoon-blocks-timeline-item.timeline-item::before {
  background-color: rgba(69,102,81,1);
}
.wp-block-cocoon-blocks-timeline-item.timeline-item .timeline-item-content {
  border-left: 3px rgba(227,199,126,1) dashed
}

.wp-block-cocoon-blocks-iconlist-box.list-check-circle-o {
  background: rgba(227,199,126,.4);
}
.wp-block-cocoon-blocks-iconlist-box.list-check-circle-o ul li::before {
  color: rgba(69,102,81,1);
}

.wp-block-cocoon-blocks-faq.faq-wrap {
  border: 3px dashed #e1ac9a;
}

.blogcard {
  border: 3px dashed;
  border-radius: var(--main-border-radius);
}
.blogcard-footer {
  display: none;
}
.blogcard:hover {
  background-color: rgba(225,172,154,.1);
  transform: translateY(-5px);
}

/* footer */
#related-entries .related-entry-card-wrap {
  border: 3px dashed rgba(225,172,154,.5);
  border-radius: var(--main-border-radius);
}
#related-entries .related-entry-card-wrap:hover {
  background-color: rgba(225,172,154,.1);
  transform: translateY(-5px);
}

#pager-post-navi .prev-post{
  margin-right: 5px;
  border-bottom: 2px solid #e1ac9a;
}
#pager-post-navi .next-post{
  margin-left: 5px;
  border-bottom: 2px solid #e1ac9a;
}

/* tag cloud*/
.fa-tag:before {
 content: '\f292';
}
.tagcloud a {
 border-radius: 20px; /* 角を丸くする */
}
.tagcloud a:hover {
 background-color: rgba(225,172,154,.8); /* 背景色 */
}

/*side bar*/
.widget-entry-cards.large-thumb-on .card-content {
  display: none;  
}
.widget-entry-card-link:hover {
  transform: translateY(-5px);
}

/*SNS button*/
.sns-share-buttons {
  flex-wrap: nowrap;  
  justify-content: center; 
}
.sns-share-buttons a {
  border-radius: 10px; 
  font-size: 20px; 
  margin: 4px; 
}
#main .sns-share a {
  height: 35px; 
  margin-bottom: 0.5em; 
}

/* Profile */
.nwa .author-box {
  border:  none;
  padding:  10px;
}
.nwa .author-box a {
  text-decoration: none;
}
.nwa .author-box .author-name {
  margin-bottom: 30px
}
.nwa #text-2, #slide-in-text-2 {
  border: 2px dashed #e1ac9a;
  padding: 10px;
  border-radius: 10px;
  text-align: center;
  font-size: 15px;
}

.wp-block-table td, .wp-block-table th {
  border-color: rgba(225,172,154,.5);
}

.sidebar .sns-follow-buttons {
  justify-content: center;
}
.sidebar .sns-follow-buttons a {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 5px;
}

/* mobile footter */
.mobile-footer-menu-buttons li.navi-menu-button {
  display: none;
}
.mobile-menu-buttons {
  background: #e1ac9a;
  box-shadow: 0 0 5px #e1ac9a;
}
.mobile-menu-buttons .menu-button > a, 
.mobile-menu-buttons .menu-button > label {
  color: #fefdfb;
}

/* top page */
.entry-card-wrap:hover {
  background-color:  rgba(227,199,126,.5);
  /*border-radius: 240px 15px 100px 15px / 15px 200px 15px 185px;*/
  border-radius: var(--main-border-radius);
}
@keyframes bounce {
  0%    { transform:translate(0, 0); }
  16.6% { transform:translate(0, -20px); animation-timing-function:ease-in; }
  33.3% { transform:translate(0, 0); }
  49.8% { transform:translate(0, -14px); animation-timing-function:ease-in; }
  66.4% { transform:translate(0, 0); }
  83%   { transform:translate(0, -4px); animation-timing-function:ease-in; }
  100%  { transform:translate(0, 0); }
}

/* footer */
.pagination-next-link.key-btn {
  width: 300px;
  margin: 0 auto;
  background-color:  rgba(69,102,81,1);
  border: none;
  border-radius: var(--main-border-radius);
  color: white;
}

.pagination-next a:hover, .pagination a:hover {
  color: #333333;
}
.page-numbers {
  background-color:  rgba(69,102,81,1);
  border: none;
  color: white;
  border-radius: var(--main-border-radius);
}
.page-numbers.dots {
  background-color:  rgba(69,102,81,1); 
  opacity: 1;
}
.pagination .current {
  color:  rgba(69,102,81,1);
  background-color: rgba(69,102,81,.1);
  border: 2px dashed rgba(69,102,81,1);
}

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

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

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