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

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

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

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

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



/*投稿ない時の文字の非表示*/

.posts-not-found{
	
	display: none;
}

/*インデックスのデザイン*/
.cat-label {
    top: 0;
    left: 10px;
    border: none;
    font-size: 12px;
    color: #fff;
    background-color: #a67c52;
    padding: 1px 5px;
    margin: -6px 0 0 0;
    overflow: visible;
}
.cat-label::after { /*右上に小さな三角を作る*/
    position: absolute;
    content: '';
    top: 0;
    right: -6px;
    border: none;
	/*小さな三角の色*/
	border-bottom: solid 6px #666666; 
    border-right: solid 6px transparent;
}

.entry-card-thumb {
    transition-duration: 0.3s; /*アニメーションの時間*/
    box-shadow: 0px 4px 15px -5px rgba(85,85,85,0.75); /*通常時の画像の影*/
}
.entry-card-thumb:hover {
    transform: translateY(-6px); /*マウスホバーで上に移動*/
    box-shadow: 0px 8px 18px -5px rgba(85,85,85,0.75); /*マウスホバー時の画像の影*/
}
.entry-card-thumb img { /*画像下の隙間を消す*/
    vertical-align: bottom;
}
.a-wrap:hover { /*マウスホバー時の全体の背景色を消す*/
    background: none;
}
.entry-card-title {
    margin-top: 10px; /*上に余白を付ける*/
    line-height: 1.5; /*行間を広く*/
}
.entry-card-title:hover {
    color: #49add1; /*マウスホバー時の色*/
}
@media screen and (max-width: 768px){
    .entry-card-title {
        font-size: 14px; /*スマホでの文字の大きさ*/
        line-height: 1.4; /*スマホでの行間*/
    }
}

.entry-card-thumb {
width: 25%;
}

.entry-card-content {
margin-left: 23%;
margin-top:-20px;
margin-bottom:-20px;
}





/************************************
** トグル表示ボタン カスタマイズ
************************************/
.toggle-wrap .toggle-button1 {
display: block;
padding: 3px 10px;
background-color: #fff;
border: 1px solid #ddd;
font-weight: bold;
text-align: center;
margin-bottom: 1em;
border-radius: 8px;
}


.toggle-wrap .toggle-button1:hover {
border-color: #999;
background: #f5f5f5;
}



.toggle-wrap .toggle-button1:after {
content: "■ グリッド表示"; /* 閉じている状態のときにラベルの後ろに続く文字 */
}


/*チェックは見えなくする*/
.toggle-wrap > input[type="checkbox"] {
display: none;
}

.toggle-wrap > input[type="checkbox"]:checked ~ .toggle-button1:after {
	
content: "≡ リスト表示"; /* 開いている状態のときにラベルの後ろに続く文字 */
	
}



/*クリックで中身表示*/
.toggle-wrap .toggle-content1{
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.6s;
}

.toggle-wrap > input[type="checkbox"]:checked ~ .toggle-content1 {
display: block;
height: auto;
opacity: 1;
padding: 10px 0;
}

.toggle-wrap .toggle-content2{
display: block;
height: auto;
opacity: 1;
padding: 10px 0;
}

.toggle-wrap > input[type="checkbox"]:checked ~ .toggle-content2 {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.6s;
}

/*読み上げ機能*/

#voice-select{
	/*display: none;*/
}


.wp_speech_contents-box{
	text-align: right;
}

/*【日めくりカレンダー】*/

#hmwrapper{   /* 日めくりカレンダー全体 */
    background-color: #eee;
	background-size: cover;
    margin: 1em auto;
    width: 100%;
    box-shadow: 7px 7px 10px #555;
}

#hmborder{    /* 上の枠線部分 */
    background-color: orange;
    width: 100%;
    height: 3em;
}

#hmmonth{     /* 月 */
    padding: 0.2em 0.5em 0 0.5em;
	font-size: 3em;
	text-align: right;
    color: #777;
}

#hmdate{      /* 日 */
	
	margin: -0.5em 0em -0.5em 0em;
    font-size: 10em;
    font-weight: 900;
    text-align: center;
    color: #333;
}

#hmday{       /* 曜日 */
    padding: 0 0 0.2em 0;
    font-size: 4em;
    font-weight: 900;
    text-align: center;
    color: #777;
}

#hmimg{       /* 画像 */
    
    text-align: center;
    
}

/*【日めくり写真カレンダー】*/

#hmwrapper2{   /* 日めくりカレンダー全体 */
    background-color: #eee;
    margin: 1em auto;
    width: 100%;
    box-shadow: 7px 7px 10px #555;
}

#hmmonth2{     /* 年月 */
	background-color: #333;
    padding: 0;
	font-size: 2em;
	font-weight: 900;
	text-align: center;
    color: #fff;
}

#hmdate2{      /* 日 */
	
	margin: -0.2em 0em -0.2em 0em;
    font-size: 3em;
    font-weight: 900;
    text-align: center;
    color: #777;
}

#hmimg2{       /* 画像 */ 
    text-align: center;  
	padding: 0;
}
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
#hmmonth{     /* 月 */
    padding: 0.2em 0.5em 0 0.5em;
	font-size: 2em;
	text-align: right;
    color: #777;
}

#hmdate{      /* 日 */
	
	margin: -0.2em 0em -0.2em 0em;
    font-size: 5em;
    font-weight: 900;
    text-align: center;
    color: #333;
}

#hmday{       /* 曜日 */
    padding: 0 0 0.2em 0;
    font-size: 2em;
    font-weight: 900;
    text-align: center;
    color: #777;
}	
	
	
}