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

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

.entry-card-meta, .related-entry-card-meta {
    bottom: 0;
    position: absolute;
    right: 0;
    text-align: right;
    line-height: 0;
}
.cat-title , .tag-title{
    color: #333;
    text-decoration: none;
    display: inline-block;
    margin-right: 4px;
    padding: 1px 5px;
    font-size: 12px;
    border: 1px solid #999;
    border-radius: 2px;
    word-break: break-all;
}



/************************************
 * ポチップ
 ***********************************/
/*ロゴ消し*/

.pochipp-box__logo {
visibility: hidden;
display: none;
	
}


/************************************
 * サムネイルの文字の3点表示
 * サンプル
 * https://www.beginnerweb.net/textoverflow
 ***********************************/

/* 省略せずに表示するサイズを、任意の数字で指定します。 */
.wp-element-caption {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 不備があるかもしれない */
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption{
	overflow-x: hidden;	
}

.header {
//  height: 460px !important;
}

.article h2{color:#000;}


/************************************
 * PタグをPREタグと同じように表示
 * クラス指定の参考
 * https://zero-plus.io/media/css-selector-specify/
 ***********************************/
/* 表示用 */
.entry-content p {
    background-color: var(--cocoon-xx-thin-color);
    border: 1px solid var(--cocoon-thin-color);
    overflow: auto;
    padding: 10px
}
/* 編集用 */
.editor-styles-wrapper p {
    background-color: var(--cocoon-xx-thin-color);
    border: 1px solid var(--cocoon-thin-color);
    overflow: auto;
    padding: 10px;
}
/************************************
 * 人気ランキングの順位が10以上で桁がずれる点を修正
 * 
 ***********************************/
.widget-entry-cards.ranking-visible .card-thumb::before {
    width: 26px;
}

/************************************
 * エントリーカードの更新日を非表示
 * 
 ***********************************/
.post-update,
.amp-back {
	display:none;
	//チェック用
	color:red;
}


/************************************
 * ギャラリーのクリックイベント用
 * 
 ***********************************/


/* ギャラリー・単独画像とも、figure とキャプションを「リンクらしい」見た目に */
.entry-content figure.wp-block-image,
.entry-content figure.wp-block-image > figcaption,
.entry-content figure.wp-block-image .wp-element-caption {
    cursor: pointer;
}

/* ギャラリーのグラデーションオーバーレイはクリックをブロックしないようにする */
.wp-block-gallery.has-nested-images figure.wp-block-image::before {
    pointer-events: none;
}

/* a タグを含む画像だけ マウスポインタを指マークにする */
.entry-content figure.wp-block-image:has(a[href]),
.entry-content figure.wp-block-image:has(a[href]) > figcaption,
.entry-content figure.wp-block-image:has(a[href]) .wp-element-caption {
    cursor: pointer;
}

/* a タグを含まない画像は通常カーソル */
.entry-content figure.wp-block-image:not(:has(a[href])),
.entry-content figure.wp-block-image:not(:has(a[href])) > figcaption,
.entry-content figure.wp-block-image:not(:has(a[href])) .wp-element-caption {
    cursor: default;
}




/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
/*1023px以下*/
@media screen and (max-width: 1023px){
   .pc { display: none !important; }
   .sp { display: block !important; }
	
	//広告表示用
	//スマホ表示の時にヘッダがずれる
	.tagline {
	text-align: center;
	margin: .6em 1em;
	margin-top: 60px;
	}
}
/*834px以下*/
@media screen and (max-width: 834px){
   .pc { display: none !important; }
   .sp { display: block !important; }
}
/*480px以下*/
@media screen and (max-width: 480px){
   .pc { display: none !important; }
   .sp { display: block !important; }

}