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

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

body {
  background-color: #ffffff;
  padding-top: 16px;
}

.logo-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
}

.logo-header .logo {
  flex-shrink: 0;
}

/* スクロール前後でロゴサイズを統一（スクロール後は hlt-top-menu が max-height:60px を付与） */
#header .logo-header img {
  max-height: 60px;
  height: auto;
  vertical-align: middle;
}

/* カスタムCSSの .site-name-text { width:0; height:0 } を上書き */
.logo .site-name-text {
  width: auto !important;
  height: auto !important;
  font-size: inherit !important;
  color: inherit !important;
  display: block !important;
}

.logo-header .site-name-text-link,
.logo-header .site-name-text {
  color: #333333 !important;
}

.logo-header .header-search {
  flex: 1;
  margin-top: 8px;
  display: flex;
  justify-content: flex-start;
}

/* アイキャッチ画像下方にタイトルをオーバーレイ */
.ect-vertical-card .entry-card-wrap .entry-card-content {
  margin-top: -2.4em;
  position: relative;
  z-index: 2;
}

.ect-vertical-card .entry-card-title {
  background-color: #000;
  color: #fff;
  padding: 0.3em 0.6em;
  margin: 0 0 0.4em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.entry-card-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#header-container {
  background: #ffffff !important;
  color: #333333 !important;
  margin-top: 0 !important;
}

/* トップメニューの上・左余白 */
.navi-in > ul {
  padding-top: 16px;
  padding-left: 16px;
}

/* コンテンツ上部ウィジェットエリアの左右余白 */
.content-top {
  padding-left: 16px;
  padding-right: 16px;
}

/* 小カテゴリボタン（コンテンツ上部） */
.liacsy-subcats-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  background-color: #ffffff;
}

.liacsy-subcat-btn {
  color: #333333 !important;
  text-decoration: none !important;
  padding: 6px 16px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
}

.liacsy-subcat-btn:hover {
  color: #000000 !important;
  background-color: #f5f5f5;
  text-decoration: none !important;
}

body {
  margin-top: 0 !important;
}


/*
.widget_new_entries .display-none {
	display: block;
	padding-top: 0.2em;
	text-align: down;
}
*/
/* デスクトップ向けのスタイル */

/* 例えば、#my-element というIDを持つ要素を表示する場合 */
/* デスクトップでは表示する */
/* それをコメントアウト
#my-element {
  display: block;
}
*/
/*
.main, 
.sidebar {
  background-color: #ccc;
}
*/
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*必要ならばここにコードを書く*/
/*1023px以下*/
/* モバイルでは非表示にする */
/* それをコメントアウト*/
@media screen and (max-width: 1023px){
	#my-element {
    display: none;
  }
}


/*834px以下*/
/* モバイルでは非表示にする */
/* それをコメントアウト*/
@media screen and (max-width: 834px){
	#my-element {
    display: none;
  }
}


/*480px以下*/
/* モバイルでは非表示にする */
/* それをコメントアウト*/
@media screen and (max-width: 480px){
	#my-element {
    display: none; /* モバイルでは非表示にする */
  }
}

/* ホームボタン選択時（現在のページ）を黒く表示 */
#navi .navi-in > ul > li.current-menu-item > a,
#navi .navi-in > ul > li.current_page_item > a {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* ホームカテゴリーページ（/home/）でホームボタンを黒く表示 */
.category-195 #navi .navi-in > ul > li#menu-item-6721 > a {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* ===== 新着記事エリア：2行2列グリッド（.lne-* クラス） ===== */

.lne-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 16px 0;
}

.lne-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.2s;
}

.lne-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.13);
  text-decoration: none;
}

.lne-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f0f0f0;
  flex-shrink: 0;
}

.lne-thumb .lne-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lne-thumb .lne-no-img {
  width: 100%;
  height: 100%;
  background: #ddd;
}

.lne-thumb .lne-cat {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 11px;
  color: #fff;
  background: rgba(0,0,0,0.55);
  padding: 2px 8px;
  border-radius: 3px;
  line-height: 1.6;
}

.lne-body {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lne-title {
  font-size: 0.95rem;
  font-weight: bold;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #333;
}

.lne-date {
  font-size: 12px;
  color: #999;
  margin-top: auto;
}

/* スマホ：1列 */
@media screen and (max-width: 600px) {
  .lne-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== 新着記事グリッド [latest_posts_grid] ===== */
.latest-posts-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  margin: 24px 0 !important;
}

.lpg-item {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.lpg-item:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  text-decoration: none;
}

.lpg-thumb-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f0f0f0;
}

.lpg-thumb-wrap .lpg-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lpg-thumb-wrap .lpg-no-image {
  width: 100%;
  height: 100%;
  background: #ddd;
}

.lpg-body {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lpg-cat {
  font-size: 11px;
  color: #fff;
  background: #555;
  padding: 2px 8px;
  border-radius: 3px;
  align-self: flex-start;
}

.lpg-title {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lpg-date {
  font-size: 12px;
  color: #999;
  margin-top: auto;
}

/* スマホ: 1列に切り替え */
@media screen and (max-width: 600px) {
  .latest-posts-grid {
    grid-template-columns: 1fr;
  }
}