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

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

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*834px以下*/
/*必要ならばここにコードを書く*/
@media screen and (max-width: 834px) {
    main.main, div.sidebar {
        padding: 0px 0px;
        margin: 0px 0px;
        border-width: 0;
    }
}

/*フッターのデザイン変更*/
.footer {
	margin-top: 0;
	padding-top: 10px;
}
#custom_html-8,
.footer-bottom {
	margin-top: 0;
	padding-top:10px;
}

/* 自己紹介欄のSNSフォローボタンの改造 XとRSSだけ */
/* X（旧Twitter）ボタンの背景を黒にする */
div.author-follows a.follow-button.twitter-button.twitter-follow-button-sq {
    background-color: #000000 !important;
}

/* RSSボタンの背景 */
div.author-follows a.follow-button.rss-button.rss-follow-button-sq {
    background-color: #f26522 !important;
}

/* 全体のボタンスタイル統一 */
.author-box .author-content .author-follows .sns-buttons a.follow-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px; /* 少し丸みを持たせる */
    border: none;
    width: 130px; /* 幅少し広げた */
    height: 48px; /* 高さも広げた */
    font-size: 18px; /* 文字サイズ大きくした！ */
    font-weight: bold;
    color: #fff !important;
    margin: 5px;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* モバイルメニュー背景、色など */
.navi-menu-content {
	background-color: #fffffff0;
}
.menu-drawer a {
	font-size: 0.9em;
	line-height: 1.6em;
	border-bottom: solid 1px #e6e6e6;
}
.menu-drawer a:hover {
	background-color:#ffc0cb;　/*マウスオーバー時の背景色*/
}
.sub-menu li {                            
	margin-left:-14px;
	font-size: 0.9em;
	color: #e6e6e6;
}

/* エントリーカードアイキャッチ画像（サムネイル）の角を丸める */
.card-thumb img{
  border-radius: 10px; /*サムネイルの角を丸める*/
}
/* エントリーカードアイキャッチ画像（サムネイル）を枠いっぱいに広げる */
.entry-card-thumb {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  position: relative;
}
.entry-card-thumb img {
  width: 100% !important;
  height: auto !important;
  display: block;
  object-fit: cover;
  border: none;
}

/*エントリーカードホバー時の背景の色を変える*/
.entry-card-wrap:hover{
  background-color: #ffc9d7; /*背景の色*/
}

/* アイキャッチラベル非表示 */
.cat-label,
.cat-label-1,
.entry-category {
  display: none !important;
}

/* ヘッダーメニューをホバーしたときに背景が薄くなるアニメーションを消す */
#navi .navi-in a:hover{
  background: #ffc9d7;
}



/* 記事中の画像の指定 */
.article_top_img {
	display: flex; /* Flexbox レイアウトを使用 */
	justify-content: center; /* 水平方向の中央揃え */
	align-items: center; /* 垂直方向の中央揃え */
	width: 300px;  /* コンテナの幅 */
	height: 300px; /* コンテナの高さ */
	border: 0px solid #ccc; /* コンテナの境界線 */
	margin: 20px auto; /* コンテナをページ中央に配置 */
}

.article_top_img img {
    max-width: 100%;  /* 画像の最大幅をコンテナに合わせる */
    max-height: 100%; /* 画像の最大高さをコンテナに合わせる */
    /* 必要に応じて、画像のサイズ調整方法を調整 */
    object-fit: contain; /* または cover, fill, scale-down */
}

/* 記事タイトルの位置の微調整 */
main.main {
	margin-top: 0 !important;
	padding-top: 3px !important;
}

/* モバイル版だけの上に空白ができるので削除 */
@media screen and (max-width: 768px) {
  main.main {
    margin-top: 0 !important;
    padding-top: 5px !important;
  }
}

/* PCサイトでメインカラムの記事が少し下がって始まっていたので修正 */
@media screen and (min-width: 769px) {
  .main {
    margin-top: 0 !important;
    padding-top: 1.1em !important;
  }
}

/* 通知メッセージをデフォルトで非表示に */
body.home #notice-area,
body.front-page #notice-area {
  display: none !important;
}

/* 記事ページ（singleページ）のみ表示に */
body.single .notice-area-message {
  display: block !important;
}

/* メインコンテンツを少し上に上げた */
#content-in {
	margin-top: -10px !important;  /* 必要に応じて調整（例：-5px〜-20px） */
	padding-top: 0 !important;
}

/* トップページ記事画像と記事タイトルにスペースを入れる */
.entry-card-thumb-image {
  display: block;
  margin-bottom: 10px !important;
}

/* トップページ記事タイトルのフォントを変える */
.entry-card-title {
	font-size: 16px !important;
}
/*モバイルサイトでの記事タイトルのフォントを変える */
@media screen and (max-width: 768px) {
	.entry-card-title {
		font-size: 15px !important;
	}
}

/* 記事カードの親リストを1カラムに変更 */
#list, .entry-cards, .entry-card-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

/* 記事全体を横並びにする */
.entry-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 10px !important;
  border: 1px solid #ccc !important;
  margin-bottom: 0px !important;
}

/* 画像のスタイル */
.entry-card-thumb {
  flex: 0 0 120px !important;
  margin: 0 !important;
}

.entry-card-thumb img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* テキスト部分 */
.entry-card-content {
  flex: 1 !important;
}

/* .main 要素の 枠いっぱいに広げる */
/* 親要素を横並びにする */
.content {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0px !important; /* 必要に応じて間隔調整 */
  box-sizing: border-box !important;
}

/* メイン部分（記事一覧を含む） */
.main {
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 20 !important;
  box-sizing: border-box !important;
}

/* メイン内のリスト部分を最大幅に広げる */
.main #list {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* 各記事カードを幅いっぱいに */
.entry-card {
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: none !important;
  box-sizing: border-box !important;
}

/* サイドバーを右側に固定幅で配置 */
.sidebar {
  width: 300px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* サイドバーの全体の枠線をなくす */
#sidebar {
  border: none !important;
  box-shadow: none !important;
}

/* 左右枠いっぱいまで広げる */
#main {
  border: none !important;
  max-width: 100% !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
#list {
  margin-left: 0 !important;
  padding-left: 0 !important;
  width: 99% !important;
}

/* PC環境での日時の位置固定 */
.entry {
  position: relative;
}


/* 自己紹介枠の色を変える */
.author-box {
  border: 1px solid #ffb700 !important;
}

/* 枠をつけたい本命の外側リンク要素 */
a.popular-entry-card-link {
  display: block;
  border: 1px solid #fed848 !important;
  border-radius: 8px;
  padding: 4px;
  box-sizing: border-box;
}
/* 中の枠（重複するもの）を打ち消す */
.popular-entry-card {
  border: none !important;
  box-shadow: none !important;
}

/* 記事リストの色を交互に変える */
#list .entry-card-wrap:nth-child(odd) {
  background-color: #fffaf0 !important; /* 奇数番目 */
}
#list .entry-card-wrap:nth-child(even) {
  background-color: #ffffff !important; /* 偶数番目 */
}

/* 記事リストの枠の色を変える */
/* トップページのリストの左右の枠をなくす */
#list .entry-card-wrap {
    border-top: 1px solid #ffb700 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

/* リストの中身（記事部分）を少し下げる */
#list .entry-card {
  margin-top: 10px !important; /* 下げたい高さに調整（例：10px） */
}

/* トップページのリストのタイトルの文字が全部表示されるように */
#list .entry-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  height: auto !important;
  min-height: 100px !important;
  margin-top: 10px !important; /* ← コレをしっかり効かせる！ */
}

#list .entry-card-thumb {
  width: 150px !important;
  height: auto !important;
  flex-shrink: 0 !important;
}

#list .entry-card-content {
  flex-grow: 1 !important;
  height: auto !important;
  padding: 0 10px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

#list .entry-card-title {
  white-space: normal !important;
  overflow: visible !important;
  height: auto !important;
}
/* トップページのリストのタイトルの文字が全部表示されるように ここまで*/

/* 長いタイトル省略しないようにする対策 */
#list .entry-card-content {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}
#list .entry-card-content {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}
#list .entry-card-title {
  max-height: none !important;
  -webkit-line-clamp: unset !important;
}
/* 長いタイトル省略しないようにする対策ここまで */

/* リストの中にある画像と本文が上下中央寄せになる */
#list .entry-card {
  display: flex !important;
  align-items: center !important; /* ← 上下中央にする */
  gap: 10px; /* 画像と本文の間の余白、調整可能 */
}

#list .entry-card-thumb {
  flex-shrink: 0 !important; /* 画像のサイズを固定に保つ */
}

#list .entry-card-content {
  flex: 1 !important;
}
/* リストの中にある画像と本文が上下中央寄せになるようにここまで */

/* リストの中にある画像と本文の上下中央寄せ */
#list .entry-card {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

/* 記事ページ全体に左右の空白を追加 */
article.article {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* 関連記事の左右に少し空白 */
.under-entry-content {
  padding-left: 15px;
  padding-right: 15px;
}

/* 記事ページ一番下の空白をなくす */
.entry-content.cf {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 記事タイトル下に薄い仕切り線 */
.article .entry-title {
	border-bottom: 1px solid #ccc;
	padding-bottom: 1em;
	margin-bottom: 1em;
	background-color: #fed848;
	padding: 0.5em 1em; /* 背景色の余白調整 */
    margin-top: 15px; /* 必要に応じて調整 */
}

/* PC版記事タイトルを少し小さく */
@media screen and (min-width: 768px) {
  body.single-post .article h1.entry-title {
    font-size: 19px !important;
    line-height: 1.4 !important;
  }
}

/* モバイル版の記事のタイトルのフォント変更 */
@media screen and (max-width: 768px) {
  body.single-post .article h1.entry-title {
    font-size: 19px !important;
    line-height: 1.4 !important;
  }
}

/* ジャンルへのリンクの非表示 */
a.cat-link.cat-link-1 {
  display: none !important;
}

/* 記事ページのタイトルを横幅一杯に広げるのと、他要素の左右に空白を入れる */
article.article {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
}
.entry-content.cf {
    padding-right: 10px !important;
	padding-left: 10px !important;
}
.article-footer.entry-footer {
    padding-right: 10px !important;
	padding-left: 10px !important;
}
/* 記事ページのタイトルを横幅一杯に広げるのと、他要素の左右に空白を入れる */

/* トップページのサイドバーの位置の微調整 */
body.home #sidebar {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 記事ページの画像の上下の余白潰し */
.article_top_img {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1 !important;
}
.entry-title {
  margin-bottom: 0 !important;
}
.entry-content {
  margin-top: 0 !important;
}
/* 記事ページの画像の上下の余白潰しここまで */

/* キャプション（"X"などの文字）を非表示に */
/* シェアボタンのキャプション非表示 */
.sns-button.share-button .button-caption {
  display: none !important;
}
/* フォローボタンのキャプション非表示 */
.sns-button.follow-button .button-caption {
  display: none !important;
}

/* アイコンをボックスに合わせて小さく */
.sns-button.share-button .social-icon {
  font-size: 20px !important;
  line-height: 1;
  display: block;
}

/* パンくずリストを右にずらす */
#breadcrumb {
  margin-left: 20px; /* 右にずらす距離を調整してください */
}

/* トップに戻るのアイコン変更 */
.go-to-top-button .fa:before {
    content: '\f062';
}
/* トップに戻るボタンの基本設定 */
.go-to-top-button {
    flex-direction: column;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: fixed;
    bottom: 120px; /* 画面下から20pxに変更して少しだけ下寄り */
    right: 20px;  /* 画面右から20pxにして常に右端寄り */
    z-index: 100;
    background-color: #fed848 !important; /* 色指定 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* ちょっと影をつける */
}
/* トップに戻るボタンのテキスト */
.go-to-top-button:after {
    content: 'TOP';
    font-size: 12px;
    margin-top: 4px;
    display: block;
    text-align: center;
}

/* フッタータイトル中央寄せ */
.widget-footer-center-title {
  text-align: center;
}
/* フッターモバイルタイトル中央寄せ */
.widget-footer-mobile-title {
  text-align: center;
}
/* フッターのスペース削除 */
.footer-widgets {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* AddToAnyのSNSシェアボタンを中央寄せ */
.addtoany_share_save_container {
  text-align: center;
}
/* AddToAnyのSNSシェアボタン同士の間隔を広げる */
.addtoany_list a {
  margin: 0 10px; /* 左右に10pxずつ余白 */
}
/* AddToAnyのSNSシェアアイコンを中央寄せ */
.addtoany_list a svg {
  vertical-align: middle;
}

/* モバイルの記事ページだけヘッダー非表示 */
@media screen and (max-width: 768px) {
	.single #header {
		display: none;
	}
}

/* メインカラムの記事リストをマウスオーバーした時にホバーでふわっと浮かす */
#main .entry-card:hover {
    transform: translateY(-3px);
}

/* ヘッダーとリストの間の空白を消す */
#main {
    margin-top: 0 !important; /* リスト側の上マージンを消す */
    padding-top: 0 !important; /* 念のためパディングも消す */
}

/* ヘッダー下の線を完全に消す */
#content {
    border-top: none !important; 
}

/* 新着記事の枠線の色を人気記事の枠と同じに */
.new-entry-card-link {
    border: 1px solid #f26522 !important; /* 人気記事と同じ色 */
}


/* 新着記事の枠の色を変える */
a.new-entry-card-link {
  display: block;
  border: 1px solid #ffb700 !important;
  border-radius: 8px;
  padding: 4px;
  box-sizing: border-box;
}
/* 中の枠（重複するもの）を打ち消す */
.new-entry-card-link {
  border: none !important;
  box-shadow: none !important;
}

/* 人気記事のフォントサイズを少し小さく */
.popular-entry-card-link .popular-entry-card-title.widget-entry-card-title.card-title {
    font-size: 13px !important; /* フォントサイズを小さく */
    font-weight: bold !important; /* フォントの太さを標準に */
}

/* 前の記事の仕切り線を#ffb700に変更 */
.prev-post.a-wrap.border-element.cf {
    border-color: #ffb700 !important; /* ボーダーの色を変更 */
}
/* 次の記事の仕切り線を#ffb700に変更 */
.next-post.a-wrap.cf {
    border-color: #ffb700 !important; /* ボーダーの色を変更 */
}
/* もし前後の要素にボーダーがある場合 */
.prev-post-title, .next-post-title {
    border-color: #ffb700 !important; /* タイトル部分のボーダー色を変更 */
}

/* 関連記事のリストの枠の色を#ffb700に変更 */
.related-entry-card-wrap.a-wrap.border-element.cf {
    border-color: #ffb700 !important; /* ボーダーの色を変更 */
}

/* 新着記事全体を関連記事と同じ見た目に */
.new-entry-card {
  display: flex !important;
  align-items: center !important;
  padding: 8px !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: none !important;
  margin-bottom: 10px !important;
}
/* 画像サイズを統一 */
.new-entry-card-thumb {
  width: 120px !important;
  flex-shrink: 0 !important;
  margin-right: 10px !important;
}
.new-entry-card-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 4px !important;
}
/* テキストを上下の中央と左寄せに */
.new-entry-card {
    display: flex !important; 
    align-items: center !important; /* 中央揃え */
    padding: 8px !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: none !important;
    margin-bottom: 10px !important;
}
.new-entry-card-thumb {
    margin-right: 10px; /* 画像とテキストの間にスペースを追加 */
    flex-shrink: 0; /* 画像が縮まないようにする */
}
.new-entry-card-content {
    display: flex;
    flex-direction: column; /* テキストを縦方向に配置 */
    align-items: flex-start; /* 左揃え */
    flex-grow: 1; /* テキストができるだけ左に広がるように */
    margin: 0; /* 余白をなくす */
}
.new-entry-card-title {
    text-align: left !important; /* テキストを左揃え */
    font-size: 16px !important;
    font-weight: bold !important;
    margin: 0; /* マージンを削除 */
    padding: 0; /* パディングを削除 */
}
/* テキストを上下の中央と左寄せに */

/* カテゴリ、タグの色を変える */
.tag-link {
  display: inline-block !important;
  background-color: #0092f2 !important; /* きれいな青系 */
  color: #ffffff !important;            /* 文字は白に */
}
.cat-link {
  display: inline-block !important;
  background-color: #0092f2 !important; /* きれいな青系 */
  color: #ffffff !important;            /* 文字は白に */
}
/* カテゴリーとタグの下のスペースなくす */
.entry-categories-tags {
    margin-top: 10px !important;
	margin-bottom: 10px !important;
	text-align: center !important;
}

/* トップページのメインリストとサイドバーの高さを合わせる */
#sidebar {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
#sidebar h3.widget-sidebar-title {
    margin-top: 0 !important;
}
/* 記事ページのメインリストとサイドバーの高さを合わせる */
.entry-title, .archive-title {
    margin: 0px 0 !important;
}

/* 幅を狭めた時に画面端にくっついていたのでマージンを入れる */
@media (min-width: 767px) {
	body.home #main {
	   margin-left: 20px !important;
	}
}

/* ヘッダーの枠線があったので解除 */
#navi {
  border: none;
  box-shadow: none;
}

/* ハンバーガーメニューに仕切り線を付ける */
#navi-menu-content li {
  border-bottom: 1px solid #0092f2;
}
#navi-menu-content ul.sub-menu li {
  border-top: 1px solid #0092f2; /* 好きな色に変更できます */
  border-bottom: none; /* 下の線は消す */
}

/* サイドバータイトルのフォント変更 */
.widget-sidebar-title {
  font-size: 16px;
}

/* ヘッダーメニューの色を変える */
.mobile-header-menu-buttons {
  background-color: #fffaf0;
  padding: 0px;
}

/* メニューボタンのアイコン変更 */
.mobile-header-menu-buttons .menu-icon {
  font-weight: 900; /* アイコンを太くする */
  font-size: 24px; /* アイコンサイズを調整 */
}

/* フォント変更 */
body {
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-family: "Noto Sans JP", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #333 !important;
}
h1 {
  font-size: 2em !important;
  line-height: 1.2 !important;
}
/* フォント変更 */

/* 幅全体を1200pxに抑える */
.container {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* トップページ PC版だけメインカラムとサイドバーを少しずらして左右のバランスを取る */
@media (min-width: 767px) {
	body.home #main {
		margin-left: 10px !important;
		margin-right: 10px !important;
	}
	#sidebar.sidebar {
		margin-left: 0px !important;  /* サイドバーを少し左へ */
	}
}
/* 記事ページ PC版だけメインカラムとサイドバーを少しずらして左右のバランスを取る */
@media (min-width: 768px) {
  body.single,
  .single #container {
    padding-left: 5px !important;
    padding-right: 5px !important;
    box-sizing: border-box !important;
  }
  #main {
    margin-left: 5px !important;   /* 左の余白をやや小さく */
    margin-right: 10px !important; /* サイドバーとの間は維持 */
  }
  #sidebar.sidebar {
    margin-right: 10px !important; /* サイドバーの右側に余白追加 */
    margin-left: 0 !important;     /* 左側（メインとの間）はそのまま */
  }
}

/* PCの記事ページだけトップメニューの丸みを変える */
@media (min-width: 768px) {
  body.single nav#navi {
    border-top-left-radius: 4px !important;   /* 上の角は丸いまま */
    border-top-right-radius: 4px !important;
    border-bottom-left-radius: 0 !important;  /* 下の角を直角に */
    border-bottom-right-radius: 0 !important;
  }
}

/* アーカイブタイトルにスペースを付けた */
.archive-title {
	margin: 20px !important;     /* 左側（メインとの間）はそのまま */
}

/* 背景色をライトグレーに */
body {
  background-color: #f5f5f5 !important;
}

/* モバイルページのトップページのリストに日時を表示 */
@media screen and (max-width: 768px) {
  .entry-card-info {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 0.75em !important; /* タイトルとの間隔を調整 */
  }
  .entry-card-info .post-date {
    font-size: 0.75rem !important;
    color: #888 !important;
  }
  .entry-card-meta {
    padding-bottom: 0.5em !important;
  }
}

/* なぜかアイキャッチが出てしまうのでオフに */
.attachment-post-thumbnail {
  display: none !important;
}

/* ヘッダーの上左右を丸めた */
#header {
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}
#header-container {
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}

/* 記事の画像の大きさ */
.post-image {
	width: 300px !important;
	display: block !important;
	margin: 0 auto !important;
	border: none;
	margin-bottom: 10px !important; /* 下に10pxのスペースを追加 */
}

/* 公開日時入力欄の表示崩れを修正 */
#timestampdiv select,
#timestampdiv input {
  width: auto;
  min-width: 4em;
  padding: 2px;
  margin-right: 4px;
  box-sizing: border-box;
  vertical-align: middle;
  font-size: 13px;
}

/* 投稿画面でWebpushr Previewを下部に移動 */
#webpushr_13fw3_switch-mode {
    position: absolute;
    bottom: 20px; /* 必要に応じて調整 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
}

/* 管理画面の投稿エリアに適用 */
.post-php #webpushr_13fw3_switch-mode {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* サイドバーの画像を拡大せずに収める */
.sidebar .widget-entry-card-thumb img {
  object-fit: contain !important; /* クロップせずに収める */
  width: 100% !important;
  height: auto !important;
}

/* トップページリストの画像を少し右に */
.entry-card-thumb img {
  position: relative;
  left: 5px; /* 必要に応じて1〜10px程度で調整 */
}

/* 人気記事の表示の修正 */
/* ① まず float や古い display 指定をリセット */
.popular-entry-card-thumb,
.popular-entry-card-content {
  float: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* ② グリッドレイアウトで２カラムに */
.popular-entry-card {
  display: grid !important;
  grid-template-columns: 120px 1fr !important; /* サムネ幅を固定 */
  column-gap: 10px !important;                /* サムネと文字の隙間 */
  align-items: center !important;              /* 縦中央揃え */
  padding: 5px 0 !important;                   /* 上下の余白 */
  box-sizing: border-box !important;
  width: 100% !important;
}
/* ③ 画像は枠いっぱいに */
.popular-entry-card-thumb img {
  width: 100% !important;
  height: auto !important;
}
/* ④ テキスト側の余白微調整 */
.popular-entry-card-content {
  box-sizing: border-box !important;
}
.popular-entry-card-title,
.popular-entry-card-date {
  margin: 0 !important;
  line-height: 1.3 !important;
  word-break: break-word !important;
}
/* 人気記事の表示の修正 */

/* 右サイドの見た目を良くする用ここから */
.sidebar,
.widget-area,
#secondary {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.sidebar .widget,
.widget {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.sidebar .widget {
  margin-bottom: 24px !important;                       /* ウィジェット間のスペース */
  padding: 16px !important;                             /* 内側の余白 */
  border-radius: 8px !important;                        /* 角丸 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; /* うっすら影 */
}
.sidebar .widget .widget-title {
  margin: 0 0 12px !important;
  padding: 0 0 4px !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  border-bottom: 2px solid currentColor !important;     /* テキストと同色の下線 */
}
.sidebar .widget ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sidebar .widget ul li {
  margin-bottom: 8px !important;
}

.sidebar .widget ul li:last-child {
  margin-bottom: 0 !important;
}

.sidebar .widget a {
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
}

.sidebar .widget a:hover {
  opacity: 0.8 !important;
}
/* サイドバータイトルの左寄せを緩和＆下線色を灰色に */
.sidebar .widget .widget-title {
  padding-left: 12px !important;              /* 左側の余白を追加 */
  padding-right: 12px !important;             /* 必要なら右側も */
  border-bottom: 2px solid #ccc !important;   /* 軽い灰色の下線に変更 */
  border-radius: 4px !important;
}

.sidebar .widget_search {
  margin-bottom: 0px !important;  /* 必要に応じて数値を調整 */
}

/* 検索フォーム（.search-box.input-box）の下の余白をゼロに */
.sidebar .widget_search .search-box.input-box {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 次のウィジェットとの間のマージンもゼロに */
.sidebar .widget_search + .widget {
  margin-top: 0 !important;
}
/* 右サイドの見た目を良くする用ここまで */


/* ───────────────────────────────────
   記事本文（段落・テキスト全般）のスタイル
─────────────────────────────────── */
.entry-content {
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Meiryo", sans-serif !important;
  font-size: 16px !important;       /* 基本フォントサイズ */
  line-height: 1.6 !important;      /* 行間 */
  letter-spacing: 0.03em !important;/* 字間 */
  color: #333333 !important;        /* 文字色 */
}
/* ───────────────────────────────────
   見出しのスタイル（h2, h3, h4）
─────────────────────────────────── */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family: "Noto Serif JP", serif !important;
  font-weight: 600 !important;
  margin-top: 2em !important;
  margin-bottom: 0.8em !important;
  line-height: 1.4 !important;
}
/* ───────────────────────────────────
   リンク・強調（<a>、<b>）のスタイル
─────────────────────────────────── */
/* リンクは本文より少し濃い青で下線 */
.entry-content a {
  color: #008DE9 !important;
  text-decoration: underline !important;
}
/* <b> タグ */
.entry-content b {
  color: #E65100 !important;
}
/* ───────────────────────────────────
   箇条書きリストの余白とマーカー調整
─────────────────────────────────── */
.entry-content ul,
.entry-content ol {
  margin-left: 1.4em !important;
  margin-bottom: 1em !important;
  padding-left: 0 !important;
  list-style-position: outside !important;
}
.entry-content li {
  margin-bottom: 0.6em !important;
}
/* ───────────────────────────────────
   ブロック引用（blockquote）のスタイル
─────────────────────────────────── */
.entry-content blockquote {
  border-left: 4px solid #ccc !important;
  padding-left: 12px !important;
  margin: 1.5em 0 !important;
  background: rgba(0, 0, 0, 0.02) !important;
  color: #555 !important;
}

/* サイトロゴのサイズ指定 CLS改善のため */
.site-logo {
  width: 307px !important;
  height: auto !important;
  aspect-ratio: 307 / 63 !important;
}

/* 本文の余白・行間を広げて読みやすく */
/* コンテナ幅＆余白 */
.entry-content {
  max-width: 800px;      /* 読みやすい行長に */
  margin: 0 auto;        /* 中央寄せ */
  padding: 20px;         /* 周囲に余白 */
}
/* 段落の行間と余白 */
.entry-content p {
  line-height: 1.8;      /* 行間を広めに */
  margin-bottom: 1.2em;  /* 段落間のスペース */
}

/* 記事ページの画像を丸くしたり 画像のサイズを変えたり */
.post-image img {
  display: block !important;
  margin: 0 auto 1.5em !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
body.single-post .entry-content .post-image > a > img {
  display: block !important;       /* ブロック要素化＆中央寄せ */
  margin: 0 auto !important;       /* 左右中央 */
  max-width: 240px !important;     /* 大きいときだけ240pxに縮小 */
  width: auto !important;          /* 240px以下は元サイズ */
  height: auto !important;         /* アスペクト比を維持 */
}


/* モバイル版でのサイバーのタイトルの改善 */
@media screen and (max-width: 767px) {
  /* サイドバー内ウィジェットのタイトル */
  .sidebar .widget .widget_title,
  .sidebar .widget .widget-title {
    display: block !important;       /* ブロック要素にして幅いっぱいに */
    font-size: 18px !important;      /* フォントサイズを指定 */
    line-height: 1.4 !important;     /* 行の高さを調整 */
    letter-spacing: normal !important; /* 文字間詰まりをリセット */
    padding: 8px 12px !important;    /* 前後に余白を確保 */
    margin-bottom: 10px !important;  /* 下のコンテンツとの間隔 */
    box-sizing: border-box !important;
  }
}

/* Cocoonブログカードの調整 */
.blogcard-snippet,
.blogcard-site {
  display: none !important;
}
/* Blogcard Thumbnail and Title Adjustment */
.internal-blogcard-wrap .blogcard-thumbnail {
    width: 120px !important; /* 現在の160pxより小さく調整 (例: 120px) */
    height: 120px !important; /* 幅に合わせて高さを調整 (正方形を維持する場合) */
    /* もし高さも自動にしたい場合は height: auto; も試せますが、レイアウトが崩れる可能性あり */
}
.internal-blogcard-wrap .blogcard-thumb-image {
    width: 100% !important; /* 親要素の幅に合わせる */
    height: 100% !important; /* 親要素の高さに合わせる */
    object-fit: cover; /* 画像がアスペクト比を保ったまま親要素を埋めるように調整 */
}
.internal-blogcard-wrap .blogcard-content {
    flex-direction: column; /* 子要素を縦に並べる */
    justify-content: center; /* 垂直方向の中央揃え */
    /* 必要に応じて padding-left を調整 (サムネイルの幅が変わったため) */
    /* 現在のテーマのCSSにもよりますが、以下のような指定が必要になるかもしれません */
    /* padding-left: 130px; */ /* サムネイル幅 + 余白分 (例: 120px + 10px) */
}
.internal-blogcard,
.blogcard {
  border: 1px solid #ffb700 !important;
  border-radius: 4px !important;        /* 元々の角丸が必要なければそのまま */
}
.blogcard-wrap,
.internal-blogcard-wrap {
  margin-bottom: 5px !important;
  display: block !important;
  padding-bottom: 5px !important;
}
/* Cocoonブログカードの調整 */

/* 楽天のセール一覧を見やすく */
.sale-list p {
  margin: 0;               /* 行間を詰めたい場合 */
  padding: 0px 0px;        /* お好みで上下左右の余白を調整 */
  font-size: 80%;          /* 文字を少し小さく */
  background-color: transparent; /* 一度背景をクリア */
}
.sale-list p:nth-child(odd) {
  background-color: #e0f7ff !important;  /* 奇数行の背景色 */
}
.sale-list p:nth-child(even) {
  background-color: #ffffff !important;  /* 偶数行の背景色 */
}
/* 楽天のセール一覧を見やすく */


/* Amazon価格比較を見やすく */
.discount-box {
	text-align: center;
	padding: 0em;
	border: 1px solid #E65100 !important;
	border-radius: 5px;
	line-height: 1.5; /*  行間を少し狭く */
}
/* 1行目のテキストの共通スタイル（サイズや太さ） */
.discount-first-line,
.discount-first-line-hot {
    font-size: 1.2em;
    font-weight: bold;
}
/* 1行目のテキストの通常時の色 */
.discount-first-line {
    color: #E65100;
}
/* 1行目のテキストの50%以上OFFの時の色 */
.discount-first-line-hot {
    color: red;
}
/* 2行目の比較テキスト */
.discount-comparison-text {
    font-size: 0.9em;
    color: #555;
}
/* Amazon価格比較を見やすく */