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

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

/* Cocoon */
.a-wrap	{
	padding-bottom: 16px;
	box-shadow: none;
	border-radius: 0;
	border-bottom: 1px solid #757575;
}

.a-wrap:hover	{
	box-shadow: none;
	background: #f0f0f0;
}

.header-container	{
	max-width: 1260px;
	margin: 0 auto;
}

.header	{
	background-color: #000;
	position: relative;
	align-items: normal;
}

.fader, .fader-eye-catch-image,
.face, .shaft-green,
.sticker,
.slogan	{position: absolute;}

/* header face */
.face	{
	width: 50%; /* 親要素に対しての縮尺率 1260 / 630 */
	max-width: 630px;
	aspect-ratio: 2.625;
	background-size: cover;

	height: auto;
	top: 0;
	left: 0;
}

.shaft-green	{
	width: 40%; /* 親要素に対しての縮尺率 1260 / 504 */
	max-width: 504px;
	aspect-ratio: 2.1;
	opacity: 0.9;
}

.fader	{
	width: 100%;
	top: 0;
	left: 0;
	background: linear-gradient(rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.9) 100%);
	height: 100%;
}

/* header sticker */
.sticker	{
	background-image: url( 'https://worth300.delabit.com/img/header-sticker-hangaku.webp' );
	background-size: cover;
	width: 10%;
	max-width: 126px;
	height: auto;
	aspect-ratio: 1;
	top: -15%;
	left: 28.5%;
	opacity: 0.8;
}

.mybas	{
	background-image: url( 'https://worth300.delabit.com/img/header-sticker-mybas-30.webp' );
	width: 18%;
	max-width: 232px;
	aspect-ratio: 1.84;
	top: -8%;
	left: 24.5%;
}

.lawson100	{
	background-image: url( 'https://worth300.delabit.com/img/header-sticker-lawson100-20.webp' );
	top: -10%;
}

.taku	{
	background-image: url( 'https://worth300.delabit.com/img/header-sticker-taku.webp' );
	top: -5%;
}

.slogan	{
	width: 30%;
	right: 2%;
	bottom: 10%;
	color: #000;
	font-family: sans-serif;
	font-size: min(1.6vw, 21px);
	font-weight: bold;
	text-align: right;
	text-shadow:	1px 1px 0 #ddd, -1px -1px 0 #ddd,
		-1px 1px 0 #ddd, 1px -1px 0 #ddd,
		0 1px 0 #ddd, 0 -1px 0 #ddd,
		-1px 0 0 #ddd, 1px 0 0 #ddd;
	opacity: 0.8;
	transform: rotate(-5deg) scaleY(1.1);
}

/* サムネイル上のカテゴリーラベルを非表示にする */
.cat-label	{display: none;}

.main	{padding: 36px 128px;}

header	{margin-bottom: 3em;}

.eye-catch	{
	width: 100%;
	background: #222;
}

.eye-catch-image	{
	width: 100%;
	max-height: 232px;
	object-fit: cover;
	aspect-ratio: 16 / 9;
}

.fader-eye-catch-image	{
	background: linear-gradient(rgba(0,0,3,0),rgba(0,0,3,0.25));
	width: 100%;
	height: 100%;
	top: 0;
}

.article h1, .article h2, .article h3, .article h4, .article h5, .article h6	{
	line-height: 1.8;
}

.entry-title	{
	border-left: .25em solid #24890d;
	padding: 0.5em;
}

.search-submit	{background: #24890d;}

cite	{
	color: inherit;
	font-size: 100%;
	font-style: normal;
}

.entry-content p	{
	overflow: auto;
	clear: both;
}

.entry-content p img	{
	display: block;	/* 2022-01-02 */
	background: #222;
}

.entry-content p a img,
.entry-content p a:hover img,
.entry-content ol li a img	{border: 2px solid #24890d;}

.picleft,
.picright,
.pic_noflash	{
	background: #3f3f3f;
	float: left;
	margin-top: 0;
	margin-right: 1.5em;
	margin-bottom: 0.5em;
}

.picright	{
	float: right;
	margin-right: 0;
	margin-left: 1.5em;
}

.pic_noflash	{
	margin-right: 1em;
	margin-bottom: 1em;
}

.entry_noflash	{
	text-align: left;
	min-height: 150px;
}

.card-thumb img	{background: #3f3f3f;}

/* ecs */
.ecs	{
	background: #eee;
	height: 4px;
	border: none;
}

#awsmhead	{
	font-size: 80%;
	text-align: right;
	margin: 1em;
}

#awsmain	{
	width: 100%;
	height: 288px;
	border: 0;
}

/* 競馬予想 */
.none-mark,
.baken-yosou,
.keiba-result,
.keiba-result-douchaku	{
	/* font-family: "Arial", "Helvetica", sans-serif; */
	line-height: 1.8;
	margin-left: 1em;
	padding-left: 1em;
	border-left: 3px solid #b50;
}

.none-mark,
.baken-yosou,
.keiba-result li,
.keiba-result-douchaku li	{list-style-type: none;}

.none-mark li,
.baken-yosou li	{margin-bottom: 0;}

/* 競馬結果 */
.keiba-result,
.keiba-result-douchaku	{border-color: #0b5;}

.keiba-result li	{counter-increment: cnt;}

.keiba-result li::before	{
	content: counter(cnt) "着";
	padding-right: 1em;
}

/* Word Balloon 背景 */
.bg_word_balloon_pd	{
	background: #92a9d3 url('https://worth300.delabit.com/img/bg_word_balloon_pd.jpg');
	margin-bottom: 2em;
	padding: 1em;
	border-radius: 1em;

	max-width: 480px;
}

/* reCAPTCHA fix */
.grecaptcha-badge	{visibility: hidden;}

.entry-content dl,
.entry-content dd	{margin-left: 1em;}

.entry-content dd	{margin-top: 1em;}

.entry-content dt	{
	margin-top: 1em;
	padding-left: 0.5em;
	border-left: 5px double #90d730;
}

q.dialogue-ore,
q.dialogue-caiman	{
	quotes: none;
	font-style: normal;
	background: none;
	border: none;
	margin-bottom: -1em;
	padding: 0;
}

q.dialogue-ore::before,
q.dialogue-caiman::before	{content: no-open-quote;}

q.dialogue-ore::after,
q.dialogue-caiman::after	{content: no-close-quote;}


/* 折り畳みアーカイブウィジェット */
.widget_archive a.year	{ /*各年*/
	cursor: pointer;
	border-bottom: 1px dotted #ccc; /*各年に下線を引く*/
}
.widget_archive a.year::after	{ /*各年横のアイコン*/
	font-family: "FontAwesome";
	content: '\f107'; /* アイコンの指定 */
	position: relative; /* 相対配置 */
	left: 5px; /* アイコンの位置 */
	font-weight: bold;
}
.widget_archive .years ul	{ /*各月*/
	display: flex;
	flex-flow: row wrap;
	margin-left: 5px; /*インデント*/
	font-size: 1rem;
	text-decoration: underline; /*各月に下線を引く*/
}
.widget_archive ul.years li	{
	padding: 0 1px; /*各月の間隔*/
}
#sidebar .widget_archive ul.years li :hover	{ /*マウスホバー時*/
	background: none;
	transition: 0.1s;
	color: #72c7e6;
}
.widget_archive ul.years .hide	{ /*各年をクリックすると開閉*/
	margin: 0;
	height: 0;
	opacity: 0;
	visibility: hidden;
}

/* 人気記事ランキング */
#sidebar ul li a, a.popular-entry-card-link	{
	margin: 10px 0 4px;
}

.widget-entry-cards.ranking-visible .card-thumb::before	{
	top: -12px !important;	/*上からの位置*/
	left: -12px !important;	/*左からの位置*/
	border-radius: 100%;	/*角を丸くする*/
	border: 2px solid #fff;
	opacity: inherit;
}

@media print	{
	.worth300-content	{max-width: 100%;}
	.worth300-content a	{text-decoration: none;}
}


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

/* 834px以下 */
@media screen and (max-width: 834px){
	/* 必要ならばここにコードを書く */
	main.main, div.sidebar	{
		padding: 32px;
	}
}

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

	.picleft,
	.picright	{
		display: block;
		float: none;
	}

}