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

/*検索ボックスのカスタマイズ（一体型・オーソドックス）*/
/*ここから*/
/*入力欄*/
.search-box .search-edit {
	padding: 8px;
	padding-right: 68px;
	border-color: #999;
}

/*検索ボタン*/
.search-box .search-submit {
	top: 0;
	right: 0px;
	height: 100%;
	width: 60px;
	color: #fff;
	background-color: #999;
	border-radius: 0 4px 4px 0;
}

.search-box .fa-search {
	display: block;
	margin-top: 3px;
}

/*入力欄と検索ボタンの強調の無効化*/
.search-box .search-edit:focus, .search-box .search-submit:focus {
	outline: 0;
	outline-offset: unset;
}
/*ここまで*/


/* インデックスカード ホバー設定 */
.entry-card-wrap:hover{
	transform: translate(-10px,-10px);
    box-shadow: 2px 2px 6px 0 #ccc;
}


/* アイキャッチマウスオーバーで記事を読む */

.card-thumb {
    overflow: hidden;
    position: relative;
  }
.card-thumb::after{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "記事を読む";
    font-family: sans-serif;
    font-weight: bold;
    font-size: 80%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: .3s;
}
.entry-card:hover {
    cursor: pointer;
}
.entry-card:hover .card-thumb::after{
    opacity: 1;
    font-size: 130%;
}
.entry-card-2 img {
    transition: .3s;
}
.entry-card:hover .card-thumb img {
    filter: blur(3px) brightness(60%);
    transform: scale(1.1);
}

/************************************
** コメント非表示
************************************/


.comment-notes,
.comment-form-email,
.comment-form-url,
.form-allowed-tags{
  display:none;
}


/************************************
** ウィジェットエントリーカード  ホバー
************************************/

.widget-entry-card-content{
 font-size: 10pt;
}

.widget-entry-cards a:hover {/*ホバー*/
	transform: translate(-10px,-10px);
	box-shadow: 2px 2px 6px 0 #ccc;
}


/************************************
** エントリーカード  ホバー
************************************/

.related-list a:hover {/*ホバー*/
	transform: translate(-10px,-10px);
	box-shadow: 2px 2px 6px 0 #ccc;
}


/************************************
** 区切り線カスタマイズ
************************************/

hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.hr1 {
  border:none;
  border-top:dotted 2px #006400;
  height:1px;
  color:#FFFFFF;
  margin-top:2em;
  margin-bottom:2em;
}


/************************************
** 記事タイトル h1　スタイル変更
************************************/

.article h1 {
	color: #006400;
	font-size: 24px;
	padding: 10px 0px 10px 0px;
	border-bottom: 2px dotted red;
}
.article h1::first-letter {
	color: red;
	font-size: 40px;
}


/** h2　スタイル変更 */
.article h2 {
    position: relative;
    color: #f8f8f8;
    background: #006400;
    font-size: 16pt ;
    border: 0px solid #9ef84d;
    margin: 10px 10px 20px 10px;
    padding: 10px 5px 10px 10px;
    border-radius: 3px;
    box-shadow:2px 3px 7px 2px  #666666 ;
}
.article h2:after, .article h2:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
}
.article h2:after {
    left: 40px;
    border: 10px solid transparent;
    border-top: 10px solid #006400;
}
.article h2:before {
    left: 40px; 
    border: 10px solid transparent;
    border-top: 10px solid #9ef84d;
}



.entry-content .post-password-form p:nth-child(2) {
	width: 60%;
	margin: auto;
}



/** h3　色変更 */

.article h3 {
	color: #8b4513;
}


/************************************
** 行間調節
************************************/

.entry-content p {
    line-height: 1.75em;
    margin: 5px 5px 5px 5px;
}


/************************************
** マウスオーバー　tips説明
************************************/

.tooltip { /* 補足説明するテキストのスタイル */
  position: relative;
  cursor: pointer;
  padding: 0 5px;
  font-size: 1em;
  color: #4682b4;
}
 
.description_top { /* ツールチップのスタイル */
  width: 200px; /* 横幅 */
  position: absolute;
  left: 50%;
  bottom: 80%; /* Y軸の位置 */
  transform: translateX(-50%);
  margin-bottom: 8px; /* テキストとの距離 */
  padding: 8px;
  border-radius: 10px; /* 角の丸み */
  background-color: #666;
  font-size: 0.7em;
  color: #fff;
  text-align: center;
  visibility: hidden; /* ツールチップを非表示に */
  opacity: 0; /* 不透明度を0％に */
  z-index: 1;
  transition: 0.5s all; /* マウスオーバー時のアニメーション速度 */
}
 
.tooltip:hover .description_top { /* マウスオーバー時のスタイル */
  bottom: 100%; /* Y軸の位置 */
  visibility: visible; /* ツールチップを表示 */
  opacity: 1; /* 不透明度を100％に */
}

.description_tops { /* ツールチップのスタイル */
  width: 200px; /* 横幅 */
  position: absolute;
  left: 50%;
  bottom: 80%; /* Y軸の位置 */
  transform: translateX(-50%);
  margin-bottom: 8px; /* テキストとの距離 */
  padding: 8px;
  border-radius: 10px; /* 角の丸み */
  background-color: #666;
  font-size: 0.7em;
  color: #fff;
  text-align: left;
  visibility: hidden; /* ツールチップを非表示に */
  opacity: 0; /* 不透明度を0％に */
  z-index: 1;
  transition: 0.5s all; /* マウスオーバー時のアニメーション速度 */
}

.tooltip:hover .description_tops { /* マウスオーバー時のスタイル */
  bottom: 100%; /* Y軸の位置 */
  visibility: visible; /* ツールチップを表示 */
  opacity: 1; /* 不透明度を100％に */
}