@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){
  /*必要ならばここにコードを書く*/
}

td.place1 {
text-align:center;
padding: 7px 7px;
}

.go-to-toc-button {
    flex-direction: column;
}
.go-to-toc-button:after {
    content:'目次';
    font-size: 12px; /* 文字サイズ */
    margin-top: 2px;
}

/* 目次に戻るリンクを機能させる */
.toc-checkbox {
    height: 0;
    overflow: hidden;
    display: block;
    visibility: hidden;
}

/* 目次に戻るリンクのスタイル */
.back-toc {
    margin: 50px 0; /* 上下の余白 */
}
.back-toc a {
    color: #e57373; /* 文字色 */
    text-decoration: none; /* 下線を消す */
}

/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
  display: none;
}

/*フロント固定ページの投稿日を非表示*/
.home.page .post-date{
  display: none;
}

/*フロント固定ページの更新日を非表示*/
.home.page .post-update{
  display: none;
}

/**********************
ContactForm7 reCAPTCHA v3のロゴを非表示  開始
***********************/
.grecaptcha-badge { visibility: hidden; }
/**********************
ContactForm7 reCAPTCHA v3のロゴを非表示  終了
***********************/

/* 見出しh2の装飾 */
.article h2 {
border: none; 
position: relative;
padding: .7em .75em;
margin-bottom: 1.5em;
background-color: #1baa9a;
color: #fff;
border-radius: 6px;
border-bottom: 0px
}
.article h2::after {
position: absolute;
top: 100%;
left: 30px;
content: '';
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 15px solid #1baa9a;
border-bottom: 0px
}

/* 見出しh3の装飾 */
.article h3 {
border: none; 
padding: 0.7em;/*文字周りの余白*/
color: #494949;/*文字色*/
background: #F3FEF1;/*背景色*/
border-left: solid 10px #69B560;/*左線（実線 太さ 色）*/
}

/* 見出しh4の装飾 */
.article h4,
#comment-area h4,
#related-entries h4{
border: none; 
position: relative;
padding-bottom: .5em;
border-bottom: 4px solid #ccc;
}
.article h4::after {
position: absolute;
bottom: -4px;
left: 0;
z-index: 2;
content: '';
width: 20%;
height: 4px;
background-color: #69B560;
}

/* サイドバーの見出し背景を修正 */
#sidebar h3{
  border-radius: 5px;
  background: #1baa9a;
  font-weight: bold;
  color: #fff;
}

div table th, 
div table td {
    font-size: 1em;
}

/************************************
** コピーボタン
************************************/
.copy-box{
    background:#fff9e3;
    padding:2em;
    width: 90%;
    margin:0 auto;
    font-size:0.9em;
}
.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%);
}