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

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

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

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

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

/************************************
** サイドバー追尾目次
************************************/
.sidebar-scroll{
  top:15px !important;
}
.sidebar h3{
  font-size:0.9em;
  padding: 7px 12px;
}
.sidebar .widget_toc{
   box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.sidebar .toc-widget-box{
  margin-top: -0.9em;
}
.sidebar .toc{
  padding: 0;
  width:100%;
}
.sidebar .toc-content {
  overflow-y: scroll;
  max-height: 390px;
  background: #fff;
  padding: 0.5em 1.5em;
}
.sidebar .toc li{
  line-height:1.6;
  margin-bottom: 1em;
  font-size:0.85rem;
  color:#3cb8f1;
}
.sidebar .toc-content > ol  > li,.sidebar .toc-content > ul  > li{
  font-weight:600;
  padding-left: 0.5em;
}
.sidebar .toc-content a{
  letter-spacing:0.5px;
}
.sidebar .toc .toc-list ul, .sidebar .toc .toc-list ol {
  margin: 1em 0;
  list-style-type:none;
  font-weight:500;
}
@media screen and (max-width: 768px){
  .sidebar-menu-button .widget_toc{
    display:none;
  }
}

/************************************
** トップの固定ページ表示関係
************************************/
/*全てをまとめて非表示*/
.home.page .entry-title,
.home.page .sns-share,
.home.page .sns-follow,
.home.page .date-tags,
.home.page .author-info{
  display: none;
}

/************************************
** トップページ記事のカテゴリーラベル
************************************/
/* おすすめカードで非表示に */
.navi-entry-card-content .cat-label {
	display: none;
}
/* サイドバーで非表示に */
.widget-sidebar .cat-label{
	display: none;
}
/* フッターで非表示に */
.widget-footer-mobile .cat-label,
.widget-footer-center .cat-label,
.widget-footer-right .cat-label {
	display: none
}
/************************************
** トップページ記事の日時表示
************************************/
.new-entry-card-date {
  display: block;
}
/************************************
** ブログカード「続きを読む」
************************************/
.internal-blogcard::after{
	content: '続きを読む \00bb'; /* 内部リンク右下枠の文言 */
	position: absolute;
	bottom: .5rem;
	right: 1rem;
	font-size: 70%;
	background-color: #6c9bd2; /* 内部リンク右下枠の背景色 */
	padding: .4em 3em;
	font-weight: bold;
	color: #fff; /* 内部リンク右下枠の文字色 */
	border-radius: 2px;
}
/************************************
** ブログカード　ブログカードの抜粋文字を非表示
************************************/
.blogcard-snippet{
display:none;
}
/************************************
** ブログカード　内部リンクを非表示
************************************/
.internal-blogcard-footer{
	display: none; /* 内部ブログカードのアイコンとURLを非表示 */
}

/************************************
** タグクラウド カスタマイズ
************************************/
.tagcloud {
  display: inline-block;
  padding: 0px 2px 0px 2px;
}

.tagcloud a {
  text-decoration: none; /*テキスト初期化*/
  display: inline-block; /*横並びで上下左右空白有り*/
  padding: 2px 6px 0px 6px; /*タグ内側余白*/
  margin: 0px 0px 4px 0px; /*タグ外側余白*/
  word-break: break-all; /*テキストの途中で改行させない*/
}

/************************************
** タグの色分け表示
************************************/
/*
数字部分はスタイルを変えたいタグのID
*/

.tagcloud a[class*="tag-link-32"],
.tagcloud a[class*="tag-link-34"],
.tagcloud a[class*="tag-link-13"],
.tagcloud a[class*="tag-link-52"]
{
	background:#2fbeff;
	color:#fff;
}

.tagcloud a[class*="tag-link-32"]:hover,
.tagcloud a[class*="tag-link-34"]:hover,
.tagcloud a[class*="tag-link-13"]:hover,
.tagcloud a[class*="tag-link-52"]:hover
{
	background:#88daff;
}

/************************************
** コピーボタン
************************************/
.copy-box{
   background:#e6f2ff;/* 背景色：#fff9e3 */
    padding:2em;
    width: 90%;
    margin:0 auto;
    font-size:0.9em;
	line-height: 1.8; /* 行間　元数値：1.8 */
}
.copy-box p:first-child{
    margin-top:0;
}
.copy-box p:last-child{
    margin-bottom:0;
    padding-bottom:0;
}
.copy-box ul{
    border:none;
    margin:0;
    padding:0;
}
.copy-box ul li{
    margin-left:20px; /* 左に隙間があく場合は消してください */
}
.btn-copy {
    display: block;
    margin: 1em auto 2em;
    width: 120px;
    padding: 0.3em 1em;
    text-decoration: none;
    background: #888; /* ボタン背景色 */
    color: #fff;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 0px 5px rgba(0,0,0,0.2);
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing:1px;
    line-height: 1.8;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.btn-copy:hover {
    color:#fff;
}
.btn-copy:before {
    left: -100%;
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    content: "Copied!";
}
.btn-copy .btn-copy-text {
    display: inline-block;
    -webkit-transition: all 0.3s;
    -webkit-backface-visibility: hidden;
    -moz-transition: all 0.3s;
}
.btn-copy-active{
    background:#bbb;/* ボタンクリック時 背景色 */
}
.btn-copy-active:before {
    left: 0;
}
.btn-copy-active .btn-copy-text {
    -webkit-transform: translateX(250%);
    -moz-transform: translateX(250%);
    -ms-transform: translateX(250%);
    transform: translateX(250%);
}