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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*フェードイン設定*/
#main{
    animation: fadeIn 1s ease-out 0s 1 normal;
}
#sidebar {
    animation: fadeIn 1s ease-out 0s 1 normal;
}

@keyframes fadeIn {
    from {transform: translateY(10%); opacity: 0;}
    100% {transform: translateY(0%); opacity: 1;}
}
#header-container {
    animation: Down 1s ease-out 0s 1 normal;
}

@keyframes Down {
    from {transform: translateY(-20%); opacity: 0;}
    100% {transform: translateY(0%); opacity: 1;}
}

#breadcrumb {
    animation: Right 1s ease-out 0s 1 normal;
}

@keyframes Right {
    from {transform: translateX(10%); opacity: 0;}
    100% {transform: translateX(0%); opacity: 1;}
}
/*メニューバー設定*/
.navi {
background-color:none;
z-index: 10;
border-top:1px dotted #888;
border-bottom:1px dotted #888;
}
#navi .navi-in > ul { 

}

.logo-header img {
  width: 700px;
}

.site-description{
  line-height: 10%;
}

.home main, .archive main{
background-color: transparent;
margin-top: 0;
padding-top: 0;
}

.category-content{
background-color: white;
padding: 1em 1em 0.2em;
margin-bottom: 1em;
}

.entry-card-wrap{
transition: all .3s ease;
margin-bottom: 1em!important;
background-color: white;
border-radius: 4px;
}

.entry-card-wrap:hover{
box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
transform: translateY(-2px);
background-color: white;
}

.sidebar{
 border:none !important;
}
.sidebar h3{
position: relative;
background: none;
color: #666;
padding: 10px 60px;
border-radius: 0;
border-bottom: dotted 5px #777;
text-align:left;
}
.sidebar h3:before {
content:  url(https://neepluslog.com/wp-content/uploads/2018/04/icon01.png);
position: absolute;
left: 0;
top: 0;
}

.sidebar .search-box, .search-menu-content .search-box {
  width: 100%;
  margin: 1em 0 2em;
  position: relative;
  display: flex;
  border-radius: 50px; /*全体を囲むボックスの角丸*/
  box-shadow:0px 4px 6px 0px #c4c4c4; /*全体を囲むボックスのシャドウ*/
}
.search-menu-content .search-box {
  box-shadow:0px 4px 6px 0px #333; /*スライドイン表示でのシャドウ*/
}
.sidebar .search-edit, .search-menu-content .search-edit {
  width: 80%; /*入力部分の長さ*/
  background: #fff; /*入力部分の背景色*/
  padding: 0 10px;
  border: none; /*ボーダーを消す*/
  border-radius: 50px 0 0 50px; /*左上、左下のみ角丸*/
  font-size: 16px;
}
.search-submit {
  width: 20%; /*ボタン部分の長さ*/
  background: #444d53; /*ボタン部分の背景色*/
  color: #fff; /*アイコンの色*/
  position: static;
  right: auto;
  top: auto;
  font-size: 20px; /*アイコンの大きさ*/
  cursor: pointer;
  line-height: 40px; /*検索窓の高さ*/
  border: none;
  border-radius: 0 50px 50px 0; /*右上、右下のみ角丸*/
  padding: 0;
}
.search-box input::placeholder {
  color: #bbb; /*プレースホルダーの色*/
}
.search-box input:focus, .search-box button:focus {
  outline: 0; /*フォーカス時の枠線を消す*/
}

.widget_categories ul li a { /*親カテゴリ用のコード*/
    color: #333;
    text-decoration: none;
    padding: 6px 0;
    display: block;
    padding-right: 4px;
    padding-left: 4px;
    border-top: 1px dotted #ccc; /*上部にボーダーを引く*/
    font-size: 16px;
}
.widget_categories ul li a::before { /*親カテゴリのアイコン*/
    font-family: FontAwesome;
    content: "\f0da";
    padding-right: 10px;
}
.widget_categories > ul > li > a:first-child { 
    border-top: none; /*最初の親カテゴリは上部ボーダーを消す*/
}
.widget_categories > ul > li > a:last-child {
    border-bottom: 1px dotted #ccc; /*最後の親カテゴリは下部ボーダーを引く*/
}
.widget_categories ul li a:hover { /*親子共通マウスホバー時*/
    background: none;
    transition: 0.5s;
    color: #72c7e6;
}
.widget_categories ul li ul { /*子カテゴリのボックス*/
    border-bottom: 1px dotted #ccc;
}
.widget_categories ul li ul li a { /*子カテゴリ用のコード*/
    color: #333;
    text-decoration: none;
    padding: 0 4px 4px 4px;
    display: block;
    border: none;
}
.widget_categories ul li ul li a::before { /*子カテゴリのアイコン*/
    font-family: FontAwesome;
    content: "・";
    padding: 0;
}

.post-meta{
  margin-bottom: 0.5em;
  text-align:right;
  background-color:#fff;
  color:#555;
  font-size:16px;
}

/* メタ情報の大きさを変更し、右側へ*/
.post-meta,.entry .post-meta a {
    font-size: 12px;
    line-height: 160%;
}

.entry .post-meta {
    text-align: right !important;
    margin-top: 1px !important;
}

.entry-snippet{
  margin:0 0 0 0;
}

.entry .post-meta .category a, .post-meta .category a, .entry .post-meta .category a {
    color: #999;
	  background:white;
	  border: solid 1px lightblue;
    padding: 0px 4px;
    border-radius: 4px;
    letter-spacing: 0.11em;
    text-decoration: none;
    font-size: 1.12em;
    line-height: 1;
    vertical-align: text-top;
    text-transform: uppercase;
}

/* simplicity2 続きを読む右へ移動 */
.entry-read a{
color:#fff;
font-size:13px;
background-color:pink;
border:1px solid pink;
border-radius:2px;
padding:3px 10px 3px 5px;
text-decoration:none;
float: right;
}

.entry-read a:hover{
color:#fff;
background-color:red;
-moz-transition:all 0.3s;
transition:all 0.3s;
}

.entry-read a::before{
margin-right:5px;
font-family:"FontAwesome";
content:"\f058";
}

/* パンくずリスト */
#breadcrumb a {
    color: lightcoral; 
    font-size: 16px;
}

#breadcrumb {
    color: lightcoral; 
    font-size: 16px;
}

#page-top a{
  color:#fff;
  padding:7px;
  text-decoration:none;
  display:block;
  cursor:pointer;
  text-align:center;
  background-color: green;
  line-height:100%;
  border-radius: 20px;
  font-size:30px;
}

.cat-label {
    top: 0.5em; /*上からの距離*/
    left: 0.5em; /*左からの距離*/
    border: none; /*ボーダーを消す*/
    font-size: 12px; /*文字サイズ*/
    color: #fff; /*文字色*/
    background-color: #49add1; /*背景色*/
    padding: 1px 10px; /*余白*/
    border-radius: 14px; /*角を丸く*/
}

.e-card-info {
  color: #666; /*色を薄く*/
}


/*------------------------------------
  　　SNSシェアボタン＋（枠線なし）
--------------------------------------*/
/*SNSシェアメッセージ*/
.sns-share-message{
font-weight: bold;
color: #875d5b;
}
/* 全体を中央寄せ */
.sns-share-buttons{
justify-content: center;
}
/* 各SNSボタン共通 */
#main .sns-buttons a {
 background-color: #fff;
 border-radius: 50%;
 margin: 0 10px;	
 width: 45px;
height: 45px;
}
/* SNSカウント非表示 */
.sns-share-buttons a .share-count {
    display: none;
}
/* テキストを非表示 */
.sns-share.ss-high-and-low-lc a .button-caption{
 display:none;
}

/*SNSフォローボタン*/
.sns-follow-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-follow-buttons {
	justify-content: center; /*中央寄せ*/
}
.sns-follow-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-follow a {
	width: 45px; /*ボタンの横幅*/
	height: 45px; /*ボタンの高さ*/
}

.post-navigation {
    overflow: hidden;
    padding: 12px 0 ;
}
.navigation  {
  margin-right: -9px;
}
.navigation  div {
  border: none;
}
.navigation > div + div{
  border: none;
} 
.prev {
    float: left;
} 
.next {
    float: right;
}
.next span{
	padding-left: 20px;
	float: right;
}
.next a span{
  padding-right: 0px;
}

/* コメント欄の開閉ボタン */
.comment-btn {
  background-color: skyblue;
  color: #fff;
  border: none;
  border-radius: 15px;
  font-size: 14px;
  transition: 0.5s;
}
.comment-btn:hover {
  background-color: #49add1;
  color: #fff;
  transition: 0.5s;
}
#commentform label{
	display: inline-block;
}

#commentform textarea, #commentform input{
    border: 1px solid skyblue; /* 枠線の色 */
	font-family: Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	border-radius: 4px;
	transition: all .2s ease;
	font-size: 80%;
	
}

#commentform textarea:focus, #commentform input:focus{
	outline: none;
	border: 3px solid skyblue; /* 枠線の色 */
}

#commentform #submit{
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
	background-color: skyblue; /* 送信ボタンの背景色 */
	color: white;
	border-radius: 15px;
	height: 40px;
	border: none;
	padding: 0;
	line-height: 40px;
	vertical-align: middle;
	text-align: center;
	transition: all .2s ease;
}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
    .e-card-info {
  font-size: 11px; /*スマホでの文字サイズ*/
	}
}