@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){
  /*必要ならばここにコードを書く*/
}
/* ページヘッダーを非表示 */
.page-header { display:none; }

/************************************
<!--
-->

/* ボックスメニューアイコンの色を変える */
.box-menu-icon {
  color: #a8bcc8; /*アイコンの色*/
}
/*カテゴリーのアイコンを変更*/
.widget_categories ul li a::before{
  font-family: "Font Awesome 5 Free"; /*Font Awesomeのバージョン*/
  content: "\f192"; /*アイコンのフォント*/
  color:#a8bcc8; /*アイコンの色*/
  padding-right:5px; /*アイコンとフォントの間の余白*/
  font-weight: 900; /*アイコンの太さ（なくてもOK）*/
  font-size:18px; /*アイコン・フォントの大きさ（なくてもOK）*/
}
/*子カテゴリーのアイコンを変更*/
.widget_categories ul li ul li a::before{ 
  font-family: "Font Awesome 5 Free"; /*Font Awesomeのバージョン*/
  content: "\f061"; /*アイコンのフォント*/
  color: #a8bcc8; /*アイコンの色*/
}
/************************************
** 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%出す*/
}

/************************************
** 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;
}

/*reCAPTCHAマークを非表示*/
.grecaptcha-badge { visibility: hidden; }
/* メインカラムの角を丸くする */
#main{
  border-radius: 20px;　/* 数値を変えたら丸みが変わる */
}

/* サイドバーの角を丸くする */
#sidebar{
	border-radius: 20px; /* 数値を変えたら丸みが変わる */
}
/************************************
** ブログカード設定
************************************/
/*線色*/
.blogcard{
	border: 3px solid yellow !important
}
/*マウスオーバー後*/
 .blogcard:hover{
	background: transparent;
	opacity: 0.5;
}

/************************************
/* === 広告PR表示法対応 === */
/* Cocoon設定メインカラム左上のPR表記 */
.pr-label-s {
  display: inline-block;
  position: absolute;
  top: -6px; /* メインカラム上端からの位置調整 */
  left: 27px; /* メインカラム左端からの位置調整 */
  margin: 0;
  padding: 6px 0 5px 0;
  width: 60px;
  text-align: center;
  color: #fff; /* 文字の色 */
  font-size: 12px;
  background: #959595; /* ラベルの色 */
  border-radius: 3px 0 0 0;
  border: none;
  }
.pr-label-s:before {
  position: absolute;
  content: '';
  top: 0;
  right: -6px;
  border: none;
  border-bottom: solid 6px #333;
  border-right: solid 6px transparent;
}
/* === 広告PR表示法対応 === */
/* Cocoon設定本文上のPR表記 */
.pr-label-l {
    border-top: 1px dotted #333; /* 上の点線 */
    border-bottom: 1px dotted #333; /* テキスト下の点線 */
    border-left: none;
    border-right: none;
    border-radius: 0;
    font-size: 13px; /* 文字サイズ */
    color: #c71585; /* 文字の色 #333*/
    text-align: left; /* テキスト中央揃え center*/
    background: #fff;
    padding: 3px 0;
    margin-bottom: 2em;
}

/************************************
** 見出し設定
************************************/
.article h2 {
  box-shadow: 0px 0px 0px 1px #8195a2;  /*点線の外側の余白と色*/
  border: dashed 2px white;  /*点線の種類、太さ、色*/
  padding: .5em;  /*余白のサイズを変える*/
  background: #f0fff0;  /*背景色を変える　#7fffd4 #8195a2 	 */
  color: #000000;  /*文字の色を変える*/
  border-radius: 2px;  /*角の丸みを取る*/
  text-align: center;  /* 見出しの文を中央揃えにする */
}

.article h3 {
  border: none;  /*Cocoon標準のデザインにあるボーダーを取る*/
  position: relative;  /*要素を相対配置にする*/
  padding: .1em .3em .4em .5em;  /*余白*/
  border-left: solid 8px #a8bcc8;  /*左の線の種類、太さ、色*/
  color: #5C676D;  /*文字の色*/
  border-bottom: solid 2px #8195a2;  /*下の線の種類、太さ、色*/
}
.article h3:before { /*左ラインの下部の色*/
  position: absolute;  /*要素を絶対配置にする*/
  content: '';  /*空欄を挿入する*/
  left: -8px;  /*左下部の線の位置の調整*/
  bottom: -2px;  /*左下部の線の位置の調整*/
  width: 8px;  /*左下部の線の太さ*/
  background-color: #5C676D;  /*左下部の色*/
  height: 50%;  /*左下部の線の色の高さ*/
}
.article h4 {
  border-top: none;  /*Cocoon標準のデザインにあるボーダーを取る*/
  border-bottom: solid 1px #a8bcc8;  /*下の線の種類、太さ、色*/
  position: relative;  /*要素を相対配置にする*/
  color: #5C676D;  /*文字の色*/
}
.article h4::after {
  position: absolute;  /*要素を絶対配置にする*/
  content: " ";  /*空欄を挿入する*/
  border-bottom: solid 2.5px #8195a2;  /*左の線の種類、太さ、色*/
  left: 0px;  /*左の線の位置の調整*/
  bottom: -1px;  /*左の線の位置の調整*/
  width: 30%;  /*左の線の長さ*/
}
.article h5 {
  border-bottom: dashed 2px #a8bcc8;  /*下部の点線の種類、太さ、色*/
  color: #5C676D;  /*文字の色*/
}
.article h6 {
  border-bottom: none;  /*Cocoon標準のデザインにあるボーダーを取る*/
  position: relative;  /*要素を相対配置にする*/
  padding-left: 1.4em;  /*余白*/
  color: #5C676D;  /*文字の色*/
}
h6::before {
  font-family: "Font Awesome 5 Free";  /*Font Awesome 5を使用する*/
  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;  /* 色の変更 */
}
/************************************
** 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;
}