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

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

/* Cocoonのh1見出し中央ぞろえ */
.entry-title {
	text-align: center;
}

/* Cocoonのh2見出しに適用 - 自動ナンバリング付き */
.entry-content {
    /* カウンタのリセット */
    counter-reset: h2-number;
}

.entry-content h2 {
    position: relative;
    font-size: 26px;
    text-align: center;
    /* Cocoonのデフォルトスタイルをリセットする場合、必要に応じて追加 */
padding: 0;
border: none;
background: none;

    /* h2が見つかるたびにカウンタを増やす */
    counter-increment: h2-number;
}

.entry-content h2::before {
    /* カウンタの値を表示 */
    content: counter(h2-number);
    display: block;
    margin-bottom: 30px;
    color: #ff0000;
    font-size: 30px;
}

.entry-content h2::after {
    content: '';
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 20px;
    background-color: #fc5185;
}


/* カスタムテキスト1 - 角丸の四角い囲み */
.custom-text-1 {
  border: 2px solid #333; /* 線の太さ、種類、色 */
  border-radius: 8px;      /* 角丸の半径 */
  padding: 5px 10px;
  display: inline-block;
  box-sizing: border-box;
}
/* 投稿記事用カスタムテキスト1 - シンプルな四角い囲み */
.cocoon-custom-text-1 {
  border: 2px solid #333; /* 線の太さ、種類、色 */
  border-radius: 8px;
  padding: 5px 10px;      /* 内側の余白 */
  display: inline-block; /* インライン要素として表示し、幅を内容に合わせる */
  box-sizing: border-box; /* パディングとボーダーを幅に含める */
}

/* カスタムテキスト2 - 角丸の四角い囲み */
.custom-text-2 {
border: 4px solid #ff0000; /* 線の太さ、種類、色を赤に変更 */
  border-radius: 8px;      /* 角丸の半径 */
  padding: 5px 10px;
  display: inline-block;
  box-sizing: border-box;
}

/* 投稿記事用カスタムテキスト2 - シンプルな四角い囲み */
.cocoon-custom-text-2 {
  border: 4px solid #ff0000; /* 線の太さ、種類、色を赤に変更 */
  border-radius: 8px;
  padding: 5px 10px;      /* 内側の余白 */
  display: inline-block; /* インライン要素として表示し、幅を内容に合わせる */
  box-sizing: border-box; /* パディングとボーダーを幅に含める */
  color: #ff0000; /* 文字色を赤に変更 */
  font-weight: bold; /* 文字を太字に変更 */
}

/* ------------------------------------- */
/*       かんたんリンク カスタマイズ     */
/* ------------------------------------- */

/* --------- 外枠 --------- */
div.easyLink-box {
    border:double #CCC !important; /* ２重線 */
    box-shadow: 2px 3px 9px -5px rgba(0,0,0,.25);
}

/* --- 商品リンク タイトル --- */
p.easyLink-info-name a {
    color: #3296d2 !important; /* 文字色 */
}

/* --------- ボタン色 --------- */
a.easyLink-info-btn-amazon {
background: #131921 !important; /* 背景色 */
border: 2px solid #333333 !important; /* 外枠 */
box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}

a.easyLink-info-btn-rakuten {
    background: #790019 !important; /* 背景色 */
    border: 2px solid #333333 !important; /* 外枠 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}

a.easyLink-info-btn-yahoo {
    background: #f36300 !important; /* 背景色 */
    border: 2px solid #333333 !important; /* 外枠 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}

/* --- マウスオーバー時のボタン色 --- */
a:hover.easyLink-info-btn-amazon {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #f6a306 !important; /* 文字色 */
}

a:hover.easyLink-info-btn-rakuten {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #cf4944 !important; /* 文字色 */
}

a:hover.easyLink-info-btn-yahoo {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #51a7e8 !important; /* 文字色 */
}

/* --- 最後のボタン下の空白を削除 --- */
div.easyLink-box div.easyLink-info p.easyLink-info-btn a:last-child {
    margin-bottom: 0 !important;
}

/* --- PC以外の時の設定 --- */
@media screen and (max-width: 703px) {
div.easyLink-box div.easyLink-img,
div.easyLink-box div.easyLink-img p.easyLink-img-box img.easyLink-img-pht {
    max-height: 180px !important; /* 商品画像の大きさを調整 */
}
}

/*---------------------------------
目次タイトル非表示
---------------------------------*/
/* Cocoon目次タイトルを非表示にする */
.toc-title {
  display: none;
}

/*---------------------------------
タイトルつき囲み枠 (cocoon 目次用) - タイトル中央寄せ版
---------------------------------*/
#toc {
  position: relative;
  border: 2px solid #8BC34A; /* 枠の太さ・種類・色 */
  border-radius: 4px; /* 枠の丸み */
  margin: 1.8em auto; /* 枠外の余白 */
  padding: 8px 15px;
}

#toc::before {
  content: "目次"; /* ★ここにタイトルを設定してください */
  position: absolute;
  padding: 0 0.5em; /* タイトル文字の左右の余白 */
  
  /* --- ここから変更 --- */
  left: 50%; /* 親要素の水平方向中央に配置 */
  transform: translateX(-50%); /* 要素自身の幅の半分だけ左にずらして、完全な中央にする */
  white-space: nowrap; /* タイトルが改行されないようにする */
  /* --- ここまで変更 --- */

  top: -13px; /* タイトルの垂直位置を調整 */
  color: #555555; /* タイトルの文字色 */
  font-weight: bold;
  font-size: 1.2em; /* タイトルの文字サイズ */
  background-color: #ffffff; /* ★ページの背景色に合わせてください (通常は白) */
  z-index: 1; /* タイトルが枠線の上に表示されるように */
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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