@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){

 /*スマホ&タブレットのh1の上下左右の余白調整、デフォルトは左右の余白が多すぎるため*/
.article h1{
  padding: 10px 5px;
}

}

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

/************************************************************************
** 共通カスタマイズ
************************************************************************/

/*---------------------------------
アイキャッチ画像のカテゴリラベルを消す
--------------------------------*/

.cat-label {
  display: none;
}

/*---------------------------------
記事の上部の余白を無くす
--------------------------------*/

.content {
  margin-top: 0;
}
.article h1 {
  margin-top: 0;
  padding-top: 0;
}

/*---------------------------------
タグの鉛筆マークを消す
--------------------------------*/

.tag-caption .fa-tag {
    display: none;
}

/*マイクロコピーの「上配置」micro-topを選んだ時の行間調整CSS
.article .micro-top {
  margin-bottom: .36em;
}*/

/*---------------------------------
サイドバーのカテゴリに点線を付ける
--------------------------------*/

.widget_categories ul li a{ 
  border-bottom: 1px dashed #CCCCCC; /* 下線の種類 */
}

/*
==================================================
FANZAテンプレート関連
==================================================
*/

/*------------------------------------------------
FANZAテンプレートで改行したいところに使用
-------------------------------------------------*/

/*緑色→白枠で表示しない設定*/
.blank-box.bb-green {
	border-color: #ffffff;
	border:none;
	padding: 0;
}

/*------------------------------------------------
インデックスのアイキャッチ画像とタイトル間の余白調整
-------------------------------------------------*/

.entry-card-title {
   margin-top: 0px;
   font-size: 15px;
}

/*------------------------------------------------
赤い光るボタンの文字を大きくする（モバイルで威力を発揮）
-------------------------------------------------*/

.btn-l, .ranking-item-link-buttons a, .btn-wrap.btn-wrap-l>a {
    font-size: 22px;
}

/*
==================================================
表テーブルのカスタマイズ（大変だった！変化する恐れがある！）
==================================================
*/

/*------------------------------------------------
テーブルの縦の線を消す・1行目の色をピンクから灰色に変更
-------------------------------------------------*/

.wp-block-table table {
	border-width: 2px 0px;
    border-color: rgba(0,0,0,.5);
}

.wp-block-table td,.wp-block-table th {
  border-color: rgba(0,0,0,.4);
	border-width: 1px 0px;
	background-color: white;
}

.wp-block-table table tr:nth-of-type(2n+1) {
	background-color: white;
}

.wp-block-table th {
	background-color: #f7f9f9;
}

/*------------------------------------------------
テーブルの1行目の幅を固定して背景のピンクを白くする・下線の色をピンクから灰色に変更
-------------------------------------------------*/

table th, .scrollable-table th {
    width: 90px;
	border-color: #e0e0e0 !important;
}

/*------------------------------------------------
さらにテーブルの2行目の下線の色をピンクから灰色に変更
-------------------------------------------------*/

table td, .scrollable-table td {
	border-color: #e0e0e0 !important;
}

/*------------------------------------------------
光るボタンに影を付ける
-------------------------------------------------*/

.btn[class*=btn-], .ranking-item-link-buttons a[class*=btn-] {
     box-shadow: 0 5px 5px rgba(0, 0, 0, .25);
}

/*------------------------------------------------
パンくずリストを目立たせる
-------------------------------------------------*/

.breadcrumb-home{
	color: black;
	font-size: 14px;
}

.breadcrumb-item{
	color: black;
	font-size: 14px;
}

.breadcrumb-caption{
	color: black;
	font-size: 14px;
	font-weight: bold;
}

/*
==================================================
以下は通常変更内容
==================================================
*/

/*------------------------------------------------
reCaptchaマークを消すCSS
-------------------------------------------------*/

.grecaptcha-badge { visibility: hidden; }

/*---------------------------------
フッターメニューの枠を消す
--------------------------------*/

#navi-footer li {
  border: none;
}

/*------------------------------------------------
エントリーカードのカテゴリーラベルだけ非表示
-------------------------------------------------*/
.entry-card .cat-label{
  display: none;
}

/*---------------------------------
ブログカードのファビコンとURLを消す
--------------------------------*/

.internal-blogcard-footer{
	display: none
}

/*
==================================================
アフィリエイト商品リンクボックス
==================================================
*/

/* 枠の太さを細くして丸みをつけただけ */
.booklink-box, .kaerebalink-box, .tomarebalink-box, .product-item-box {
    border: 3px solid #dfdfdf;
	border-radius: 4px;
	border-color: #ffe5e5;
	/* margin: 0 auto;枠をセンターに寄せる場合に使用 */
}

/*
==================================================
見だしのカスタマイズ
==================================================
*/

/*---------------------------------
h2.h3.h4見出しカスタマイズ
--------------------------------*/

/* H2カスタマイズ・左ライン */
.article h2{
  background:none;
  padding: 0.4em;/*文字周りの余白*/
  color: #2d2d2d;/*文字色*/
  border-bottom: solid 3px #C1AB05;/*線の種類（実線） 太さ 色*/
  margin-top: 0;
}

/* H3カスタマイズ・左ラインの太さ調整 */
.article h3{
  background: #2d2d2d;/*背景色*/
  color: #FFFFFF;/*文字色*/
  margin-top: 0;
}

/* H4カスタマイズ・左ラインの太さ調整 */
.article h4{
  margin-top: 0;
}

/*
==========================================================
cocoonのデフォルトボックスのカスタマイズ
==========================================================
*/

/*------------------------------------------------
枠の色を変更
-------------------------------------------------*/

/*赤色→ゴールド枠*/
.blank-box.bb-red {
    border-color: #C1AB05;
}
.blank-box.bb-tab.bb-red .bb-label {
  background-color: #C1AB05;}

/*黄色→黄色塗り*/
.blank-box.bb-yellow {
	background-color:#fffaf4;
	border:none;
	color: #000000;
}

/*灰色→灰色枠*/
.blank-box {
    border-color: #ccc;
    color: #000000;
}

/*
==========================================================
引用ボックス・設定しないとピンクになる…
==========================================================
*/

blockquote{
  background: #fff7fa;/*背景色を少し濃いめの灰色に*/
  border-radius: 5px; /*角を丸める*/
border-color:#ff68b3;

}

blockquote:before{ /*上の引用アイコンカラー*/
color: #ff68b3;
}

blockquote:after{ /*下の引用アイコンカラー*/
color: #ff68b3;
}

/*
==========================================================
モバイルメニュー
==========================================================
*/

/*------------------------------------------------
フッターのアイコンが2つ白くならないので修正
-------------------------------------------------*/

.mobile-footer-menu-buttons .menu-button a,
.navi-menu-content,
.menu-drawer a,
.menu-drawer a:hover{
  color: white;
}

/*------------------------------------------------
背景色をピンクとボタンの色を白くする。入れないと白塗りの黒文字になる
-------------------------------------------------*/

.mobile-menu-buttons {
  background: #000000;/* メニューの背景色 */
}
	
	.mobile-menu-buttons {
    color: #ffffff; /* 文字色 */
}

/* スライドインメニュー背景色 */
.navi-menu-content {
	background: #d4cc92;
	color: #ffffff; /*文字色*/
}

/*
==================================================
デザイン
==================================================
*/

/*---------------------
PC本文に枠線を付ける
----------------------*/

#main{
   border: .5px solid #ededed;
   border-radius: 4px;
}

/*------------------------------------------------
トップページのカードをマウスを当てたときにフワッと浮かせる
-------------------------------------------------*/

.entry-card-wrap:hover {
    box-shadow: 0 8px 16px -6px rgba(0,0,0,0.2);
    transform: translateY(-2px);
    background-color: #fff;
    transition: all .3s ease;
}

/*---------------------------------
記事下の余白をゼロにした。タグ表示と隙間が広いため
--------------------------------*/

.entry-content {
    margin-bottom: 0em;
}

/*
==================================================
ユーティリティ
==================================================
*/

/*---------------------------------------
トップへ戻るボタンを丸くして半透明に
----------------------------------------*/

.go-to-top-button {
    width:  50px;
    height: 50px;
    border-radius: 50%;
	opacity: 0.8;
}