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

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

/****************************************/


/************************************
**Hタグの装飾
************************************/
h1 {
	padding: 0.25em 0.5em;/*文字周りの余白*/
	color: #010101;/*文字色*/
	background: transparent;/*背景透明に*/
	font-size: 20px;
 	/*background: #ff7272;/*背景色*/
 	/*border-bottom: solid 3px #ff3838;/*下線*/
	border-left: solid 5px #ff3838;/*左線*/
}*/

/* H6 をリセット */
.article h6{
	border-bottom:none;
	padding: 0;
}

/*.entry-content h6 { ff7272 */
/* H6はポイント表示*/
.entry-content h6 {
  position: relative;
  border-top: solid 2px #ff3838;
  border-bottom: solid 2px #ff3838;
  background: #f4f4f4;
  line-height: 1.4;
  padding: 0.4em 0.5em;
  margin: 2em 0 0.5em;
}

.entry-content h6:after {
  /*タブ*/
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  font-weight: 500;
  content: '\f0a7\ POINT';
  background: #ff3838;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 5px 7px 3px;
  font-size: 0.7em;
  line-height: 1;
  letter-spacing: 0.05em;
}

/****************
タブ見出しボックス
****************/
.tab-caption-box-label{ 
	padding: 4px 16px; /*タブ内側余白*/
	font-size: 18px; /*タイトル文字の大きさ*/
	/*font-weight: bold; /*タイトル文字の太さ*/
	border-radius: 4px 4px 0px 0px;  /*タブ角丸*/
}

.tab-caption-box-content {
	position: relative;  /*配置に関するもの（ここを基準に）*/
	top: 1px; /*上から(1px）移動*/
	border: 2px solid; /*ボックス線*/
	padding: 6px 12px; /*ボックス内側余白*/
	border-radius: 4px; /*ボックス角丸*/
	border-top-left-radius: 0px; /*ボックス左上角丸*/
}

/*---------------------------------
固定ページの日付を非表示にする、おまじない
--------------------------------*/
.post-50 .date-tags ,
.post-62 .date-tags {
  display: none;
}

/* フッターの高さ変更 */
.footer {
    padding-top: 20px;
    padding-bottom: 10px;
    color: #fff;
    background-color: #eb373c;
    margin-top: 20px;
    padding: 8px;
}
.copyright {
    margin-top: 0px;
}

/* メニューバー背景の高さ */
.navi-in>ul li {
height: 60px;
line-height: 60px;
}


/***マウスオーバー時　下線が引かれる（アニメーション）****/
/*メインメニュー（補助説明を使用した場合）*/
.menu-header .menu-item{
  text-decoration: none;
  color: #fff;
}
.item-description{
  position: relative;
  z-index: 1;
}
.item-description:after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0px;/*テキストからの距離*/
  width: 0%;/*初期状態・下線非表示*/
  height: 2px;/*下線の高さ*/
  background: #fff;/*下線の色*/
  z-index: -1;
  transition: all 0.4s;/*アニメーション速度*/
}
.menu-header .menu-item:hover .item-description:after{
 width: 100%;/*hover時に表示*/
}
/*サブメニュー*/
.sub-menu .item-label:after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0px;/*テキストからの距離*/
  width: 0% !important;/*初期状態・下線非表示*/
  height: 2px;/*下線の太さ*/
  background: #fff;/*下線の色*/
  z-index: -1;
  transition: all 0.4s;/*アニメーション速度*/
}
.sub-menu .menu-item:hover .item-label:after{
  width:100% !important;/*hover時に表示*/
  /*margin-left:-10px*/
}

/************************************
** ●ヘッダーサブメニューのカスタマイズ
************************************/
/*スマホのサイドバーメニューを左から右に表示*/
.sidebar-menu-content {
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
  right: auto;
  left: 0;
} 

/*スマホのカスタムメニューを右から左に表示*/
.navi-menu-content{
	left: auto;
	right: 0;
	transform: translateX(101%);
}

/*ヘッダーの文字と背景の色を変える追加CSS*/
.menu-button-in{
	color: #FFFFFF!important;
	background-color: #ff3838!important;
}
/*リンク文字列色の変更*/
.menu-caption{
	color: #FFFFFF!important;
}
.mobile-menu-buttons {
	background: #ff3838;
}

/************************************
**モバイル表示　ヘッダーメニュー・検索アイコン
************************************/
.menu-drawer a{
	/*font-size: 1.1em;/*文字の大きさ*/
	color: #494949;/*文字の色*/
	/*height: 3em;/*行の高さ*/
}

ul.menu-drawer:before{
color:#494949;
margin-bottom:1em;
border-bottom:3px dotted #494949; /*点線の色変更はこちら*/
content: "記事カデコリ";
}

.menu-drawer li {
padding:0;
}
.menu-drawer li{
font-weight: bold;
}
.menu-drawer a{
margin: .5em 0;
}

.menu-drawer .sub-menu {
padding:0;
}
.menu-drawer .sub-menu li{
font-size: .9em;
}
.menu-drawer .sub-menu li a::before {
font-family: "Font Awesome 5 Free";
content : "\f105";
color:#fff;
margin:0 .5em 0 1em;
}
@media (max-width:834px){
.sub-menu{
box-shadow: none;
}
}


/************************************
** サイドバープロフィールの名前
************************************/
.author-box .author-content .author-name a{
text-decoration: none;
font-size:1.2em;
color:#494949;
}

/************************************
** サイドバーの項目
************************************/
/*プロフィール*/
.sidebar h3 {
  text-align: left;
  color: #494949;
  border: 0px;
  border-left: solid 5px #ff3838;/*左線*/
  background:transparent;/*背景を透明に*/
  padding:4px 5px 5px 3px;
}
/*その他*/
.sidebar h2 {
  text-align: left;
  color: #494949;
  border: 0px;
  border-left: solid 5px #ff3838;/*左線*/
  background:transparent;/*背景を透明に*/
  padding:4px 5px 5px 3px;
}

/************************************
** サイドバープロフィールの枠線を消す
************************************/
.author-box {
  border: 0px;
}

/************************************
** アイコン高さ
************************************/
.author-box .author-thumb img{
  height: 150px;
}
/************************************
** アイコン横幅
************************************/
.nwa .author-box .author-thumb{
  width: 150px;
}

/*SNSシェアボタン*/
.sns-share-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-share-buttons {
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: center; /*中央寄せ*/
}
#main .sns-share-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 6px; /*ボタン同士の間隔*/
}
#main .sns-share a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

/************************************
** フォローボタン（ウィジェット）のみ丸くする
************************************/
/************************************
** ●SNSフォローボタン
************************************/

#main .button-caption {
	display: none; /*キャプション非表示*/
}

.sns-follow.sf-widget .sns-follow-buttons {
	justify-content: center; /*左寄せ*/
	flex-wrap: nowrap; /*折り返す*/
}
.follow-button {
  border-radius:50px!important; /*角丸コーナー*/
}
.author-box .author-content .author-follows .sns-buttons{
  justify-content: center;
}
.author-box .author-content .author-follows .sns-buttons a.follow-button{
  border-radius: 50%;
  border: none;
  width: 40px!important;
  height: 40px!important;
  color: #fff!important;
  margin:0 3px;
  transition: .5s;
}

.author-box .author-content .author-follows .sns-buttons a.follow-button span{
  line-height: 40px;
}
.author-box .author-content .author-follows .sns-buttons a.follow-button span::before{
  font-size: 25px !important;
}

div.author-follows a.follow-button.twitter-button.twitter-follow-button-sq{
  background-color: #1DA1F2!important;
}
div.author-follows a.follow-button.note-button.note-follow-button-sq{
  background-color: #41C9B4!important;
}

/************************************
** 固定ページの日付非表示
************************************/
.post-41 .date-tags,
.post-50 .date-tags,
.post-62 .date-tags {
display: none;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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