@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){
  /*必要ならばここにコードを書く*/
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

/* 全体背景を白に */
body, #wrapper, #container, #contents-in,
.wrap, .content-in, #main, .entry-content,
#footer, #footer-in, .footer-widget {
  background-color: #ffffff !important;
}

/* ヘッダー背景を白に */
#header, #header-in, .header-in {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e0e0e0;
}

/* ナビゲーションを深いグリーンに */
#navi, #navi-in, .navi-in {
  background-color: #2c3a2e !important;
}
#navi .menu-item a,
#navi-in .menu-item a {
  color: #ffffff !important;
  letter-spacing: 0.1em;
}
#navi .menu-item a:hover { color: #c8d8b0 !important; }

/* フォントをNoto Sans JPに統一 */
body, p, li, td, th, input, textarea, select {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 400 !important;
}
h1, h2, h3, h4 {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em;
}

/* スマホ対応 */
@media (max-width: 767px) {
  #header img, .header-logo img, .site-logo img { max-height: 60px !important; width: auto !important; }
  #header, #header-in { padding: 10px !important; min-height: unset !important; }
}

/* 日付・投稿者を非表示 */
.post-date, .date, .entry-date, time.published, .byline, .posted-on,
.entry-meta .date, .article-date, .post-meta .date { display: none !important; }

/* コンテンツ上部の余白を除去 */
#contents, .contents-in, #content { padding-top: 0 !important; margin-top: 0 !important; }
.entry-header { display: none !important; }

/* ===== エケベリア横スクロールグリッド ===== */
.recommend-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 12px;
  padding: 20px 16px;
  margin: 0 -16px;
  scrollbar-width: thin;
  scrollbar-color: #c8d8b0 #f5f5f5;
}
.recommend-grid::-webkit-scrollbar {
  height: 6px;
}
.recommend-grid::-webkit-scrollbar-track {
  background: #f5f5f5;
}
.recommend-grid::-webkit-scrollbar-thumb {
  background: #c8d8b0;
  border-radius: 3px;
}
.recommend-grid a,
.recommend-grid .recommend-item {
  flex: 0 0 calc(33.333% - 8px);
  min-width: calc(33.333% - 8px);
  scroll-snap-align: start;
  text-decoration: none;
  color: #2c2c2c;
  display: block;
}
.recommend-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}
.recommend-grid .recommend-text,
.recommend-grid p {
  font-size: 13px;
  text-align: center;
  margin: 8px 0 0;
  font-family: 'Noto Sans JP', sans-serif;
}
@media (max-width: 600px) {
  .recommend-grid a,
  .recommend-grid .recommend-item {
    flex: 0 0 75%;
    min-width: 75%;
  }
}