@charset "utf-8";

/* ===================================================
   調整
   =================================================== */

/* 2. 訪問済みの色を「未訪問」と同じにする */
a, a:visited {
    color: inherit; /* 親要素の色を引き継ぐ */
}
/* サイト全体のリンクから下線を消す */
a, a:link, a:visited {
    text-decoration: none !important;
}

/* 上下の余白をまとめてゼロにする */
html, body, #wrapper, #container, header, footer {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
}

/* ===================================================
   記事本文（.storycontent）内のリンク装飾
   =================================================== */

/* 1. 未訪問・訪問済み 共通の色設定 */
.storycontent a, 
.storycontent a:visited {
    color: #0066cc !important;
    text-decoration: underline !important;
    font-weight: bold;
}

/* 2. マウスを乗せた時（ホバー） */
.storycontent a:hover {
    color: #ff8c00 !important;
    text-decoration: none !important;
    background-color: rgba(255, 165, 0, 0.1);
}

/* ===================================================
  記事本文の文字サイズ
   =================================================== */

/* ===================================================
   PC版：記事本文（storycontent）の文字サイズ
   =================================================== */
.storycontent p {

    font-size: 15px !important; 
    line-height: 1.8 !important;
    letter-spacing: 0.05em !important;
    padding: 0 15px !important;
    margin-bottom: 1.5em !important;
    text-align: justify !important;
    /* スマホで勝手にサイズが変わるのを防ぐ設定 */
    -webkit-text-size-adjust: 100% !important;
}

/* ===================================================
   記事本文スマホ版の文字サイズ
   =================================================== */
@media screen and (max-width: 768px) {
    .storycontent p {
        font-size: 15px !important;
    }
}
/* ===================================================
   記事の見出し
   =================================================== */
/* WordPress記事タイトル */
#all_contents h2.single-entry-title {
    display: block !important;
    width: auto !important;
    box-sizing: border-box !important;
    clear: both !important;
    position: relative !important;
    
    /* 上下の外側の余白を少し広げ、左右をbox-shadow分あける */
    margin: 15px 5px 25px 5px !important; 

    /* フォント設定 */
    font-family: WebLTGothicFont, sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: bold !important;
    color: #fff !important;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.1) !important;

    /* 背景とステッチのベース */
    background-color: #ffa500 !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    
    /* フレーム効果 */
    box-shadow: 0 0 0 4px #ffa500 !important;
    
    /* 上下の白い点線ステッチ */
    border-top: 1px dashed rgba(255, 255, 255, 0.8) !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.8) !important;
    padding: 0.4em 1em !important;
    height: auto !important;
    line-height: 1.3 !important;
}

/* スマホ上下調整 */
@media screen and (max-width: 768px) {
    #all_contents h2.single-entry-title {
        padding-top: 0.3em !important;
        padding-bottom: 0.5em !important;
        line-height: 1.1 !important;
        min-height: 0 !important;
        height: auto !important;
    }
}

/* ===================================================
   空行（ ）の調整
   =================================================== */

/* 1. 改行タグ自体の高さを縮める */
.storycontent br {
    display: block !important;
    content: "" !important;
    margin-top: 5px !important;
}

/* 2. 空白文字（ ）が入っている行の高さを低くする */
.storycontent p {
    margin-bottom: 0.3em !important;
}

/* 3. 中身が「空白だけ」の段落はもっと詰める */
.storycontent p:empty {
    margin: 0 !important;
    line-height: 1 !important;
}


/* ブログ下のカテゴリー・日付（meta）のサイズ調整 */
.meta {
    font-size: 15px !important; 
    color: #666 !important;     
    margin-top: 20px !important;   /* 上（本文）との間隔 */
    padding-bottom: 15px !important; /* 線と文字の間の隙間 */
    margin-bottom: 40px !important; /* 線と次の記事の間の隙間 */
    text-align: right;           
    
    /* ここでサイドバーとお揃いの点線を追加！ */
    border-bottom: 1px dashed #999 !important; 
}

/* リンク（カテゴリー名）の設定 */
.meta a {
    color: #8BBB33 !important;   
    text-decoration: none !important;
    font-weight: bold;           
}

/* ===================================================
   2. スマホ用レイアウト（768pxまで）
   =================================================== */
@media screen and (max-width: 768px) {
	
    .sp-none { display: none; }
    h1 { padding: 5px 15px; font-size: 0.3em; }
    #wrapper { margin: 15px 0; font-size: 0.6em; }
    #side-nav { display: none; }

/* ===================================================*/
    /* レイアウト */
    #main_wrapper { width: 100%; margin: 0 auto 30px; }
    #main { width: 71%; padding: 0 2%; float: right; }
    #sidebar { width: 25%; float: left; }
    #sidebarInner { padding: 5%; margin: 0 0 10% 0; background: url(img/s_bg_01.gif) bottom left no-repeat #efe7d2; }

    /* 記事装飾 */
    .single-entry-title { color: #FFF; font-size: 1.8em; font-weight: bold; padding: 5px 2px 3px 5px; margin-bottom: 5px; border-radius: 5px; background: #8BBB33; }
    .storycontent p { font-size: 1.3em; }
    .meta { padding: 0 0 10px 0; }
    
    /* ★画像設定（スマホ） */
    .post img {
        display: block;
        width: auto !important;
        max-width: 85% !important;
        max-height: 400px;
        margin: 0 auto 20px;
        height: auto;
    }
    
    .wp-pagenavi { padding: 15px 0 0 0; }
    #breadcrumb { padding: 4px 8px 0 8px; margin: 0 0 10px 0; background: #EEE; }
    #breadcrumb li { float: left; }
	
}/*△△△スマホ用△△△ */


/* ===================================================
   3. PC用レイアウト（769px以上）
   =================================================== */
@media screen and (min-width: 769px) {
    body { font-size: 12px; }

    /* レイアウト */
    #main_wrapper { width: 100% !important; max-width: 1248px !important; margin: 0 auto; display: block; }
    #main { width: 1000px !important; float: right !important; padding: 0 10px !important; }
    #sidebar, #all_sidebar { width: 220px !important; float: left !important; padding: 0 !important; }

    .wp-pagenavi { clear: both !important; display: block !important; padding: 30px 0 !important; text-align: center !important; }

    /* 記事装飾 */
    .single-entry-title { color: #FFF; font-size: 18px; font-weight: bold; padding: 5px 10px 2px 7px; margin-bottom: 5px; border-radius: 5px; background: #8BBB33; }
    .storycontent p { padding: 0 0 0 7px; }
    .meta { padding: 0 0 15px 0; }

    /* ★画像設定（PC）: 大きいものだけ40%に制限 */
    .post img {
        display: block;
        width: auto !important;
        max-width: 40% !important;
        height: auto;
        margin: 0 0 30px 0; /* 左寄せ */
    }

    #breadcrumb { padding: 4px 8px 0 8px; margin: 0 0 20px 0; background: #EEE; }
    #breadcrumb li { float: left; }




/* ブログ下のカテゴリー・日付（meta）のサイズ調整 */
.meta {
    font-size: 14px !important; /* ゴマ粒（10px等）から14pxにアップ！ */
    color: #666 !important;     /* 文字色を少し濃いめにしてハッキリと */
    margin-top: 15px !important; /* 本文との間に少しゆとりを */
    text-align: right;           /* 右寄せにするとスッキリします（お好みで） */
}

/* リンク（カテゴリー名）の色と装飾 */
.meta a {
    color: #8BBB33 !important;   /* ロゴ等の緑に合わせると統一感が出ます */
    text-decoration: none !important;
    font-weight: bold;           /* 少し太くして存在感を出す */
}

.meta a:hover {
    text-decoration: underline !important; /* ホバーで下線 */
}

/* ===================================================
   PC左メニュー（検索・汎用）
   =================================================== */
input[name="s"] { max-width: 100%; font-size: 16px; }
input[type="image"] { background-color: transparent; border: none; cursor: pointer; appearance: none; }
input[name="search_btn"]:hover { opacity: 0.7; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }


/* 検索フォーム（幅220px ＆ ボタン中央寄せ）
========================================================= */
.blogsearch {
    width: 220px;
    margin: 0 auto 25px;
    text-align: center;
}

/* 入力エリア：220pxいっぱいに広げる */
.blogsearch .fL {
    width: 100% !important;
    float: none !important;
    margin-bottom: 12px;
}

.blogsearch input[type="text"] {
    width: 100% !important;
    height: 32px;
    padding: 0 10px;
    box-sizing: border-box; /* 枠線を含めて220pxにする */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 15px;
}
/* 検索ボタン：122pxを真ん中に置く設定 */
.blogsearch .fR {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 10px;
    display: block !important;
}

#search_btn {
    display: inline-block !important;
    width: 122px;
    height: 27px;
    vertical-align: top;
}

#search_btn:hover {
    opacity: 0.8;
}

/* 万が一の回り込みを強制解除 */
.blogsearch::after {
    content: "";
    display: block;
    clear: both;
}

div.post { margin-bottom: 40px; }

/* サイドバー共通設定（背景・余白） */
#sidebarCatagory { padding: 0 7px 8px 0; margin: 0 0 18px 0; background: #fff; }
#sidebarPost, #sidebarArchive { padding: 0 7px 8px 8px; margin: 0 0 18px 0; background: #fff; display: block; }

/* カテゴリーの文字サイズ */
#sidebarCatagory li { 
    padding: 10px 0 0 10px; 
    font-size: 15px !important; 
}

/* 最新記事・アーカイブの文字サイズ*/
#sidebarPost li, 
#sidebarArchive li { 
    padding: 8px 0; 
    border-bottom: dotted 1px #999; 
    font-size: 14px !important; 
}

/* 見出しの装飾（緑の背景・角丸） */
.blog_index01, .blog_index02 { 
    color: #FFF; 
    background-color: #8BBB33; 
    padding: 5px 0 2px 8px; 
    border-radius: 5px 5px 0 0; 
}

/* ===================================================
   アーカイブ（月別・年別）のデザイン統一
   =================================================== */

/* 月別・年別の枠組みをリセット */
#sidebarArchive, 
#sidebarArchiveYearly {
    list-style: none !important;
    padding: 0 7px 8px 8px !important;
    margin: 0 0 18px 0 !important;
    background: #fff !important;
    display: block !important;
}

/* 各行に点線を入れる ＋ 文字サイズを14pxに統一 */
#sidebarArchive li, 
#sidebarArchiveYearly li {
    padding: 8px 0 !important;
    border-bottom: 1px dashed #999 !important; /* 点線 */
    font-size: 14px !important;
    list-style: none !important;
}

/* 一番下の行だけ点線を消す */
#sidebarArchive li:last-child, 
#sidebarArchiveYearly li:last-child {
    border-bottom: none !important;
}

/* リンクの色とホバー設定 */
#sidebarArchive li a, 
#sidebarArchiveYearly li a {
    text-decoration: none !important;
    color: #444 !important;
    display: block !important;
}

#sidebarArchive li a:hover, 
#sidebarArchiveYearly li a:hover {
    color: #ffa500 !important;
}

/* 「年」が下に落ちるのを防ぐ */
#sidebarArchiveYearly li {
    display: block !important;
    white-space: nowrap !important;
}

#sidebarArchiveYearly li a {
    display: inline !important;
}

}/*▲▲▲PC用▲▲▲▲ */


/* ===================================================
  ページ送り
   =================================================== */

/* ページナビ全体：中身の浮き沈みを禁止する */
.wp-pagenavi {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 20px 0 !important;
    float: none !important;
}

/* 各ボタン：高さを34pxに完全固定 */
.wp-pagenavi a, 
.wp-pagenavi span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 34px !important;
    line-height: 34px !important;
    min-width: 34px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid #ccc !important;
    background: #fff !important;
    border-radius: 4px !important;
    vertical-align: middle !important;
}

/* 現在地（黒いボタン）の調整 */
.wp-pagenavi span.current {
    background-color: #333 !important;
    color: #fff !important;
    border-color: #333 !important;
}

/* 「1 / 69」などのページ情報テキスト */
.wp-pagenavi span.pages {
    border: none !important;
    background: transparent !important;
}

/* スマホ用の微調整：文字がはみ出さないように */
@media screen and (max-width: 480px) {
    .wp-pagenavi {
        gap: 4px;
    }
    .wp-pagenavi a, .wp-pagenavi span {
        height: 30px;
        min-width: 30px;
        font-size: 12px;
    }
}



/* ===================================================
   PC版フッター：オレンジ＆ベージュ・スッキリ版
   =================================================== */
@media screen and (min-width: 769px) {
/* フッター全体の設定 */
footer { clear: both; font-size: 14px; }

/* 1段目 */
footer .footer_nav_area01 { 
    background-color: #FF8529 !important; 
}

/* 2段目 */
footer .footer_nav_area02 { 
    background-color: #FADAB9 !important; 
}

/* 共通の高さ・中央寄せ設定 */
footer .footer_nav_area01, footer .footer_nav_area02 { width: 100%; height: 40px; }
footer .footer_nav_area01 ul, footer .footer_nav_area02 p { width: 960px; margin: 0 auto; text-align: center; }

/* 1段目のメニュー */
footer .footer_nav_area01 ul li a { 
    color: #ffffff !important;
}
footer .footer_nav_area01 ul li { 
    color: #ffffff !important;
    display: inline-block; 
    padding: 0 8px 0 14px; 
    margin: 10px 0; 
}

/* 区切り線 */
footer .footer_nav_area01 ul li + li { 
    border-left: 1px solid rgba(255, 255, 255, 0.6) !important; 
}

footer .footer_nav_area02 p {
    color: #663300 !important;
    text-align: center;
    margin: 0 auto !important;
    padding: 0 !important;
    height: 40px !important;
    line-height: 40px !important; 
    
    display: block !important;
}
/* PCでは改行しない */
.sp-only {
    display: none;
}
}/* PC版フッター */
/* ===================================================
   スマホ版フッター：オレンジ＆ベージュ・スッキリ版
   =================================================== */
@media screen and (max-width: 768px) {
    footer { width: 100%; }

    /* 1段目*/
    footer .footer_nav_area01 { 
        background-color: #FF8529 !important; 
    }

    /* 1段目のメニュー文字設定 */
    footer .footer_nav_area01 ul li,
    footer .footer_nav_area01 ul li a {
        color: #ffffff !important;
        text-align: center;
        font-size: 15px !important; 
        text-decoration: none !important;
        display: block;
    }

    /* 1段目の枠線（白い点線） */
    footer .footer_nav_area01 ul li {
        padding: 12px 10px !important; 
        border-bottom: dotted 1px rgba(255, 255, 255, 0.5) !important;
    }

    /* 2段目：（コピーライト） */
    footer .footer_nav_area02 { 
        clear: both; 
        width: 100%; 
        background-color: #FADAB9 !important; 
    }

    /* 2段目の文字 */
    footer .footer_nav_area02 p {
        text-align: center;
        color: #663300 !important;
        font-size: 13px !important; 
        height: auto !important;
        line-height: 1.6 !important;
        padding: 10px 5px !important;
        margin: 0 !important;
    }

    /* 2段目のリンク色（茶色） */
    footer .footer_nav_area02 a { 
        color: #663300 !important; 
        text-decoration: underline; 
    }

    /* スマホ時のみ改行タグを有効化 */
    .sp-only {
        display: block !important;
        content: "" !important;
        margin-top: 5px !important;
    }
}/* スマホ版フッター */