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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.page-id-6 .entry-title {
display: none;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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


/************************************
** フジ子追加CSS
************************************/

/* トップページ「人気投稿一覧」 */
.home ul.wp-block-latest-posts__list {
	width: 95%;
	margin: 0 auto;
	justify-content: space-between;
}
.home ul.wp-block-latest-posts__list li {
	position: relative;
    z-index: 1;
    display: block;
    width: 31% !important;
	height: 500px;
	margin: 0 0 3em 0;
    padding: 16px;
    background-color: #FFF;
    box-shadow: 0 10px 20px rgba(0,0,0,.08);
    border-radius: 8px;
	transition: 0.3s;
}
.home ul.wp-block-latest-posts__list li:hover {
	box-shadow: 0 30px 30px rgba(0,0,0,.16);
	transform: translateY(-15px);
	transition: 0.3s;
}
.home .wp-block-latest-posts__featured-image {
	width: 100%;
	position: relative;
	padding-top: 66%; /* 画像比率を4:3に */
	margin-bottom: 10px;
}
.home .wp-block-latest-posts__featured-image img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	object-fit: cover;
}
.home .wp-block-latest-posts__featured-image a {
	position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.home ul.wp-block-latest-posts__list li .wp-block-latest-posts__post-title {
	padding-top: 8px;
    line-height: 1.4;
    font-size: 20px;
    font-weight: bold;
    color: #333;
	text-decoration: none;
}
.home ul.wp-block-latest-posts__list li .wp-block-latest-posts__post-date {
	font-size: 12px;
	color: #999;
}
.home ul.wp-block-latest-posts__list li .wp-block-latest-posts__post-excerpt {
	color: #666;
}


@media screen and (max-width: 1023px){
	.home ul.wp-block-latest-posts__list li {
		width: 48% !important;
		margin: 0 0 2em 0;
	}
}

@media screen and (max-width: 834px){
	.home ul.wp-block-latest-posts__list li {
		width: 100% !important;
		height: auto;
		margin: 0 0 1.5em 0;
	}
}
@media screen and (max-width: 480px){

}