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

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

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/************************************
** モバイルスライドインメニュー
************************************/
span.fas.fa-times::before {
  font-family: "Font Awesome 5 Free";
  content: "\f060";
  color:#90C31F; /* 矢印色変更はこちら */
}
ul.menu-drawer:after {
  background: white;
}

.menu-drawer li {
  padding:0;
  font-weight: normal; /* 太字解除 */
}

.menu-drawer a {
  font-size:1.3em;
  background-color:#ffffff;
  color:#545454;
  margin: .5em 0;
  font-weight: normal; /* 太字解除 */
}

.menu-drawer a:hover {
  background-color:#f7f7f7;
}

.menu-drawer .sub-menu {
  padding:0;
}

.menu-drawer .sub-menu li {
  font-size:0.9em;     /* サブメニュー小さめ */
  font-weight: normal; /* 太字解除 */
}

.menu-drawer .sub-menu li a {
  font-size:0.9em;     /* サブメニュー小さめ */
  font-weight: normal; /* 太字解除 */
}

.menu-drawer .sub-menu li a::before {
  font-family: "Font Awesome 5 Free";
  content : "\f105";
  color:#7b7b7b;
  margin:0 .5em 0 1em;
}
/* =========================
  BLOG 一覧（.tk-bloglist 配下だけ）
========================== */
.tk-bloglist{
  --card-radius: 18px;
  --card-shadow: 0 14px 34px rgba(0,0,0,.10);
  --card-shadow-hover: 0 20px 46px rgba(0,0,0,.14);
}

/* ブロックが何でも効くよう “よくある一覧UL” を広めに拾う */
.tk-bloglist ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* PCは2列 */
@media (min-width: 1024px){
  .tk-bloglist ul{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

/* 各記事アイテム（li）をカード化 */
.tk-bloglist li{
  background:#fff;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* hover */
@media (hover:hover){
  .tk-bloglist li:hover{
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
  }
}

/* アイテム内部リンクを “ブロック全体クリック” っぽく */
.tk-bloglist li a{
  color: inherit !important;
  text-decoration:none !important;
  display:block;
}

/* サムネ：左→上にしたい場合が多いので、画像を上で統一 */
.tk-bloglist img{
  width:100% !important;
  height: auto !important;
  display:block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* テキスト領域の余白 */
.tk-bloglist .wp-block-latest-posts__post-title,
.tk-bloglist .vk_post_title, 
.tk-bloglist .vk_postList_title{
  display:block;
  padding: 14px 16px 0;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
}

/* 抜粋 */
.tk-bloglist .wp-block-latest-posts__post-excerpt,
.tk-bloglist .vk_post_excerpt,
.tk-bloglist .vk_postList_excerpt{
  padding: 10px 16px 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  opacity: .82;
}

/* 日付などメタ */
.tk-bloglist time,
.tk-bloglist .wp-block-latest-posts__post-date,
.tk-bloglist .vk_post_date,
.tk-bloglist .vk_postList_date{
  display:block;
  padding: 10px 16px 16px;
  font-size: 12px;
  opacity: .65;
}

/* もし “左サムネ＋右テキスト” のレイアウトが残ってたら上書きで縦積みに寄せる */
.tk-bloglist .vk_postList_item,
.tk-bloglist .wp-block-latest-posts__post-full-content,
.tk-bloglist .vk_postList_content{
  display:block !important;
}