@charset "UTF-8";

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

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

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

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

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

/*コメントメアドとリンク削除*/
.comment-form-email,.comment-form-url,.comment-notes{ display:none; }

/* 投稿者名非表示 */
.footer-meta {
  visibility:hidden;
　margin-bottom:30px;
}

/*エントリーカードアイキャッチ画像の角丸め*/
.ect-entry-card img{border-radius: 10px;}
/*オンマウスで傾ける*/
.ect-entry-card img {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.ect-entry-card img:hover {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}

/*お勧めカード*/
#recommended .navi-entry-card-thumb img{
border-radius:10px; /*角丸め*/
}
/*オンマウスで傾ける*/
#recommended .navi-entry-card-thumb {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#recommended .navi-entry-card-thumb:hover {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.widget-entry-cards.large-thumb-on .card-content{/*写真の上に若干黒かかってる*/
background: none;
}
div.navi-entry-card-title.widget-entry-card-title.card-title{/*おすすめカード上の文字*/
color:#333333;
font-weight:bold;
font-size:.7em;
background-color: rgba(255, 255, 255, 0.8);
padding: .6em .5em;
border-radius:30px;
}

/*カテゴリ表示のカスタマイズ*/
.cat-label{
border-radius: 10px; /* 角を丸くする */
}

/*トップ画像のアニメーション*/
.logo{
	animation-name:fdin;
	animation-duration:2s;
}
@keyframes fdin{
from {
	opacity:0;
	transform: translateY(10px);
}
to {
	opacity:1;
	transform: translateY(0);
}
}

/*人気記事ランキングのカスタマイズ*/
.attachment-thumb120.size-thumb120.wp-post-image{ /*アイキャッチ画像*/
  border-radius: 10px; /*角丸コーナー*/
}
.widget-entry-cards.ranking-visible .widget-entry-card-thumb::before{
  border-radius: 18px; /*角丸コーナー*/
}

/*関連記事のアイキャッチ画像を丸くする*/
.related-entry-card-thumb-image.card-thumb-image.wp-post-image{
  border-radius: 10px!important;/*角丸コーナー*/
}

/*ページ送りのアイキャッチ画像を丸くする*/
.card-thumb img{
	border-radius: 10px;/*角丸コーナー*/
}

/*コメントのデザイン変更*/
.commets-list .children {
  border-left: 2px solid #ccc; /*返信コメントの左側のボーダー*/
  margin: 0;
}
.commets-list .avatar { /*アバターの位置調整*/
  float: left;
  border-radius: 50%;
  margin-right: 10px;
}
.comment-content { /*コメントの吹き出し*/
  background: #e2e2e2;
  padding: 2px 10px;
  margin: 10px 0 6px 0;
  border-radius: 10px;
  position: relative;
}
.comment-content::before { /*吹き出しの三角部分*/
  content: "";
  position: absolute;
  top: -14px;
  left: 50px;
  border-style: solid;
  border-color: transparent transparent #e2e2e2 transparent;
  border-width: 0 20px 20px 0;
}
.comment-content p { /*吹き出し内の文字を調整*/
  font-size: 14px;
  margin: 1em 0;
  line-height: 1.5em;
}
.comment-respond p {
  margin: 1em 0;
}
p.comment-notes { /*注意書きの文字サイズ*/
  font-size: 14px;
}
p.form-submit {
  margin: 2em 0 1em 0;
}
#commentform input[type="submit"] { /*送信ボタンの装飾*/
  -webkit-appearance: none;
  padding: 11px;
  width: 100%;
  margin: 0;
  cursor: pointer;
  background: #594321;
  color: #fff;
  border: none;
  font-size: 16px;
  transition: 0.5s;
}
#commentform input[type="submit"]:hover { /*送信ボタンのマウスホバー時*/
  opacity: 0.7;
  color: #fff;
  transition: all 0.3s ease-in-out;
}
.comment-reply-link { /*返信ボタンの装飾*/
  color: #fff;
  border: none;
  border-radius: 20px;
  background: #594321;
  padding: 2px 12px;
  transition: 0.5s;
}
.comment-reply-link:hover { /*返信ボタンのマウスホバー時*/
  color: #fff;
  background: #8a7a63;
  transition: all 0.3s ease-in-out;
}
.commets-list .comment-body {
  margin-bottom: 0;
}
.comment-title:before { /*タイトルにアイコンを付ける*/
  font-family: "Font Awesome 5 Free";
  content: '\f086';
  font-weight: 900;
  margin-right: 4px;
}
/*コメント同士の余白調整*/
.commets-list .reply {
    margin-bottom: 1em;
}

/*次のページボタンの装飾*/
.pagination-next-link {
  color: #fff;
  border: none;
  background: #594321;
  transition: 0.5s;
}
.pagination-next-link:hover {
  color: #fff;
  background: #8a7a63;
  transition: all 0.3s ease-in-out;
}
.page-numbers {
  color: #fff;
  border: none;
  background: #594321;
  transition: 0.5s;
}
.pagination a:hover{
  color: #fff;
  background: #8a7a63;
  transition: all 0.3s ease-in-out;
}
.pagination .current {
  background-color: #d4c9a9;
}

/*お問い合わせフォーム送信ボタンの装飾*/
input[type="submit"] {
  background:#594321;
  color:#fff;
  font-size: 16px;
}
input[type="submit"]:hover {
  color: #fff;
  background: #8a7a63;
  transition: all 0.3s ease-in-out;
}

/*ヘッダ下ウィジェット　カスタマイズ*/
.st-marquee {
	margin : 0;
	width : 100%;
	font-size : 17px;  /*文字サイズ*/
	text-align : center;
	overflow : hidden;
	background: #50ba57;  /*背景色*/
}
.st-marquee p{
	margin:0;
	display : inline-block;
	padding-left: 100%;
	white-space : nowrap;
	line-height : 1em;
	animation : scrollst-marquee 20s linear infinite;  /*流れるスピード*/
}
@keyframes scrollst-marquee{
	0% { transform: translateX(0)}
	100% { transform: translateX(-100%)}
}

/*ロゴ画像下の余白削除*/
.logo-image span, 
.logo-image a, 
.logo-image img {
  display: block;
}

/*固定ページの日付を非表示にする*/
.post-3 .date-tags,
.post-31 .date-tags,
.post-20 .date-tags {
  display: none;
}

/*固定ぺージのシェア、フォローボタンの削除*/
.page .sns-share,
.page .sns-follow {
    display: none;
}
.page .article-footer{
display: none;
}

/*Instagramフォローボタンの色変更*/
.bc-brand-color.sns-share .instagram-button, .bc-brand-color.sns-follow .instagram-button{
    background-color: #CF2E92;
}

/*サイドバー下の余白調整*/
.sidebar .widget-sidebar {
    margin-bottom: 0.2em;
}

/*ブログカードの続きを読むの追加*/
.internal-blogcard::after{
	content: '他の記事を読む \00bb'; /* 内部リンク右下枠の文言 */
	position: absolute;
	bottom: .5rem;
	right: 1rem;
	font-size: 70%;
	background-color: #734e31; /* 内部リンク右下枠の背景色 */
	padding: .3em 2em;
	font-weight: bold;
	color: #fff; /* 内部リンク右下枠の文字色 */
	border-radius: 2px;
}

/*目次の設定*/
#toc_container {
    background: repeating-linear-gradient(-45deg, #f5f1eb, #f5f1eb 10px, #fcfaf7 0, #fcfaf7 20px);/* ストライプ背景 */
    border:none;
    border-left: 8px solid #8a7a63;/* アクセントカラー */
    padding: 20px;
    margin-bottom: 1em;
    width: 100%!important;
    display: table;
    font-size: 95%;
}
#toc_container .toc_list li a {
    color: #555;/* 目次リストの文字色 */
    font-weight:bold;
}
#toc_container .toc_list li a:hover {
	color:#8a7a63;
}
#toc_container p.toc_title {
    text-align: left;
    color: #8a7a63;/* アクセントカラー */
    font-size:1.2em;
}
#toc_container p.toc_title::before {
    content:"\f00b";
    font-family: "Font Awesome 5 Free";
	font-weight: 900;
    padding-right:3px;
}

/*コメント赤い点削除*/
.comment-form .required {
  display: none;
}

/*見出しにロゴ*/
h5:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  font-weight: 900;
  padding-right: 5px;
}