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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*全てをまとめて非表示*/
.home.page .entry-title,
.home.page .date-tags,
.home.page .author-info {
  display: none;
}

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

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

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

/************************************
** 固定ページの背景色設定
************************************/
/*
.main{
    background-color: #f5f5f5;
}
.a-wrap {
    color: #fff;
}
 */

/************************************
** YouTubeの画像を中央に設定
************************************/
.video-container {
  margin: 0px auto;
}

/************************************
** グローバルメニュー
************************************/
/*ホバー時にメニューにアンダーラインを出す*/
#navi .navi-in a:after {
  position: absolute; /*線の位置を絶対配置に*/
  content: ""; /*文字はなし*/
  left: 0px; /*線の位置*/
  bottom: 0; /*線の位置*/
  height: 2px; /*線の高さ*/
  width: 100%; /*幅いっぱいに線を引く*/
  background: #0000ff; /*線の色*/
  transform: scale(0,1); /*ホバー前は線を消す*/
  transition: 0.3s; /*線が0→100%になるまでの秒数*/
}

#navi .navi-in a:hover:after {
  transform: scale(1); /*マウスオーバー後、線を100%出す*/
}

/************************************
** ブログカード設定
************************************/
/*線色*/
.blogcard {
  border: 3px solid gray !important;
}
/*マウスオーバー後*/
.blogcard:hover {
  background: transparent;
  opacity: 0.5;
}

/*reCAPTCHAマークを非表示*/
.grecaptcha-badge {
  visibility: hidden;
}

/************************************
** Contact Form 7カスタマイズ
************************************/
/*スマホContact Form 7カスタマイズ*/
@media (max-width: 500px) {
  .inquiry th, .inquiry td {
    display: block !important;
    width: 100% !important;
    border-top: none !important;
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
  }
  .inquiry tr:first-child th {
    border-top: 1px solid #d7d7d7 !important;
  }
  /* 必須・任意のサイズ調整 */  
  .inquiry .haveto, .inquiry .any {  
    font-size: 10px;
  }
}

/*見出し欄*/
.inquiry th {
  text-align: left;
  font-size: 14px;
  color: #444;
  padding-right: 5px;
  width: 30%;
  background: #f7f7f7;
  border: solid 1px #d7d7d7;
}
/*通常欄*/
.inquiry td {
  font-size: 13px;
  border: solid 1px #d7d7d7;  
}
/*横の行とテーブル全体*/
.entry-content .inquiry tr, .entry-content table {
  border: solid 1px #d7d7d7;  
}
/*必須の調整*/
.haveto {
  font-size: 7px;
  padding: 5px;
  background: #ff9393;
  color: #fff;
  border-radius: 2px;
  margin-right: 5px;
  position: relative;
  bottom: 1px;
}
/*任意の調整*/
.any {
  font-size: 7px;
  padding: 5px;
  background: #93c9ff;
  color: #fff;
  border-radius: 2px;
  margin-right: 5px;
  position: relative;
  bottom: 1px;
}
/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item {
  display: block;
}
/*送信ボタンのデザイン変更*/
#formbtn {
  display: block;
  padding: 1em 0;
  margin-top: 30px;
  width: 100%;
  background: #FF533D;
  color: #fff;
  font-size: 18px;
  font-weight: bold;  
  border-radius: 2px;
  border: none;
}
/*送信ボタンマウスホバー時*/
#formbtn:hover {
  background: #fff;
  color: #FF533D;
}

/************************************
** 見出し設定
************************************/
/* 見出しのデザインリセット */
/*H2 */
.entry-content h2 {
  border: none;
  background: none;
  padding: 0;
}

/* H3 */
.entry-content h3 {
  border: none;
  background: none;
  padding: 0;
}

/* H4 */
.entry-content h4 {
  border: none;
  background: none;
  padding: 0;
}

/* H5 */
.entry-content h5 {
  border: none;
  background: none;
  padding: 0;
}

/* H6 */
.entry-content h6 {
  border: none;
  background: none;
  padding: 0;
}

/*再設定 見出しのデザイン */
/*H2 */
.entry-content h2 {
  color: #6594e0;
  font-size: 20px;
  background-color: #FFFEF9;
  padding-top: 13px;
  padding-left: 5px;
  padding-bottom: 12px;
  border-top: solid 2px #6594e0;
  border-bottom: double 2px #6594e0;
  text-align: center;
}
/*H3*/
.entry-content h3 {
  border: none;
  position: relative;
  padding: .1em .3em .4em .5em;
  border-left: solid 8px #6594e0;
  color: #5C676D;
  border-top: solid 3px #8195a2;
  border-bottom: solid 1px #5C676D;
  font-size: 18px;
}
/*H4*/
.entry-content h4 {
  color: #5C676D;
  font-size: 18px;
  background-color: #FFFFFF;
  padding: 10px;
  border-bottom: solid 1px #FFFFFF;
}
.entry-content h4::after {
  position: absolute;
  content: "";
  border-bottom: solid 2.5px #8195a2;
  left: 0px;
  bottom: -1px;
  width: 100%; /* ※元のコードは0%でした。線を表示させるなら100%にする必要があります */
}
/*H5*/
.entry-content h5 {
  border-bottom: dashed 2px #a8bcc8;
  color: #5C676D;
}
/*H6*/
.entry-content h6 {
  border-bottom: none;
  position: relative;
  padding-left: 1.4em;
  color: #5C676D;
}
.entry-content h6::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /* ※Font Awesome 5のSolidアイコンを表示するため追記 */
  content: "\f00c";
  position: absolute;
  left: 0;
  color: #a8bcc8;
}

/************************************
** サイドバー見出し設定
************************************/
.sidebar h3 {
  background: transparent;
  text-align: center;
  padding: 0px;
  margin: 0px 0px 10px 0px;
  border-bottom: dashed 2px #a8bcc8;
  color: #5C676D;
}

/************************************
** 画像設定 (PC/SP表示切り替え)
************************************/
/* PCの場合 */
.pc { display: inline !important; }
.mb { display: none !important; }

@media screen and (max-width: 768px) {
  /* タブレット、スマホの場合 */
  .pc { display: none !important; }
  .mb { display: inline !important; }
}

/************************************
** 目次カスタマイズ
************************************/
.toc {
  background-color: #fbfaf9;
  border-color: #5F9EA0;
}
.toc-title {
  background-color: #6495ED;
  font-size: 1.2em;
  padding: 0.3em;
  font-weight: bold;
  color: #ffffff;
}
.toc-title:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /* ※Font Awesome 5のアイコンを表示するため追記 */
  content: "\f03a";
  font-size: 20px;
  margin-right: 10px;
  color: #a8bcc8;
  background-color: #ffffff;
  border-radius: 50%;
  padding: 8px;
}
.toc a {
  color: #5C676D;
}
.toc-content ol li {
  color: #8195a2;
  margin: 0.5em;
}
.toc-list > li {
  font-weight: bold;
}
.toc-list > li li {
  font-weight: normal;
}

/************************************
** SNSフォローボタン設定
************************************/
.sns-follow-buttons a {
  background: none !important;
  border-radius: 50%;
  border: gray 1px solid;
  color: gray;
  width: 50px !important;
  height: 50px;
  margin: 0 10px;
  font-size: 35px;
}
/************************************
** SNSフォローボタン設定（完全版）
************************************/
/* ボタンの外枠と背景の調整 */
.sns-follow-buttons a {
  background: none !important; /* 背景色を消す */
  border: gray 1.5px solid !important; /* 枠線を少し太くして視認性を高める */
  border-radius: 50%;
  width: 50px !important;
  height: 50px !important;
  margin: 0 10px;
  /* ↓アイコンを上下左右のど真ん中に配置するための必須コード */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  transition: all 0.3s ease; /* ホバー時のアニメーション用 */
}

/* ★超重要：内側のロゴ（アイコン）自体の色を強制的にグレーにする */
.sns-follow-buttons a span,
.sns-follow-buttons a i {
  color: gray !important;
  font-size: 26px !important; /* 枠からはみ出ない最適なサイズ */
  margin: 0 !important; /* デフォルトの余白をリセット */
}

/* 読者のクリック率（CTR）を高めるマウスホバー時のアクション */
.sns-follow-buttons a:hover {
  background: gray !important; /* ホバー時に背景をグレーに */
  transform: translateY(-3px); /* 少しフワッと浮き上がらせる */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* ホバー時はロゴを白に反転させる */
.sns-follow-buttons a:hover span,
.sns-follow-buttons a:hover i {
  color: #fff !important;
}