@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){
  /*必要ならばここにコードを書く*/
}

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

/************************************
**HOMEページ設定
************************************/

/*HOMEページのタイトルを非表示*/
.home.page .entry-title{
display: none;
}
/*HOMEページの投稿日を非表示*/
.home.page .post-date{
display: none;
}
/*HOMEページの更新日を非表示*/
.home.page .post-update{
display: none;
}
/*HOMEページの投稿者名を非表示*/
.home.page .author-info{
display: none;
}

/************************************
**固定ページ設定
************************************/

/*固定ページの日付を非表示にする*/
.post-17 .date-tags,
.post-18 .date-tags,
.post-19 .date-tags{
  display: none;
}

/************************************
**ヘッダー設定
************************************/

/*ヘッダーモバイルボタンの背景と文字の色を変える*/
.mobile-menu-buttons {
 background: #00ffff;
 color: #000000;
}

/************************************
**グローバルメニュー設定
************************************/

/*グローバルメニューに影*/
nav#navi, .menu-header .sub-menu{
	box-shadow:0 5px 12px -5px rgba(0,0,0,.6);
}

/***マウスオーバー時　下線が引かれる（アニメーション）****/
/*メインメニュー*/
.menu-header .menu-item{
  text-decoration: none;
  color: #5bc8ac;
}
.item-label{
  position: relative;
  z-index: 1;
}
.item-label:after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0px;/*テキストからの距離*/
  width: 0%;/*初期状態・下線非表示*/
  height: 2px;/*下線の高さ*/
  background: #808080;/*下線の色*/
  z-index: -1;
  transition: all 0.4s;/*アニメーション速度*/
}
.menu-header .menu-item:hover .item-label:after{
 width: 100%;/*hover時に表示*/
}

/*サブメニュー*/
.sub-menu .item-label:after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0px;/*テキストからの距離*/
  width: 0% !important;/*初期状態・下線非表示*/
  height: 2px;/*下線の太さ*/
  background: #808080;/*下線の色*/
  z-index: -1;
  transition: all 0.4s;/*アニメーション速度*/
}
.sub-menu .menu-item:hover .item-label:after{
  width:80% !important;/*hover時に表示*/
  margin-left:-10px
}

/*マウスオーバー時 背景色が変わる*/
#navi .navi-in a:hover{
	background: #f5f5f5;
	transition: 0.8s ;
}

/************************************
**表の設定
************************************/

/*表の背景透過*/
.container table tr {
  background-color: transparent;
}




/************************************
** SNS ボタンをまとめて小さくする
************************************/

/*トップシェアボタンの枠組み*/
.sns-share.ss-top .sns-share-buttons {
	justify-content: flex-end; /*右に寄せる*/
}

/*ボトムシェア・フォローボタンの枠組み*/
.sns-share.ss-bottom .sns-share-buttons,
.sns-follow.sf-bottom .sns-follow-buttons,
.sns-follow.sf-widget .sns-follow-buttons {
	justify-content: center; /*中央に寄せる*/
	flex-wrap: wrap; /*折り返す*/
}

/*シェア・フォローボタンのリンク*/
.sns-share.ss-top .sns-buttons a,
.sns-share.ss-bottom .sns-buttons a,
.sns-follow.sf-bottom .sns-buttons a,
.sns-follow.sf-widget .sns-buttons a {
	width: 40px; /*横幅*/
	height: 28px; /*高さ*/
	margin-right: 4px; /*右側の余白*/
	margin-left: 4px; /*左側の余白*/
	border-radius: 3px; /*丸み*/
}

/*シェアボタンのアイコン*/
.sns-share.ss-top .sns-buttons a .social-icon,
.sns-share.ss-bottom .sns-buttons a .social-icon {
	font-size: 16px; /*アイコンの大きさ*/
}

/*フォローボタンのアイコン*/
.sns-follow.sf-bottom .sns-follow-buttons .follow-button,
.sns-follow.sf-widget .sns-follow-buttons .follow-button {
	font-size: 20px; /*アイコンの大きさ*/
}

/*シェアボタンのキャプション*/
.sns-share.ss-top .sns-buttons a .button-caption,
.sns-share.ss-bottom .sns-buttons a .button-caption {
	display: none; /*非表示*/
}

/*シェア・フォローボタンのシェア数*/
.sns-share.ss-top .sns-buttons a .share-count,
.sns-share.ss-bottom .sns-buttons a .share-count,
.sns-follow.sf-bottom .sns-buttons a .follow-count,
.sns-follow.sf-widget .sns-buttons a .follow-count {
	right: 1px; /*右側からの距離*/
	bottom: 0; /*下側からの距離*/
	font-size: 10px; /*文字の大きさ*/
}

.hidden_box {
	margin: 10px 0;
	padding: 0;
	text-align: ;
}

.hidden_box label {
	border: 1px solid #ddd;
	border-radius: 5px;
	cursor: pointer;
	font-weight: bold;
	margin: 0 auto;
	padding: 10px;
	min-width: 50%;
}

.hidden_box label:hover {
	background: #f5f5f5;
}

.hidden_box label:after {
	content: "";	/* 閉じている状態のときにラベルの後ろに続く文字 */
}

.hidden_box input {
	display: none;
}

.hidden_box .hidden_show {
	height: 0;
	overflow: hidden;
	opacity: 0;
	padding: 0;
	text-align: left;
	transition: 0.5s;
}

.hidden_box input:checked + label:after {
	content: "";	/* 開いている状態のときにラベルの後ろに続く文字 */
}

.hidden_box input:checked ~ .hidden_show {
	height: auto;
	opacity: 1;
	padding: 10px 0;
}





/*次のページのボタンを消す*/
.pagination-next-link {
  display: none;
}

/*---------------------------------
モバイル端末のみロゴの横幅を固定
--------------------------------*/
@media (max-width: 768px) {
  .header__logo img {
    max-width: 200px; /* ロゴの横幅 */
  }
}


/************************************
**アイキャッチのカテゴリー表示消去
************************************/
.cat-label {
  display: none;
}