@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: paari
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* === トップページ用カスタムCSS === */

/* --- 全体のラッパー --- */
/* このラッパーでサイトの基本的なコンテンツ幅が決まります */
.top-page-wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: 1500px; /* 1400px → 1500px に拡大 */
  padding-left: 20px;   /* 16px → 20px に拡大 */
  padding-right: 20px;  /* 16px → 20px に拡大 */
}

/* --- wp-block-heading section-title の幅制限を解除 --- */
/* Cocoonテーマの840px制限を上書き */
.wp-block-heading.section-title,
.is-layout-constrained > .wp-block-heading.section-title,
.is-layout-constrained > :where(.wp-block-heading.section-title) {
  max-width: 1200px !important; /* 840px → 1200px に拡大 */
  width: 100% !important;
}

/* --- より包括的な幅制限の解除 --- */
/* すべてのwp-block-heading要素の幅制限を解除 */
.wp-block-heading,
.is-layout-constrained > .wp-block-heading,
.is-layout-constrained > :where(.wp-block-heading) {
  max-width: 1200px !important; /* 840px → 1200px に拡大 */
  width: 100% !important;
}

/* --- wp-block-column の幅制限を解除 --- */
/* カラムブロックの幅制限を解除して広げる */
.wp-block-column,
.wp-block-column.is-layout-flow,
.wp-block-column-is-layout-flow,
.is-layout-constrained > .wp-block-column,
.is-layout-constrained > .wp-block-column.is-layout-flow,
.is-layout-constrained > .wp-block-column-is-layout-flow {
  max-width: none !important; /* 幅制限を完全に解除 */
  width: 100% !important;
  flex: 1 !important; /* フレックスアイテムとして適切に伸縮 */
}

/* --- カラムブロックの親要素も調整 --- */
/* カラムブロックを含む親要素の幅制限も解除 */
.wp-block-columns,
.wp-block-columns.is-layout-flow,
.wp-block-columns-is-layout-flow,
.is-layout-constrained > .wp-block-columns,
.is-layout-constrained > .wp-block-columns.is-layout-flow,
.is-layout-constrained > .wp-block-columns-is-layout-flow {
  max-width: 1200px !important; /* 親要素の幅を広げる */
  width: 100% !important;
}

/* --- wp-block-group featured-item の幅制限を解除 --- */
/* 特集アイテムのグループブロックの幅制限を解除 */
.wp-block-group.featured-item,
.wp-block-group.featured-item.is-layout-constrained,
.wp-block-group-is-layout-constrained.featured-item,
.is-layout-constrained > .wp-block-group.featured-item,
.is-layout-constrained > .wp-block-group.featured-item.is-layout-constrained,
.is-layout-constrained > .wp-block-group-is-layout-constrained.featured-item {
  max-width: none !important; /* 幅制限を完全に解除 */
  width: 100% !important;
  flex: 1 !important; /* フレックスアイテムとして適切に伸縮 */
}

/* --- より包括的なwp-block-groupの幅制限解除 --- */
/* すべてのwp-block-group要素の幅制限を解除 */
.wp-block-group,
.wp-block-group.is-layout-constrained,
.wp-block-group-is-layout-constrained,
.is-layout-constrained > .wp-block-group,
.is-layout-constrained > .wp-block-group.is-layout-constrained,
.is-layout-constrained > .wp-block-group-is-layout-constrained {
  max-width: 1200px !important; /* 幅制限を1200pxに拡大 */
  width: 100% !important;
}

/* --- 全体の中央寄せ調整 --- */
/* 右カラム用のスペースを削除して中央寄せにする */

/* メインコンテンツエリアの中央寄せ */
.main-content-area,
.article,
.entry-content {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1200px !important;
  width: 100% !important;
}

/* トップページの目次を完全に非表示（背景含む） */
body.home .toc,
body.front-page .toc,
.home #toc,
.front-page #toc,
body.home .toc-content,
body.front-page .toc-content {
  display: none !important;
}

/* トップページのみサイドバーを非表示 */
body.home #sidebar,
body.home .sidebar,
body.front-page #sidebar,
body.front-page .sidebar {
  display: none !important;
}

/* トップページのメインコンテンツを全幅に */
body.home .content-in,
body.front-page .content-in {
  display: block !important;
}

body.home .main,
body.front-page .main {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* 目次が非表示の場合、特集コンテンツセクションの上部余白を調整 */
body.home .featured-content-section > .toc,
body.front-page .featured-content-section > .toc {
  display: none !important;
}

/* 特集コンテンツセクションの中央寄せ */
.featured-content-section {
  text-align: center !important;
}

.featured-content-section .featured-items-container {
  justify-content: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

/* 最新記事・おすすめ商品セクション：2カラムレイアウト */
.main-sidebar-grid-section {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* 2カラムグリッドレイアウトを強制適用 */
.main-sidebar-grid-section .wp-block-columns {
  display: grid !important;
  grid-template-columns: 1fr 320px !important;
  gap: 30px !important;
  align-items: start !important;
}

/* 左カラム（最新記事） */
.main-sidebar-grid-section .wp-block-columns > .wp-block-column:first-child {
  grid-column: 1 !important;
}

/* 右カラム（おすすめ商品） */
.main-sidebar-grid-section .wp-block-columns > .wp-block-column:last-child {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

/* .main-scrollウィジェットを非表示 */
.main-scroll {
  display: none !important;
}

/* --- より詳細な中央寄せ調整 --- */

/* ページ全体のレイアウトを中央寄せに */
body .top-page-wrapper {
  margin: 0 auto !important;
  text-align: center !important;
}

/* すべてのコンテンツブロックを中央寄せ */
.top-page-wrapper > * {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* フレックスコンテナの中央寄せ */
.featured-items-container,
.latest-posts-list,
.recommended-products-list {
  justify-content: center !important;
  align-items: center !important;
}



/* --- 1. スライダーセクションの背景色と余白 --- */
.top-slider-section {
  /* background-color: #f0f4f8; */ /* 例: とても薄い青系の背景色。スライダー画像が全幅でない場合や、セクションに色をつけたい場合に指定 */
  padding-top: 20px;    /* ヘッダーとスライダーの間の余白（必要に応じて調整） */
  padding-bottom: 40px; /* スライダーと次の「特集コンテンツ」セクションの間の余白 */
  /* margin-bottom: 40px; */ /* または padding-bottom の代わりに margin-bottom でセクション間のスペースを作ることもできます */
}
.metaslider-custom img{
	border-radius:20px;
}

/* --- 2. 特集コンテンツセクションの背景色と余白 --- */
.featured-content-section {
  background-color: transparent; /* 背景色を削除（目次非表示のため） */
  padding-top: 50px;        /* セクションの内側の上部の余白 */
  padding-bottom: 60px;     /* セクションの内側の下部の余白（少し多めにして次のセクションとの区切りを明確に） */
  /* margin-bottom: 40px; */  /* 次のセクションとの間にさらにスペースが欲しい場合 */
}

/* 特集コンテンツ内のアイテム (カード) の横並び設定 */
.featured-items-container {
  display: flex;
  flex-wrap: wrap; /* アイテムが折り返すようにする */
  gap: 16px;       /* アイテム間の隙間 */
  /* justify-content: space-between; */ /* アイテム数が固定でない場合は左寄せが良い場合も */
}

/* --- A-1. セクションタイトルのデザイン (詳細度を上げたセレクタ) --- */
/* .article内のh2タグで、かつ.section-titleクラスを持つ要素に適用 */
.article h2.section-title {
  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; /* またはご指定のフォント */
  font-size: 24px;          /* 20px → 24px に拡大 */
  font-weight: bold;        /* またはご指定の太さ */
  color: #6B5364;            /* またはご指定の色 */
  text-align: left;
  margin-top: 0;
  margin-bottom: 32px;      /* 24px → 32px に拡大 */
  padding-bottom: 12px;     /* 8px → 12px に拡大 */
  padding-left:0;
  border-bottom: 3px solid #E0D0D5; /* 2px → 3px に拡大 */
  position: relative;
  /* トップページ見出しの左線は付けない（下線のみ） */
  border-left: none;
}

/* セクションタイトルの前のFont Awesomeアイコン (セレクタを同様に修正) */
.article h2.section-title::before {
  content: "\f1b0";
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Solid";
  font-weight: 900;
  margin-right: 10px;
  font-size: 1em;
  color: #E0D0D5;  
  vertical-align: baseline;
}


/* --- A-2. 特集アイテム内のタイトルデザイン --- */
/* .featured-item内の見出しブロック (H3を想定) または .featured-item-title クラスを付けた要素 */
.featured-item .featured-item-title {
  font-size: 16px;      /* 14px → 16px に拡大 */
  font-weight: bold;    /* 太字 */
  color: #6B5364;        /* 文字色 */
  margin-top: 12px;     /* 10px → 12px に拡大 */
  margin-bottom: 12px;  /* 8px → 12px に拡大 */
  line-height: 1.5;     /* 1.4 → 1.5 に拡大 */
}

/* --- B. カードデザイン (特集アイテム) --- */
/* 特集アイテム全体を囲む .featured-item クラス */
.featured-item {
  background-color: #ffffff;
  border: 1px solid #f2e6ea; /* 目標画像の枠線の色に合わせて調整 */
  border-radius: 16px;       /* 目標画像の角丸に合わせて調整 */
  box-shadow: none;
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 100%; /* 必要に応じて */
}

/* カード内の画像エリア */
.featured-item .featured-item-thumbnail {
  background-color: #f8eef2; /* 目標画像のプレースホルダー色 */
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16/10;
}
.featured-item .featured-item-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.featured-item .featured-item-thumbnail .no-image-text {
  font-size: 24px;
  color: #d0b8c4;
  font-weight: bold;
}

/* カード内タイトル */
.featured-item h4.wp-block-heading.featured-item-title {
  font-family: sans-serif; /* ★目標画像のフォントを指定してください */
  font-size: 18px !important;          /* 16px → 18px に拡大 */
  font-weight: bold;       /* または目標画像の太さ */
  line-height: 1.6;        /* 1.5 → 1.6 に拡大 */
  margin-top: 0;
  margin-bottom: 12px;     /* 8px → 12px に拡大 */
  color: #6B5364 !important;            /* ★ここに目標の文字色を指定してください (h4自体にも念のため) */
}

/* h4の中のspanにも色を確実に適用する */
.featured-item h4.wp-block-heading.featured-item-title span {
  color: #6B5364 !important;           /* ★ここに目標の文字色を再度指定 (または inherit を試す) */
}
/* カード内説明文 */
.featured-item .featured-item-excerpt, /* 説明文の段落にこのクラスを付与した場合 */
.featured-item > p { /* または、タイトル下の最初の段落など、より具体的なセレクタで */
  font-family: sans-serif; /* ★目標画像のフォントを指定 */
  font-size: 15px;         /* 14px → 15px に拡大 */
  color: #555555;           /* ★目標画像の文字色を指定 */
  line-height: 1.7;        /* 1.6 → 1.7 に拡大 */
  margin-top: 0;
  margin-bottom: 24px;      /* 20px → 24px に拡大 */
  flex-grow: 1; /* 説明文でスペースを埋め、ボタンが下に揃うようにする */
}


/* --- ▼ボタンのスタイル修正案▼ --- */

/* ボタンブロック全体の位置調整用 (div.wp-block-button) */
.featured-item .wp-block-button {
  margin-top: auto;       /* ボタンをカードの（ほぼ）最下部に配置 */
  align-self: flex-start; /* ボタンを左寄せにする場合。中央寄せなら center */
                           /* 幅いっぱいにしたいなら align-self: stretch; */
  /* width: 100%; */      /* align-self: stretch と合わせてボタンの幅をカードいっぱいにしたい場合 */
}

/* 実際のボタンリンク (a.wp-block-button__link) のスタイル */
.featured-item .wp-block-button__link {
  background-color: #73697A; /* ★目標画像のボタン背景色を指定 */
  color: #ffffff !important; /* ★目標画像のボタン文字色 (白)。重要度を上げてみる */
  font-family: sans-serif;   /* ★目標画像のフォントを指定 */
  font-size: 16px;           /* 15px → 16px に拡大 */
  font-weight: bold;
  padding: 12px 28px;        /* 10px 25px → 12px 28px に拡大 */
  border: none;              /* 枠線なし */
  border-radius: 22px;       /* 20px → 22px に拡大 */
  text-decoration: none !important; /* リンクの下線を確実に消す */
  text-align: center;
  display: inline-block;     /* paddingやwidthを正しく適用するため */
  transition: background-color 0.2s ease;
  /* width: 100%; */ /* ボタンのテキスト量に関わらず幅を固定したい場合（親の.wp-block-buttonのwidthも影響）*/
  box-sizing: border-box; /* paddingとborderをwidthに含める */
}

.featured-item .wp-block-button__link:hover {
  background-color: #5E5465; /* ★マウスオーバー時のボタン背景色 */
  color: #ffffff !important; /* ホバー時も文字色を維持 */
}

/* 共通ボタンスタイル */
.button, .button-small {
  display: inline-block;
  padding: 10px 18px; /* 少し大きめに */
  background-color: #826B55; /* 画像に合わせた茶系の色 */
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9em;
  line-height: 1.4; /* 追加 */
  margin-top: auto; /* 追加: ボタンをカードの最下部に配置 */
  transition: background-color 0.3s;
}
.button:hover, .button-small:hover {
  background-color: #695542; /* ホバー時の色 */
}
.button-small {
  padding: 8px 15px;
  font-size: 0.8em;
}

/* --- 3. 最新記事・おすすめ商品セクションの背景色と余白 --- */
.main-sidebar-grid-section {
  background-color: #ffffff; /* 例: 白背景に戻すか、特集コンテンツとは別の薄い色を指定 */
  padding-top: 50px;        /* セクションの内側の上部の余白 */
  padding-bottom: 60px;     /* セクションの内側の下部の余白 */
}

/* 左カラム (最新記事) */
.main-content-area .section-title,
.sidebar-area .section-title { /* 最新記事・おすすめ商品の見出しは左寄せ */
  text-align: left;
}

/* 最新記事セクション - カード形式 */
/* WordPressの「最新の投稿」ブロック用のスタイル */
/* 親テーマのCSSを上書きするため、!importantを使用 */
.wp-block-latest-posts {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.wp-block-latest-posts__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important; /* カード間の余白 */
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

/* li要素を直接ターゲット（クラス名が付いていない場合も対応） */
.wp-block-latest-posts__list > li,
.wp-block-latest-posts__list li,
.wp-block-latest-posts > li,
.wp-block-latest-posts li,
.wp-block-latest-posts__list-item {
  background-color: #ffffff !important;
  border: 1px solid #f2e6ea !important; /* 薄いピンク色の枠線 */
  border-radius: 8px !important; /* 角丸 */
  padding: 0 !important; /* パディングを0にして、内部要素で管理 */
  margin-bottom: 0 !important; /* gapで管理するため0に */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; /* 軽い影 */
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
  list-style: none !important;
  display: flex !important; /* フレックスボックスで横並び */
  align-items: stretch !important; /* 高さを揃える */
  overflow: hidden !important; /* 角丸を維持 */
}

.wp-block-latest-posts__list > li:hover,
.wp-block-latest-posts__list li:hover,
.wp-block-latest-posts > li:hover,
.wp-block-latest-posts li:hover,
.wp-block-latest-posts__list-item:hover {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1) !important;
  border-color: #e0d0d5 !important;
}

.wp-block-latest-posts__list > li:last-child,
.wp-block-latest-posts__list li:last-child,
.wp-block-latest-posts > li:last-child,
.wp-block-latest-posts li:last-child,
.wp-block-latest-posts__list-item:last-child {
  margin-bottom: 0 !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* 画像エリア（左側） - 50px x 50px */
.wp-block-latest-posts__list > li > a.latest-post-image-link,
.wp-block-latest-posts__list li > a.latest-post-image-link,
.wp-block-latest-posts > li > a.latest-post-image-link,
.wp-block-latest-posts li > a.latest-post-image-link,
.wp-block-latest-posts__list > li > a:first-child,
.wp-block-latest-posts__list li > a:first-child,
.wp-block-latest-posts > li > a:first-child,
.wp-block-latest-posts li > a:first-child {
  display: block !important;
  width: 120px !important; /* 画像の幅を50pxに */
  min-width: 120px !important;
  height: 120px !important; /* 画像の高さを50pxに */
  min-height: 120px !important;
  flex-shrink: 0 !important; /* 縮小しない */
  overflow: hidden !important;
  background-color: #f8eef2 !important; /* 画像がない場合の背景色 */
  text-decoration: none !important;
  border-radius: 4px !important; /* 角丸を追加 */
}

.wp-block-latest-posts__list > li > a.latest-post-image-link img,
.wp-block-latest-posts__list li > a.latest-post-image-link img,
.wp-block-latest-posts > li > a.latest-post-image-link img,
.wp-block-latest-posts li > a.latest-post-image-link img,
.wp-block-latest-posts__list > li > a:first-child img,
.wp-block-latest-posts__list li > a:first-child img,
.wp-block-latest-posts > li > a:first-child img,
.wp-block-latest-posts li > a:first-child img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* 画像をカバー */
  display: block !important;
  border-radius: 4px !important; /* 角丸を追加 */
}

/* 画像がない場合のプレースホルダー */
.wp-block-latest-posts__list > li > a.latest-post-image-link:not(:has(img)),
.wp-block-latest-posts__list li > a.latest-post-image-link:not(:has(img)),
.wp-block-latest-posts > li > a.latest-post-image-link:not(:has(img)),
.wp-block-latest-posts li > a.latest-post-image-link:not(:has(img)) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 120px !important;
}

/* コンテンツエリア（右側） */
.wp-block-latest-posts__list > li > *:not(a:first-child),
.wp-block-latest-posts__list li > *:not(a:first-child),
.wp-block-latest-posts > li > *:not(a:first-child),
.wp-block-latest-posts li > *:not(a:first-child) {
  flex: 1 !important; /* 残りのスペースを使用 */
  padding: 20px !important; /* コンテンツエリアのパディング */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* 記事タイトル */
.wp-block-latest-posts__post-title {
  font-size: 18px !important; /* 適切なサイズに調整 */
  font-weight: bold !important; /* 太字 */
  margin-top: 0 !important;
  margin-bottom: 8px !important; /* タイトルと説明文の間 */
  line-height: 1.5 !important;
}

.wp-block-latest-posts__post-title a {
  text-decoration: none !important;
  color: #5C4B5C !important; /* 濃いグレー/紫 */
  transition: color 0.2s ease !important;
  display: block !important;
}

.wp-block-latest-posts__post-title a:hover {
  color: #6B5364 !important; /* ホバー時の色 */
}

/* 記事の説明文/概要 */
.wp-block-latest-posts__post-excerpt {
  font-size: 14px !important;
  color: #9ca3af !important; /* 薄いグレー */
  line-height: 1.6 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important; /* 2行で省略 */
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 日付などのメタ情報 */
.wp-block-latest-posts__post-date {
  font-size: 12px !important;
  color: #9ca3af !important;
  margin-top: 4px !important;
}

/* 後方互換性のため、古いクラス名もサポート */
.latest-posts-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.latest-posts-list .post-item {
  background-color: #ffffff !important;
  border: 1px solid #f2e6ea !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin-bottom: 0 !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.latest-posts-list .post-item:hover {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1) !important;
  border-color: #e0d0d5 !important;
}

.latest-posts-list .post-item h3 {
  font-size: 18px !important;
  font-weight: bold !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  line-height: 1.5 !important;
}

.latest-posts-list .post-item h3 a {
  text-decoration: none !important;
  color: #5C4B5C !important;
  transition: color 0.2s ease !important;
  display: block !important;
}

.latest-posts-list .post-item h3 a:hover {
  color: #6B5364 !important;
}

.latest-posts-list .post-item p {
  font-size: 14px !important;
  color: #9ca3af !important;
  line-height: 1.6 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 右カラム (おすすめ商品) */
.recommended-products-list .product-item {
  /* display: flex; */ /* flexは子要素のaタグに任せる */
  margin-bottom: 20px;
  border: 1px solid #eee;
  background-color: #f9f9f9;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.03); /* 少し控えめに */
}
.recommended-products-list .product-item a { /* リンク範囲をアイテム全体に */
  display: flex;
  gap: 15px;
  padding: 15px;
  text-decoration: none;
  color: inherit;
}
.product-thumbnail img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 1px solid #ddd;
  flex-shrink: 0; /* 画像が縮まないように */
}
.product-item-details { /* HTML構造でこのクラスを使う場合 */
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-title {
  font-size: 1.2em;        /* 1.1em → 1.2em に拡大 */
  margin-top: 0;
  margin-bottom: 8px;      /* 5px → 8px に拡大 */
}
.product-price {
  font-weight: bold;
  color: #c00;
  margin-bottom: 8px;
}
.product-description {
  font-size: 0.9em;        /* 0.85em → 0.9em に拡大 */
  margin-bottom: 12px;     /* 10px → 12px に拡大 */
  color: #555; /* 追加 */
  line-height: 1.6;        /* 1.5 → 1.6 に拡大 */
  flex-grow: 1; /* 説明文で高さを埋める */
}
.recommended-products-list .product-item .button-small { /* ボタンの位置調整 */
  margin-top: auto; /* 商品情報の下部にボタンを配置 */
  align-self: flex-start; /* ボタンを左寄せに */
}


/* --- レスポンシブ対応 --- */
@media (max-width: 991px) { /* 少し広めのブレークポイントで調整 */
  /* 特集コンテンツのアイテムを3列表示に変更 (例) */
  .featured-item {
    width: calc( (100% - (20px * 2)) / 3 );
  }
}

@media (max-width: 991px) {
  /* タブレット以下：最新記事・おすすめ商品セクションを1列表示に変更 */
  .main-sidebar-grid-section .wp-block-columns {
    grid-template-columns: 1fr !important; /* 1カラムにする */
  }
  
  .right-column-recommended {
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  /* スマホ：最新記事・おすすめ商品セクションを1列表示に変更 */
  .main-sidebar-grid-section .wp-block-columns {
    grid-template-columns: 1fr !important; /* 1カラムにする */
  }

  /* 特集コンテンツのアイテムを2列表示に変更 (例) */
  .featured-item {
    width: calc( (100% - 20px) / 2 );
  }
  .main-content-area { /* スマホではサイドバーが下にくるので、その上のマージン調整 */
    margin-bottom: 30px;
  }
}

@media (max-width: 480px) {
  /* 特集コンテンツのアイテムを1列表示に変更 (例) */
  .featured-item {
    width: 100%;
  }
  .main-visual-text h1 {
    font-size: 2em;
  }
  .main-visual-text p {
    font-size: 1em;
  }
  .section-title {
    font-size: 1.6em;      /* 1.5em → 1.6em に拡大 */
  }
}

/************************************
** おすすめ商品（右カラム）ウィジェット
************************************/
.right-column-recommended {
  width: 100%;
  max-width: 100%; /* サイドバーの幅に合わせる */
  background-color: #ffffff;
  padding: 24px;
  border-radius: 8px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin-bottom: 20px;
  box-sizing: border-box;
}

/* メインカラムスクロール追従エリアのウィジェット */
.main-scroll .widget.recommended_products_widget {
  width: 100%;
  max-width: 320px;
}

/* サイドバーのウィジェット幅を調整 */
#sidebar .widget.recommended_products_widget {
  width: 100%;
  max-width: 100%;
}

#sidebar .widget {
  box-sizing: border-box;
}

.recommended-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

.recommended-icon {
  color: #e8ccd7;
  font-size: 20px;
}

.recommended-title {
  font-size: 18px;
  font-weight: bold;
  color: #374151;
  letter-spacing: 0.05em;
  margin: 0;
}

.recommended-products {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.recommended-divider {
  border: none;
  border-top: 1px solid #f9fafb;
  margin: 0;
}

.recommended-item {
  display: flex;
  gap: 16px;
  cursor: pointer;
  align-items: flex-start; /* 画像とタイトルの上端を揃える */
}

.recommended-image-link {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  background-color: #f8eef2;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
}

.recommended-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recommended-no-image {
  font-size: 12px;
  color: #d1b3be;
  font-weight: 500;
}

.recommended-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2px 0;
}

.recommended-info {
  flex-grow: 1;
}

h3.recommended-product-title,
.recommended-product-title {
  font-size: 18px !important; /* 統一 */
  font-weight: bold !important;
  color: #6b5364 !important;
  line-height: 1.4 !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  border: none !important;
  transition: color 0.2s;
}

.recommended-product-title a {
  text-decoration: none !important;
  color: #6b5364 !important;
}

.recommended-item:hover .recommended-product-title,
.recommended-item:hover .recommended-product-title a {
  color: #b58396 !important;
}

.recommended-price {
  font-size: 16px; /* 14px → 16px */
  font-weight: 600;
  color: #4b5563;
  margin: 4px 0;
}

.recommended-excerpt {
  font-size: 14px; /* 10px → 14px */
  color: #9ca3af;
  margin: 4px 0 0 0;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recommended-link-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.recommended-link {
  display: flex;
  align-items: center;
  font-size: 14px; /* 10px → 14px */
  color: #9ca3af;
  text-decoration: none;
  transition: color 0.2s;
}

.recommended-item:hover .recommended-link {
  color: #4b5563;
}

.recommended-arrow {
  height: 12px;
  width: 12px;
  margin-left: 2px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .right-column-recommended {
    max-width: 100%;
  }
}

/************************************
** 個別ページのサイドバー幅を固定
************************************/
/* Cocoonのサイドバー幅を固定 */
#sidebar {
  width: 336px !important;
  min-width: 336px !important;
  flex-shrink: 0 !important;
}

/* メインコンテンツとサイドバーのラッパー */
.content-in {
  display: flex !important;
  flex-wrap: nowrap !important;
}

/* メインコンテンツは残りの幅を使用 */
#main {
  flex: 1 !important;
  min-width: 0 !important;
}

/* 大画面でもサイドバー幅を維持 */
@media (min-width: 1024px) {
  #sidebar {
    width: 336px !important;
    min-width: 336px !important;
  }
}

/* タブレット以下ではサイドバーを下に配置 */
@media (max-width: 1023px) {
  .content-in {
    flex-wrap: wrap !important;
  }
  #sidebar {
    width: 100% !important;
    min-width: 100% !important;
  }
}

/************************************
** 「未分類」カテゴリーを非表示
************************************/
.cat-item-1 {
  display: none !important;
}


/************************************
* 1. 囲み枠（カスタムクラス）
* 記事編集画面の「追加CSSクラス」に入力して使用
************************************/

/* 対策ポイント用（実線：しっかり目立たせる） */
.rin-point-box {
  border: 2px solid #7d6b74;    /* リンク色 */
  background-color: #fdf8f9;    /* ヘッダーの薄ピンク系 */
  border-radius: 12px;
  padding: 20px;
  margin: 2em 0;
}

/* 補足・豆知識用（ドット線：柔らかく見せる） */
.rin-dot-box {
  border: 2px dashed #7d6b74;   /* ドット線（リンク色） */
  background-color: #fdf8f9;    /* ヘッダーの薄ピンク系 */
  border-radius: 12px;
  padding: 20px;
  margin: 2em 0;
}


/************************************
* 2. 本文内の見出し（h2〜h6）
* 記事全体に自動で反映
************************************/

/* ------ 投稿本文（.entry-content）内のh2だけに左線＆下線 ------ */
/* トップページの.section-titleには適用しないため、.section-titleなしのh2に限定 */
.entry-content h2:not(.section-title) {
  color: #6b5364 !important;
  border-left: 6px solid #6b5364;
  border-bottom: 1px solid #d1c6cc;
  padding: 0.5em 0.8em;
  /* 必要なら下マージンなど調整可 */
}

/* h3〜h6見出しの色を一括設定 */
.article h3,
.article h4,
.article h5,
.article h6 {
  color: #6b5364 !important;      /* キーカラー */
}

/* h3：左線でアクセント */
.article h3 {
  border-left: 4px solid #7d6b74; /* リンク色で少し変化をつける */
  padding: 0.3em 0.7em;
  margin-top: 1.5em;
}

/* h4：下線でシンプルに */
.article h4 {
  border-bottom: 2px solid #d1c6cc;
  padding-bottom: 0.2em;
}

/************************************
** 最新記事セクション - widget-entry-cards のカード形式対応
************************************/
/* 最新記事セクション内の .widget-entry-cards をカード形式に */
/* 親テーマのCSSを上書きするため、!importantを使用 */
.main-content-area .widget-entry-cards,
.main-sidebar-grid-section .widget-entry-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important; /* カード間の余白 */
}

.main-content-area .widget-entry-cards .a-wrap,
.main-sidebar-grid-section .widget-entry-cards .a-wrap {
  background-color: #ffffff !important;
  border: 1px solid #f2e6ea !important; /* 薄いピンク色の枠線 */
  border-radius: 8px !important; /* 角丸 */
  padding: 20px !important; /* カード内のパディング */
  margin-bottom: 0 !important; /* gapで管理するため0に */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; /* 軽い影 */
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
  text-decoration: none !important;
  display: block !important;
}

.main-content-area .widget-entry-cards .a-wrap:hover,
.main-sidebar-grid-section .widget-entry-cards .a-wrap:hover {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1) !important;
  border-color: #e0d0d5 !important;
  text-decoration: none !important;
}

/* カード内の画像を非表示（デザインに画像がないため） */
.main-content-area .widget-entry-cards figure,
.main-sidebar-grid-section .widget-entry-cards figure {
  display: none !important;
}

/* カード内のコンテンツエリア */
.main-content-area .widget-entry-cards .widget-entry-card-content,
.main-sidebar-grid-section .widget-entry-cards .widget-entry-card-content {
  margin-left: 0 !important; /* 画像がないため左マージンを0に */
}

/* カード内のタイトル */
.main-content-area .widget-entry-cards .card-title,
.main-sidebar-grid-section .widget-entry-cards .card-title {
  font-size: 18px !important;
  font-weight: bold !important;
  color: #5C4B5C !important; /* 濃いグレー/紫 */
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  line-height: 1.5 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important; /* 2行で省略 */
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.main-content-area .widget-entry-cards .card-title a,
.main-sidebar-grid-section .widget-entry-cards .card-title a {
  color: #5C4B5C !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.main-content-area .widget-entry-cards .card-title a:hover,
.main-sidebar-grid-section .widget-entry-cards .card-title a:hover {
  color: #6B5364 !important;
}

/* カード内の説明文 */
.main-content-area .widget-entry-cards .card-snippet,
.main-sidebar-grid-section .widget-entry-cards .card-snippet {
  font-size: 14px !important;
  color: #9ca3af !important; /* 薄いグレー */
  line-height: 1.6 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important; /* 2行で省略 */
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}