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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/*----- シェアボタン（コピーボタン） -----*/
/* X・Threadsが黒、LINEが緑なので、コピーはサイトのアクセントカラー
   （ジム図鑑のアンバー #f0a500 を白文字が読める濃さにした #b45309）にする。
   色はCocoonのCSS変数を上書きする */
:root {
  --cocoon-copy-color: #b45309;
}
.sns-share .copy-button {
  --cocoon-copy-color: #b45309;
}

/* キャプションが「タイトルとURLをコピー」と長いので、記事上下のシェアでは
   コピーボタンだけ文字数に合わせて広げる。他ボタンと同じ幅を下限にして、
   足りないときだけ伸びる（モバイルのシェアメニューはキャプション非表示なので対象外） */
.sns-share.ss-bottom .sns-buttons .copy-button,
.sns-share.ss-top .sns-buttons .copy-button {
  width: auto;
  min-width: 32.5%;
  padding-left: 14px;
  padding-right: 14px;
}
.sns-share.ss-bottom .copy-button .button-caption,
.sns-share.ss-top .copy-button .button-caption {
  white-space: nowrap;
}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /* 幅が狭いときはコピーのキャプションを少し小さくして1行に収める */
  .sns-share.ss-bottom .copy-button .button-caption,
  .sns-share.ss-top .copy-button .button-caption {
    font-size: 13px;
  }
}