@charset "UTF-8";
/*
Theme Name: My Custom Theme1
Description: オリジナルのベーステーマです。
Version: 1.0
Author: RunRun
*/

/* --- ここから下に、おいおい自分のCSSを書いてしていきます --- */

/* -----------------------------------------
   全体のレイアウト（幅固定と中央寄せ）
----------------------------------------- */
body {
    color: #666;
    font-size: 14px;
    font-family: monospace, serif;
    text-shadow: 1px 1px 3px #999;
    margin: 0;
    padding: 0;
    background-color: #ECCCB3; /*薄茶色*/
    background: linear-gradient(90deg, #E4A972, #ffffff, #ffffff, #9941D8);
    line-height: 1.42857;
}

/* -----------------------------------------
   横揺れ（横スクロール）を根本から防ぐ
----------------------------------------- */
/* ボックスサイズ設定（余白や枠線で幅が膨らむのを防ぐ） */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 画像や動画が画面幅を超えないようにする */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

  /* リンク関連 */
        a {
            font-weight: bold;
            text-decoration: none;
            border-width: 0px 0px 1px 0px;
            border-style: dashed;
            border-color: #804040;
        }

        a:link    { color: #804040; } /*茶*/
        a:visited { color: #804040; } /*茶*/
        a:hover   { 
            position: relative;
            top: 1px;
            color: #c86f39;  /*オレンジ*/
            background-color: #ECCCB3; /*薄茶色*/
        }
        a:active  { color: #9bab27; } /*若葉色*/

        a img { 
            border:none;
           border-top-left-radius: 10px;
           border-top-right-radius: 10px;
           border-bottom-right-radius: 10px;
           border-bottom-left-radius: 10px;
        }

        hr {
           border-width: 2px 0px 0px 0px;
           border-style: dotted;
           border-color: #b06262;
           height: 2px;
           }

        b  {
           padding: 2px 2px 0px 2px;
           }


/* -----------------------------------------
ヘッダーのウィジェットと広告を横並びにする設定
----------------------------------------- */
.header-widget-ad-wrapper {
    display: flex;
    justify-content: space-between; /* 左右に振る */
    align-items: center;            /* 上下の中央に揃える */
    margin: 10px 0;
}

/* 左側ウィジェットエリア */
.header-left-widget {
    flex: 1; /* 空きスペースに合わせて自動で伸びる */
}

/* 右側広告エリア */
.site-ad-top {
    margin-left: 20px; /* ウィジェットとの間の余白 */
    text-align: right; /* 広告を右寄せ */
}

/* -----------------------------------------
   全ページ共通・最上部広告エリアの装飾
----------------------------------------- */
.site-ad-top {
    padding-top: 20px;     /* メニューバーとの間のすき間 */
    padding-bottom: 10px;  /* コンテンツ（タイトル）との間のすき間 */
    text-align: center;    /* 広告を中央寄せ */
    background: rgba(255,255,255,0.5); /* コンテンツ部分を白背景に(少し透過) */
    overflow: hidden;
}

.site-ad-top img {
    max-width: 100%;
    height: auto;
}

.site-ad-top a {
	border-style: none;/* 広告リンクの線を非表示 */
}

/* ヘッダー広告直下エリアのレイアウト調整 */
.header-bottom-widget-area {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}


/* -----------------------------------------
   コンテンツ全体のサイズなど
----------------------------------------- */
.site-container {
    max-width: 995px;  /* 全体の最大横幅を995pxに固定 */
    margin: 0 auto;    /* 左右を「auto」にして中央寄せにする */
    padding: 0;        /* スマホ表示のときの左右の余白 */
    background: rgba(255,255,255,0.5); /* コンテンツ部分を白背景に(少し透過) */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

/* ヘッダー・フッターの装飾 */
.site-header {
    padding: 40px 0;
    border-bottom: 2px solid #ddd;
}
.site-footer {
    padding: 20px 0;
    border-top: 1px solid #ddd;
    text-align: center;
    font-size: 14px;
}

/* -----------------------------------------
   ヘッダー画像（ロゴ）のレスポンシブ・横幅いっぱい設定
----------------------------------------- */
.site-header {
    padding: 0; /* 画像を完全いっぱいに広げるため、ヘッダーの余白を一度0にします */
}

.site-logo a {
    display: block;
	border-style: none;
    width: 100%;
}

.site-logo a:hover {
    top: 0; /* ロゴ画像にホバー時はズレないように */
}

.site-logo img {
    display: block;
    width: 100%;       /* 親要素（995px）に対して100%の幅にする */
    height: auto;      /* 縦横比を維持する魔法のコード */
    max-width: 100%;   /* スマホなどで画面が小さくなってもはみ出さない */
}


/* -------------------------------------------
   ヘッダー：サイトタイトルとキャッチフレーズ
------------------------------------------- */

/* サイトタイトルのフォント種類とサイズを変更 */
.site-header h1 {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; /* お好みのフォントに変更してください */
    font-size: 40px; /* お好みのサイズに変更してください */
    margin-left: 20px;   /* ←追加：左の余白 */
    margin-bottom: 10px; /* キャッチフレーズとの余白 */
}

/* サイトタイトルのリンクの文字色を変えたい場合 */
.site-header h1 a {
    color: #999999; /* お好みの色に変更してください */
    text-decoration: none !important; /* 下線を消す */
	border-style:  none !important;
}

/* キャッチフレーズのフォント種類とサイズを変更 */
.site-header p {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; /* お好みのフォントに変更してください */
    font-size: 18px; /* お好みのサイズに変更してください */
    color: #999999; /* 文字色 */
    margin-left: 30px;   /* ←追加：左の余白 */
}




/* -----------------------------------------
   ヘッダーナビゲーションメニューの装飾
----------------------------------------- */
.header-navigation {
    background-color: #8DD04A; /* メニューの背景色（緑系） */
}

.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;          /* ★メニューを横並びにする */
    flex-wrap: wrap;        /* はみ出た場合は折り返す */
}

.menu-list li a {
    display: block;
    padding: 15px 25px;
    color: #804040;            /* 文字を茶に */
    text-decoration: none;
    font-size: 15px;
	border-style: none;
    transition: background-color 0.3s;
  animation  : sample2Anime 4s linear infinite alternate;
}
@keyframes sample2Anime{
   0% { text-shadow:  2px  2px 10px #fff ,
                     -2px  2px 10px #fff ,
                      2px -2px 10px #fff ,
                     -2px -2px 10px #fff;}
 100% { text-shadow:  2px  2px 10px #777 ,
                     -2px  2px 10px #777 ,
                      2px -2px 10px #777 ,
                     -2px -2px 10px #777;}
}

/* マウスを乗せたとき（ホバー時）の背景色変化 */
.menu-list li a:hover {
    background-color: #649F28; 
}


/* -----------------------------------------
   各記事内タイトルよりの下の本文の外側スペース(少し内側にはいるように)
----------------------------------------- */
.post-body {
	margin-left: 10px;
	margin-right: 10px;
	}

/* <pre> タグが画面外へ伸びるのを防ぎ、枠内で折り返す設定 */
.post-body pre {
    white-space: pre-wrap;       /* 折り返しを許可 */
    word-break: break-all;       /* 長い英単語も枠内で折り返す */
    max-width: 100%;             /* 親要素からはみ出させない */
    overflow-x: auto;            /* 超過分は枠内だけでスクロール */
}

 /* <h2> 本文内の大見出し */
.post-body h2 {
           border-bottom: 3px solid #6b6b6b;    /* グレー */
	       border-left: 10px solid #6b6b6b;    /* グレー */
		   background-color: #fff0f5; /* すごく薄いピンク */
	       padding: 3px 5px;
           color : #6b6b6b;
           text-shadow: 2px 2px 5px #666;
}

 /* <h3> 本文内の小見出し */
.post-body h3 {
		  display: inline; /* ブロック要素ではなく、インラインに */
	      border-bottom: 2px solid #b06262;
		  padding: 5px 40px 5px 10px;
	      background-color: #fff0f5; /* すごく薄いピンク */

}

 /* <span> 本文内のpickup表示 */
.post-body span {
	  	  display: flex;
	      margin-right: auto;
          border-radius: 6px 6px 6px 6px; /* 角を丸く */
	      border: 1px dotted #b06262;
		  padding: 10px 10px 10px 10px;
	      background-color: #fff0f5; /* すごく薄いピンク */
}
	
	
/* -----------------------------------------
  ピックアップカードのレイアウト
----------------------------------------- */
.pickup-card-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.pickup-card-item {
    width: calc(33.333% - 14px); /* PCでは3列並び */
    background: #ffffff;
    border-radius: 8px; /* 角丸 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* 軽い影 */
    overflow: hidden; /* 角丸からはみ出た画像を隠す */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 画面が狭いとき（スマホ・タブレット）の列数調整 */
@media screen and (max-width: 768px) {
    .pickup-card-item {
        width: calc(50% - 10px); /* 2列並び */
    }
}
@media screen and (max-width: 480px) {
    .pickup-card-item {
        width: 100%; /* スマホでは縦1列 */
    }
}

.pickup-card-item:hover {
    transform: translateY(-5px); /* マウスホバーで少し浮き上がる */
    box-shadow: 0 5px 12px rgba(0,0,0,0.15);
}

.pickup-card-item a {
    text-decoration: none;
    color: #333;
    display: block;
    height: 100%;
}

.pickup-card-img {
    width: 100%;
    height: 160px; /* 画像エリアの高さ */
    background: #f4f4f4;
}

.pickup-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像をはみ出させずに綺麗に埋める */
}

.pickup-card-img .no-img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
    font-size: 14px;
}

.pickup-card-title {
    font-size: 15px;
    padding: 15px;
    margin: 0;
    line-height: 1.4;
}


/* -----------------------------------------
   サイドバーウィジェットの装飾
----------------------------------------- */
/* 各ウィジェット（カテゴリーや最新記事）ごとの枠線や余白 */
.widget-item {
    margin-bottom: 30px;
    background-color: #fff;
    padding: 15px;
    border: 1px solid #eee;
    background: rgba(255,255,255,0.5); /* コンテンツ部分を白背景に(少し透過) */
}

.widget-title {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #333; /* 見出しの下線 */
}

/* ウィジェット内のリスト（カテゴリー一覧など）の点や余白をリセット */
.widget-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget-item li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
}

.widget-item li:last-child {
    border-bottom: none; /* 最後の線の削除 */
}

.widget-item li a {
    color: #333;
    text-decoration: none;
}
.widget-item li a:hover {
    text-decoration: underline;
}

/* ウィジェット内のリスト（カテゴリー一覧など）の点や余白をリセット */
.widget-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget-item li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
}

.widget-item li:last-child {
    border-bottom: none; /* 最後の線の削除 */
}

.widget-item li a {
    color: #333;
    text-decoration: none;
}

.widget-item li a:hover {
    text-decoration: underline;
}

/* ★追加：子カテゴリー（入れ子になったul）を右にズラす設定 */
.widget-item ul ul {
    padding-left: 15px; /* 右側に下げる幅（お好みで 10px〜20px 程度に調整してください） */
    margin-top: 5px;    /* 親カテゴリーとの縦間隔を少し開ける */
}

/* ★追加：子カテゴリーの各項目の枠線やパディングの微調整 */
.widget-item ul ul li {
    padding: 4px 0;     /* 子要素は少し縦の余白を詰めてすっきりさせる */
    border-bottom: none; /* 子要素の下線が不要な場合は削除（お好みで） */
}


/* -----------------------------------------
   2カラムレイアウト（サイドバー左・最小幅指定）
----------------------------------------- */
.site-content {
    display: flex;       
    flex-direction: row-reverse; /* 右から並べることで、サイドバー（HTML下部）を左に配置 */
    justify-content: space-between; 
    padding: 10px 10px 40px 10px; /* ★上:10px、右:10px、下:40px、左:10px */
    box-sizing: border-box;      /* ★追加：パディングが外にはみ出さないようにする */
}

.main-articles {
    width: 70%;                  /* メインエリアの基本幅を70%に */
    background: rgba(255,255,255,0.5); /* コンテンツ部分を白背景に(少し透過) */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 10px;               /* ★修正：少し余白を広げて見やすく */
    box-sizing: border-box;      /* ★追加：幅100%の計算にパディングを含める（はみ出し防止） */
    flex-grow: 1;
}

.site-sidebar {
    width: 25%;          /* サイドバーの基本幅を25%に */
    min-width: 240px;    /* ウィンドウ幅が小さくなっても、これ以上小さくならない最小幅（固定） */
    margin-right: 2%;    /* メインエリアとの間の余白 */
    background-color: #fafafa;
    border:1px solid #b06262;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 10px;
    box-sizing: border-box; /* パディングを含めたサイズ計算にするお守り */
}


/* PC表示時（デフォルト）はハンバーガーメニュー関連を非表示 */
.hamburger-btn,
.slide-menu,
.menu-overlay {
  display: none;
}


/* -----------------------------------------
   スマホ・タブレット対応（画面幅が 768px 以下になったら）
----------------------------------------- */
@media (max-width: 768px) {

/* スマホ画面の横揺れ防止 */
html,
body {
    font-size: 14px;
}

body {
    overflow-x: hidden; /* 縦スクロールの挙動に影響を与えないよう body だけに適用 */
}

/* スマホ時（768px以下）は縦並びにする場合 */	
.header-widget-ad-wrapper {
    flex-direction: column;
    align-items: stretch; /* 子要素を幅いっぱいに伸ばす */
    width: 100%;
    box-sizing: border-box;
}
	
/* ウィジェット領域：幅100% ＋ 左右マージン 10px */
.header-left-widget {
    width: calc(100% - 20px); /* ★左右マージン(10px+10px)分を引いてはみ出しを防止 */
    margin: 0 10px;           /* ★左右に10pxの余白（上下は0） */
    box-sizing: border-box;
    text-align: left;
}
	
/* 広告領域：幅100% ＋ 左右マージン 10px */
.site-ad-top {
    width: calc(100% - 20px); /* ★左右マージン(10px+10px)分を引いてはみ出しを防止 */
    margin: 10px 10px 0;      /* ★上10px、左右10pxの余白 */
    box-sizing: border-box;
    text-align: center;       /* 広告自体は中央揃え */
}

/* ウィジェット・ヘッダー広告直下エリアのレイアウト調整 */
.header-bottom-widget-area {
    width: calc(100% - 20px); /* ★左右マージン(10px+10px)分を引いてはみ出しを防止 */
    margin: 0 10px;           /* ★左右に10pxの余白（上下は0） */
    box-sizing: border-box;
    text-align: left;
}	
	
    .site-content {
        flex-direction: column; /* 縦並びに変更する */
        padding: 10px;          /* ★修正：スマホ時の全体の左右余白を均等にする */
    }
    
    .main-articles,
    .site-sidebar {
        width: 100%;       /* ★修正：どちらも確実に100%幅にする */
        min-width: 0;      /* 最小幅の固定を解除 */
        margin-right: 0;   /* ★修正：右側の余白を0にして、幅を左右均等に整える */
        margin-left: 0;    /* ★追加：左側の余白も0にする */
    }
    
    .site-sidebar {
        margin-top: 20px;  /* ★修正：縦並びになった時の上の余白を少し調整 */
    }
	
/* ==========================================
   【調整版】ハンバーガーボタン
========================================== */
.hamburger-btn {
　display: flex; /* ★PC表示時の display: none を上書き */
  position: fixed;
  top: 15px;      /* 少し上に詰めました */
  right: 15px;    /* 少し右に詰めました */
  z-index: 9999;
  width: 38px;    /* 44px から 38px に小さくしました */
  height: 38px;   /* 44px から 38px に小さくしました */
  background: rgba(51, 51, 51, 0.8); /* 半透明にして圧迫感を減らしました */
  border: none;
  border-radius: 4px; /* 少し角を丸くして馴染ませます */
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.hamburger-line {
  display: block;
  width: 20px;    /* 線も少し短くしました */
  height: 2px;
  background-color: #fff;
  transition: transform 0.3s, opacity 0.3s;
}

/* 三本線の変形位置もボタンサイズに合わせて微調整 */
.hamburger-btn.is-active .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger-btn.is-active .hamburger-line:nth-child(2) {
  opacity: 0;
}
.hamburger-btn.is-active .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================
   【調整版】スライドメニュー
========================================== */
.slide-menu {
	display: block; /* ★追加：PC表示時の display: none を解除して表示可能にする */
  position: fixed;
  top: 0;
  right: -100%; /* -300px から -100% に変更：絶対に画面内に入り込まなくなります */
  width: 280px;  /* 横幅を少しスリムに（280px）しました */
  height: 100vh;
  background-color: #fff;
  z-index: 9998;
  box-shadow: -2px 0 8px rgba(0,0,0,0.1);
  transition: right 0.3s ease;
  padding: 70px 20px 20px;
  box-sizing: border-box; /* 枠線や余白が幅からはみ出ないように固定 */
}

/* メニューが開いた状態 */
.slide-menu.is-open {
  right: 0;
}
	
/* ==========================================
   スライドメニュー内の文字サイズとレイアウト調整
========================================== */
.slide-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.slide-menu ul li {
  margin: 0;
  padding: 0;
}

.slide-menu ul li a {
  display: block;
  padding: 16px 10px;       /* 上下左右にしっかり余白をとって押しやすく */
  color: #333 !important;   /* 文字色をはっきりした黒（濃いグレー）に固定 */
  font-size: 16px !important;/* スマホで見やすい標準的なサイズ（16px）に強制指定 */
  font-weight: bold;        /* 文字を太字にして認識しやすく */
  text-decoration: none;
  border-bottom: 1px solid #eee; /* 項目ごとの区切り線 */
  text-align: left;         /* 左寄せに固定 */
}
	
	
}
 /* スマホ画面用、終了 */

/* -----------------------------------------
   ウィジェット全体の上下余白を小さくする
----------------------------------------- */
.widget-item {
    margin-bottom: 15px; /* ★ウィジェット同士の間隔を 30px -> 15px に縮小 */
    padding: 15px;       /* 内側の余白（気になる場合は 10px などに小さくしてください） */
}

/* WordPressのブロックウィジェットが自動でつける大きな隙間を消す */
.widget-item .wp-block-search,
.widget-item .wp-block-group,
.widget-item .wp-block-categories,
.widget-item .wp-block-latest-posts {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* -----------------------------------------
   ウィジェット内のあらゆる上下余白を強制シャットアウト
----------------------------------------- */
/* ウィジェットの外枠の余白をさらに小さく */
.widget-item {
    margin-bottom: 10px !important; /* ウィジェット同士の間隔をさらに狭く */
    padding: 10px !important;       /* 内側の余白もギュッと凝縮 */
}

/* WordPressが自動で追加する外枠（ブロック）の余白を完全にゼロにする */
.widget-item *,
.widget-item .wp-block-search,
.widget-item .wp-block-group,
.widget-item .wp-block-categories,
.widget-item .wp-block-latest-posts,
.widget-item .wp-block-latest-comments {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* タイトル（見出し）部分の余白だけ最低限確保する */
.widget-title {
    font-size: 15px !important;
    margin-bottom: 10px !important; /* タイトルと中身の間の隙間 */
    padding-bottom: 5px !important;
    border-bottom: 2px solid #333;
}



/* -----------------------------------------
   リスト系ウィジェット（カテゴリー一覧など）の隙間も凝縮
----------------------------------------- */
.widget-item li {
    padding: 4px 0 !important; /* リストの上下隙間も半分に */
    font-size: 14px;
}


/* 記事タイトルの背景色（個別ページ＋一覧ページ対応） */
.single .entry-title,
.single article > header h2,
.single article > h2:first-of-type,
.home article > h2,
.archive article > h2,
.blog article > h2,
article > h2,
article .entry-title {
	    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; /* お好みのフォントに変更してください */
	background: linear-gradient(180deg, #E8D9E7, #F7D6D7, #F7D6D7, #ffffff) !important;
    padding: 15px 20px !important;
    border-radius: 6px !important;
    color: #333 !important;
    margin-bottom: 20px !important;
}

/* =========================================
   アーカイブページのタイトル（カテゴリー名など）のサイズ調整
========================================= */
.archive-title {
    font-size: 20px; /* 数値を小さくすればさらに小さくなります（例：20px, 1.2em など） */
    font-weight: bold;
    margin-bottom: 10px; /* タイトル下の余白 */
}

/* =========================================
   1. 記事一覧ページ（基本スタイル）
========================================= */
.main-articles .post-item .post-thumbnail {
    float: left !important;
    width: 180px !important;
    margin-right: 20px !important;
    margin-bottom: 15px !important;
    margin-left: 0 !important;
}

.main-articles .post-item .post-thumbnail img {
    width: 100% !important;
    height: auto !important;
    border-radius: 4px;
}

.main-articles .post-item .post-body {
    overflow: hidden;
}


/* =========================================
   2. 詳細ページ（投稿詳細・固定ページ）の設定
========================================= */
@media (min-width: 768px) {
    .single .main-articles .post-item .post-thumbnail,
    .page .main-articles .post-item .post-thumbnail {
        float: right !important;
        width: 40% !important;
        margin-left: 20px !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
    }

    .single .main-articles .post-item .post-thumbnail img,
    .page .main-articles .post-item .post-thumbnail img {
        width: 100% !important;
        height: auto !important;
    }

    .single .main-articles .post-item .post-body,
    .page .main-articles .post-item .post-body {
        overflow: visible;
    }
}


/* =========================================
   3. レイアウト崩れ防止（全ページ共通）
========================================= */
.post-item::after {
    content: "";
    display: block;
    clear: both;
}


/* -----------------------------------------
   検索フォーム（検索バー）の上下の広がりを抑える
----------------------------------------- */
/* 検索バー全体のレイアウト */
.widget-item .wp-block-search__inside-wrapper {
    display: flex;
    gap: 5px;            /* 入力欄とボタンの間のすき間 */
    margin: 5px 0;       /* 検索バー自体の上下の余白を小さく */
}

/* 検索の入力欄（テキストボックス） */
.widget-item .wp-block-search__input {
    padding: 6px 10px !important; /* ★上下のパディングを極限まで薄く */
    height: 36px !important;      /* ★高さを36pxに固定してすっきりと */
    box-sizing: border-box;
    border: 1px solid #ccc;
    font-size: 14px;
}

/* 検索ボタン */
.widget-item .wp-block-search__button {
    padding: 6px 15px !important; /* ★ボタンの上下のパディングも薄く */
    height: 36px !important;      /* ★入力欄と高さを揃える */
    box-sizing: border-box;
    background-color: #333;       /* ボタンの色をメニューに合わせる */
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1 !important;    /* 文字が上下に広がらないように */
}

.widget-item .wp-block-search__button:hover {
    background-color: #555;
}

/* -----------------------------------------
   検索フォームの強制スリム化
----------------------------------------- */
/* 検索ボックスのラベル（「検索」という文字）の隙間を消す */
.widget-item .wp-block-search__label {
    margin-bottom: 5px !important;
    display: block;
    font-size: 14px;
}

/* 検索ボックス全体の囲み */
.widget-item .wp-block-search__inside-wrapper {
    display: flex !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 32px !important; /* ★全体の高さをさらに低く（32px）に固定 */
}

/* 入力欄 */
.widget-item .wp-block-search__input {
    height: 32px !important;
    padding: 0 8px !important; /* 上下の余白をゼロにして左右だけ少し空ける */
    line-height: 32px !important;
    border: 1px solid #ccc !important;
    font-size: 13px !important;
}

/* ボタン */
.widget-item .wp-block-search__button {
    height: 32px !important;
    padding: 0 12px !important;
    line-height: 32px !important; /* 縦方向の真ん中に文字が来るように指定 */
    font-size: 13px !important;
}





/* ==========================================
   自動目次（Table of Contents）のスタイル
========================================== */
.custom-toc {
    background-color: #FFF7F7; /* すごく薄いピンク */
    border: 1px solid #ffd1dc; /* 枠線の薄ピンク */
    border-radius: 6px;
    padding: 20px;
    margin: 30px 0;
}

.custom-toc .toc-title {
    font-weight: bold;
    font-size: 1.1rem;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #333;
    text-align: center;
}

.custom-toc .toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.custom-toc .toc-list li {
    margin-bottom: 8px;
    line-height: 1.5;
}

.custom-toc .toc-list li a {
    color: #333;
    text-decoration: none;
    font-size: 16px; /* ★好みのサイズに調整（例: 1.05rem や 16px など） */
}

.custom-toc .toc-list li a:hover {
    text-decoration: underline;
    color: #0066cc;
}

/* h3（小見出し）のインデントと行間設定 */
.custom-toc .toc-list li.toc-item-h3 {
    padding-left: 20px;
    font-size: 15px;
    line-height: 1.3;    /* ★追加：行の高さ（標準の1.5から少し低く） */
    margin-bottom: 4px;  /* ★追加：下の隙間を少し詰める（標準は8px） */
}

/* ページ内スクロールを滑らかにする設定 */
html {
    scroll-behavior: smooth;
}

/* -----------------------------------------
   ブログ詳細ページ（single.php）の前後の記事リンク
----------------------------------------- */
.post-navigation {
    display: flex;
    justify-content: space-between; 
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #eee;   
    font-size: 14px;
}

/* 前の記事（左側）の幅制限と調整 */
.nav-previous {
    width: 48%;
    text-align: left;
}

/* 次の記事（右側）の幅制限と調整 */
.nav-next {
    width: 48%;
    text-align: right;
}

/* リンク全体の共通装飾 */
.post-navigation a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
}

.post-navigation a:hover {
    color: #0073aa; /* 少し青っぽく */
    text-decoration: underline;
}


/* -----------------------------------------
   記事のフッター（日付の右寄せ）
----------------------------------------- */
.post-footer {
    text-align: right;     /* ★文字を右寄せにする */
    margin-top: 20px;      /* 本文との間の余白 */
	padding: 3px;
	background: linear-gradient(180deg, #ffffff, #ffffff, #F7D6D7, #F7D6D7) !important;
}

.post-date {
    font-size: 14px;
    color: #888;           /* 日付を少し薄いグレーにして目立たせない */
}

/* 日付エリアの回り込みを解除し、必ず画像より下に配置する */
.post-footer {
    clear: both;
    padding-top: 15px; /* 画像や文章との間に適度な余白を入れる設定（お好みで調整可） */
}

/* -----------------------------------------
   ホーム画面などでの記事（カード風）の区切り装飾
----------------------------------------- */
.main-articles .post-item {
    background-color: #fff;  /* 記事の背景を白に */
    border: 1px solid #ddd;  /* ★記事全体を薄い線で囲む */
    padding: 10px;           /* 記事の内側にしっかり余白をとる */
    margin-bottom: 20px;     /* ★記事と記事の間にしっかりと隙間をあける */
    box-sizing: border-box;
    border-radius: 4px;      /* 角をほんの少し丸くして綺麗に */
}

/* 一覧画面のタイトルリンクの色 */
.main-articles .post-item h2 a {
    color: #333;
    text-decoration: none;
	border-style: none;
}
.main-articles .post-item h2 a:hover {
    color: #0073aa;          /* ホバー時に青くする */
    text-decoration: underline;
}


/* -----------------------------------------
   「詳細ページへ」リンクボタンの装飾
----------------------------------------- */
.read-more-wrapper {
    text-align: right;     /* ボタンを右寄せにする */
    margin-top: 15px;
}

.btn-read-more {
    display: inline-block;
    padding: 8px 20px;
    background-color: #333; /* ボタンの背景色（黒系） */
    color: #fff !important; /* 文字を白に */
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;    /* ボタンの角を少し丸く */
    transition: background-color 0.3s;
}

.btn-read-more:hover {
    background-color: #555; /* マウスを乗せたときに少し明るく */
    text-decoration: none !important;
}

/* -----------------------------------------
   詳細ページのコメント・トラックバックエリアの装飾
----------------------------------------- */
.post-comments-area {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 2px solid #333; /* 記事本体との太い区切り線 */
}

/* WordPress標準のコメントフォームや一覧の余白調整 */
.post-comments-area h2, 
.post-comments-area h3 {
    font-size: 18px;
    margin-bottom: 20px;
}

.comment-respond {
    margin-top: 30px;
}

/* -----------------------------------------
   コメントフォームのスマホはみ出し対策
----------------------------------------- */
/* フォーム内のすべての入力欄とテキストエリアの幅を親要素に合わせる */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100% !important;    /* ★横幅を画面（親要素）に対して100%にする */
    max-width: 100% !important;/* 最大でも100%を超えないように強制 */
    box-sizing: border-box;    /* 内側の余白や線を幅に含めるお守り */
    padding: 10px;             /* 入力しやすいように内側に少し余白を */
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* 本文を入力するテキストエリアの高さ調整（広すぎないように） */
.comment-form textarea {
    height: 120px;
}

/* 「コメントを送信」ボタンがはみ出さないように調整 */
.comment-form .submit {
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.comment-form .submit:hover {
    background-color: #555;
}

/* スマホ表示（768px以下）の時のコメントエリア全体の微調整 */
@media (max-width: 768px) {
    .post-comments-area {
        padding-left: 5px;
        padding-right: 5px;
        overflow: hidden; /* 万が一の時も外にはみ出させない */
    }
}

/* ==========================================
   フロントページ特定カテゴリ記事一覧表示エリアのスタイル
========================================== */
.front-news-area {
    margin-top: 20px;
    padding: 5px 20px;
    background-color: #FFFEE9;
    border-radius: 6px;
}

.front-news-area h2 {
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 1.1rem;
    margin-bottom: 5px;
    border-bottom: 2px solid #ddd;
    padding-bottom: 3px;
}

.front-news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.front-news-list li {
    padding: 5px 0;
    border-bottom: 1px dashed #eee;
    display: flex;
    gap: 15px;
}

.front-news-list .news-date {
    color: #888;
    font-size: 0.9rem;
    white-space: nowrap;
}

.front-news-list a {
    color: #333;
    text-decoration: none;
}

.front-news-list a:hover {
    text-decoration: none;
}

/* ==========================================
   ページトップへ戻るボタンのスタイル
========================================== */
.page-top-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9996; /* ハンバーガーメニュー(9997〜)より少し後ろに配置 */
  width: 48px;
  height: 48px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 50%; /* 丸いボタンにします */
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  
  /* 最初は非表示（透明 ＆ クリック不可）にしておく */
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px); /* 少し下に下げておく */
  transition: opacity 0.3s, transform 0.3s;
}

/* スクロールしてクラスがついた時の状態（ふわっと出現） */
.page-top-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0); /* 元の位置に戻る */
}

/* ボタンにマウスを乗せたときの効果（PC用） */
@media (min-width: 769px) {
  .page-top-btn:hover {
    background-color: #555;
  }
}