/* ====================================
   全体設定
   ==================================== */
body {
    font-family: 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
    line-height: 1.7; /* 行の高さ */
    color: #333; /* 基本の文字色を少し濃いグレーに */
    background-color: #f9fbfd; /* 全体の背景色をわずかに青みがかった白に */
}

a {
    color: #3498db; /* リンク色を明るい青に */
    text-decoration: none; /* 下線を非表示に */
}

a:hover {
    color: #2980b9; /* ホバー時のリンク色を少し濃い青に */
    text-decoration: underline; /* ホバー時に下線を表示 */
}

/* ====================================
   ヘッダー
   ==================================== */
.header-image-wrapper {
    margin-bottom: 20px; /* ヘッダー画像下の余白 */
}

.title a {
    color: #2c3e50; /* ブログタイトル色を濃い青グレーに */
    text-decoration: none;
}

.title a:hover {
    color: #3498db;
}

.blog-description {
    color: #666; /* ブログ説明文の色 */
}

/* グローバルナビゲーション（もしあれば） */
.global-navigation a {
    color: #3498db;
    border-bottom: 1px solid transparent;
}
.global-navigation a:hover {
    border-bottom: 1px solid #3498db;
}


/* ====================================
   記事一覧・サイドバーなど主要コンテンツ
   ==================================== */
.main-inner, .sidebar-inner {
    background-color: #fff; /* 記事エリアとサイドバーの背景色を白に */
    border-radius: 5px; /* 角を少し丸める */
    box-shadow: 0 2px 5px rgba(0,0,0,0.08); /* 軽い影をつける */
    padding: 20px; /* 内側の余白 */
    margin-bottom: 25px; /* 各モジュール間の余白 */
}

/* 記事一覧タイトル */
.archive-entry-header .entry-title a {
    color: #2c3e50; /* 記事一覧のタイトル色 */
}
.archive-entry-header .entry-title a:hover {
    color: #3498db;
}

/* 記事一覧の日付 */
.date {
    color: #95a5a6; /* 日付の色をグレーに */
    font-size: 0.9em;
}

/* ====================================
   記事本体
   ==================================== */
.entry-content {
    font-size: 1.05em; /* 記事本文のフォントサイズを少し大きく */
    line-height: 1.8; /* 記事本文の行間を広げる */
}

/* 見出し */
.entry-content h1 { /* 記事タイトルに使うことは少ないが念のため */
    color: #2c3e50;
    border-bottom: 2px solid #3498db; /* 青い下線 */
    padding-bottom: 0.5em;
    margin-bottom: 1.5em;
    font-size: 2em;
}

.entry-content h2 {
    color: #2c3e50;
    border-left: 5px solid #3498db; /* 青い左線 */
    padding-left: 10px;
    margin: 2em 0 1em;
    font-size: 1.8em;
}

.entry-content h3 {
    color: #2c3e50;
    border-bottom: 1px dotted #3498db; /* 青い点線の下線 */
    margin: 1.8em 0 0.8em;
    padding-bottom: 0.3em;
    font-size: 1.4em;
}

.entry-content h4 {
    color: #34495e;
    margin: 1.5em 0 0.7em;
    font-size: 1.2em;
}

/* 引用 */
blockquote {
    background-color: #ecf0f1; /* 引用背景色を薄いグレーに */
    border-left: 5px solid #3498db; /* 左のボーダーを青に */
    padding: 15px 20px;
    margin: 2em 0;
    border-radius: 3px;
    color: #555;
}

/* リスト */
ul, ol {
    margin-left: 2em; /* リストのインデント */
    margin-bottom: 1.5em;
}
ul li {
    list-style-type: disc; /* 黒丸 */
}
ol li {
    list-style-type: decimal; /* 数字 */
}

/* 強調 */
strong {
    color: #e74c3c; /* 強調文字を赤に（注意喚起） */
}

/* マーカー風ハイライト */
.marker {
    background: linear-gradient(transparent 60%, #a2d2ff 60%); /* 薄い水色のマーカー */
}

/* ボックス囲み */
.box {
    padding: 1.5em 2em;
    margin: 2.5em 0;
    background-color: #eaf4fa; /* ボックス背景色を薄い青に */
    border: 1px solid #a2d2ff; /* ボックス枠線を薄い青に */
    border-radius: 8px; /* 角を丸く */
    box-shadow: 0 3px 8px rgba(0,0,0,0.08); /* 少し強めの影 */
}

/* ====================================
   フッター
   ==================================== */
.footer {
    color: #7f8c8d; /* フッター文字色 */
    font-size: 0.9em;
    padding: 30px 0;
    background-color: #f0f3f5; /* フッター背景色を薄いグレーに */
    text-align: center;
}

/* ====================================
   レスポンシブデザイン（スマートフォン対応）
   ==================================== */
@media (max-width: 767px) {
    body {
        font-size: 15px; /* スマホでの基本フォントサイズ */
    }
    .main-inner, .sidebar-inner {
        padding: 15px; /* スマホでの内側余白 */
        margin-bottom: 20px;
    }
    .entry-content h2 {
        font-size: 1.5em;
    }
    .entry-content h3 {
        font-size: 1.2em;
    }
    blockquote {
        padding: 10px 15px;
    }
    .box {
        padding: 1em 1.5em;
    }
}

/* ====================================
   ブログタイトル画像とテキストの調整
   ==================================== */

/* ヘッダー画像全体を囲む要素の調整 */
/* 多くのテーマでこのクラスが使われます */
.header-image-wrapper {
    /* 背景画像の表示方法を調整 */
    background-size: cover !important;        /* 画像を要素全体に広げる（縦横比維持） */
    background-position: center center !important; /* 画像を常に中央に配置 */
    background-repeat: no-repeat !important;  /* 画像の繰り返しを停止 */
    width: 100% !important;                   /* 幅を100%に */
    /* min-height: 200px; */                  /* ★画像を大きく見せたい場合は、このコメントを外して高さを調整 ★ */
                                              /* 例: min-height: 250px; など */
                                              /* 元の画像サイズや見せたい範囲に合わせて調整してください。 */
                                              /* これを設定しないと、画像が小さすぎる場合にヘッダー部分が潰れてしまうことがあります。 */
    /* height: auto !important; */            /* 高さを自動調整（元の画像サイズに依存） */
}

/* ブログタイトル（テキスト）と説明文を中央に配置 */
/* ブログタイトルと説明文を囲む要素に対して */
#blog-title {
    text-align: center; /* タイトルと説明文を中央揃え */
    width: 100%;        /* 親要素の幅いっぱいに広げる */
    margin-left: auto;  /* 中央寄せの補助 */
    margin-right: auto; /* 中央寄せの補助 */
    /* 必要であれば、上下の余白を調整して背景画像とのバランスを取る */
    /* padding-top: 20px; */
    /* padding-bottom: 20px; */
}

/* 個別のタイトルと説明文要素にも念のため中央揃えを適用 */
#blog-title .title {
    text-align: center;
}
#blog-title .blog-description {
    text-align: center;
}

/* スマホ表示時の調整 */
@media (max-width: 767px) {
    .header-image-wrapper {
        min-height: 150px !important; /* スマホでは高さを少し抑えるなど調整 */
    }
    #blog-title {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}