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

/************************************
** テキトレ デザインカスタマイズ
** 更新日: 2026-04-16
** 削除/コメントアウトすれば元に戻る
************************************/

/* --- 1. フォント：Noto Sans JP --- */
body,
.entry-title,
.article h2, .article h3, .article h4,
.sidebar,
.navi-in a {
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif !important;
}

/* --- 2. 記事カード ホバーエフェクト --- */
.entry-card-wrap {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
}
.entry-card-wrap:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.entry-card-thumb img {
  transition: transform 0.3s ease;
  border-radius: 8px 0 0 8px;
}
.entry-card-wrap:hover .entry-card-thumb img {
  transform: scale(1.03);
}

/* --- 3. 見出しデザイン --- */

/* h2: 薄グレー背景＋オレンジ左線（ウィジェット見出しと統一） */
.article h2 {
  padding: 0.8em 1em !important;
  margin-top: 3em !important;
  margin-left: -1em;
  margin-right: -1em;
  border-left: 5px solid #e08a3a !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  background: #f5f5f5 !important;
  color: #333 !important;
  font-weight: 700 !important;
  font-size: 1.35em !important;
  line-height: 1.5 !important;
}

/* h3: オレンジ左線＋薄い背景 */
.article h3 {
  padding: 0.5em 0.8em !important;
  margin-top: 2em !important;
  border-left: 4px solid #e08a3a !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: 1px solid #eee !important;
  background: rgba(224, 138, 58, 0.07) !important;
  font-weight: 700 !important;
  font-size: 1.15em !important;
  color: #333 !important;
}

/* h4: シンプルにオレンジアクセント */
.article h4 {
  padding: 0.3em 0 !important;
  border: none !important;
  background: none !important;
  color: #c06828 !important;
  font-weight: 700 !important;
  font-size: 1.05em !important;
  margin-top: 1.5em !important;
}

/* スマホ向け: h2を画面幅いっぱいに広げる */
@media screen and (max-width: 768px) {
  .article h2 {
    margin-left: -4% !important;
    margin-right: -4% !important;
    padding: 0.8em 5% !important;
    font-size: 1.2em !important;
  }
}

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

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

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

/************************************
** 最近の投稿ウィジェット（人気記事カードと同じスタイルに統一）
************************************/
/* リスト全体のリセット */
.wp-block-latest-posts {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各アイテムを横並びカードに */
.wp-block-latest-posts li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid #e8e8e8 !important;
  overflow: hidden !important;
}
.wp-block-latest-posts li:last-child {
  border-bottom: none !important;
}

/* サムネイル（floatを打ち消してflexに従わせる） */
.wp-block-latest-posts .wp-block-latest-posts__featured-image {
  flex-shrink: 0 !important;
  float: none !important;
  margin: 0 !important;
  width: auto !important;
}
.wp-block-latest-posts .wp-block-latest-posts__featured-image img {
  width: 120px !important;
  height: 68px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 3px !important;
}

/* タイトル */
.wp-block-latest-posts .wp-block-latest-posts__post-title {
  display: block !important;
  flex: 1 !important;
  min-width: 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #333 !important;
  text-decoration: none !important;
  font-weight: normal !important;
  align-self: center !important;
  word-break: break-all !important;
}

/************************************
** カラー変数（今後の色変更はここだけ触ればOK）
************************************/
:root {
  --accent-color: #e08a3a; /* くすみオレンジ（ブランドカラー） */
  --main-color:   #1a1a1a;
  --base-color:   #ffffff;
  --text-color:   #333333;
}

/************************************
** author_box（運営者プロフィール）調整
** - 記事下の「この記事を書いた人」widget-id: #author_box-2
** - サイドバーの運営者プロフィール widget-id: #author_box-1
************************************/

/* 運営者名のホームリンクは無意味なので無効化（身バレ防止の観点でも） */
.author-box .author-name a {
  pointer-events: none;
  color: inherit;
  text-decoration: none;
  cursor: default;
}

/************************************
** 非表示系（SNSフォロー・シェアボタンUI整理）
** 目的:
**   - サイドバー以外のSNSフォロー表示を止める（重複対策）
**   - 記事・固定ページのシェアボタンを全て非表示にする
** 残すもの:
**   - サイドバー #author_box-1 のSNSフォロー（ここだけ表示）
************************************/
/* 記事下の author_box 内SNS + 記事下の「SNSでも発信中」widget */
#author_box-2 .sns-follow,
.widget-above-related-entries .sns-follow {
  display: none !important;
}

/* 固定ページ（プロフィール等）下部のSNSフォロー sf-bottom / sf-profile
   ※ サイドバー(#author_box-1)には影響しないようスコープ限定 */
.main .sns-follow.sf-bottom,
body:not(.single) .article .sns-follow {
  display: none !important;
}

/* 記事下のSNSシェアエリアを丸ごと非表示
   理由: ボタンのみ display:none だと「シェアする」ラベル＋空白が宙ぶらりんで残る。
   運用方針: しょうごの拡散導線はXのプロフィール／投稿に集約、インスタはURLシェア不可なので
   そもそもシェアボタン群は不要。親コンテナごと消してフッターをスッキリさせる。 */
.sns-share,
.sns-share-buttons {
  display: none !important;
}

/************************************
** サイドバー運営者プロフィールのSNSアイコン中央揃え
** 問題:
**   Cocoonが著者サイトボタン(ホームアイコン)を自動で足すが、
**   アイコンフォントが無く「空の箱」として左スペースを食う。
**   その結果 X + Instagram が右に寄って見える。
** 対策:
**   1. website-button を完全非表示
**   2. X/Instagram を中央揃え（flex justify-content:center）
************************************/
#author_box-1 .website-follow-button-sq,
#author_box-1 .website-button {
  display: none !important;
}
#author_box-1 .sns-follow-buttons {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  text-align: center !important;
}
#author_box-1 .sns-follow-buttons a {
  float: none !important;
  margin: 0 !important;
}

/************************************
** h3（記事・固定ページの wp-block-heading）
** 左ボーダー色だけアクセント色に上書き
************************************/
.article       h3.wp-block-heading,
.entry-content h3.wp-block-heading {
  border-left-color: var(--accent-color) !important;
}

/************************************
** 記事本文中の figure.article-image
** スマホで画像が大きくなりすぎる問題対策
** （インラインstyleより強い指定で確実に効かせる）
************************************/
.article figure.article-image {
  max-width: 500px !important;
  margin: 24px auto !important;
  text-align: center !important;
}
.article figure.article-image img {
  max-height: 400px !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}
@media screen and (max-width: 480px) {
  .article figure.article-image img {
    max-height: 300px !important;
  }
}