@charset "UTF-8";

/* ★かわいいフォント（Zen丸ゴシック）をGoogleから読み込む */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700&display=swap');

body {
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
    color: #444;
    font-family: sans-serif;
}

/* --- ヘッダー（タイトル） --- */
.site-header {
    text-align: center;
    padding: 60px 20px; /* 余白を少し広げてゆったりと */
    background-color: #fff;
}
.site-header h1 {
    margin: 0;
    font-size: 2.5em; /* タイトルを少し大きく */
    font-family: 'Zen Maru Gothic', sans-serif; /* ★ここにかわいいフォントを適用 */
    color: #5d5d5d; /* 優しいグレー */
    letter-spacing: 0.1em;
}

/* --- カードリスト（配置） --- */
.card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
}

/* --- カード本体 --- */
.card {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-radius: 12px; /* 丸みを強くしてかわいく */
    overflow: hidden;
    transition: transform 0.2s; /* ホバー時に動く準備 */
}
.card:hover {
    transform: translateY(-5px); /* マウスが乗ると少し浮く */
}
/* リンクの線を消す */
.card a {
    text-decoration: none;
    color: inherit;
}

/* --- 画像エリア（大きくしました） --- */
.card-image {
    height: 250px; /* ★高さを200pxから250pxへ変更 */
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- 文字エリア --- */
.card-content {
    padding: 20px;
}

/* --- カテゴリーラベル（色分け設定） --- */
.category {
    display: inline-block;
    font-size: 11px;
    color: #fff;
    background-color: #a8c2a8; /* 基本の色（緑） */
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 0px;
}

/* ★色変えコーナー */
.category.money {
    background-color: #f3c677; /* お金の勉強：優しいクリーム色 */
}
.category.recipe {
    background-color: #eb9789; /* レシピ：優しいサーモンピンク */
}
.category.book {
    background-color: #7f6965ed; /* 読んだ本：茶色 */
}
.category.travel {
    background-color: #daa0f7; /* 行った場所： パープル */
}
.category.life {
    background-color: #89c3eb; /* 老後への準備：優しい空色 */
}


/* --- 記事タイトル（小さくしました） --- */
.card h2 {
    margin: 0;
    font-size: 16px; /* ★18pxから16pxへ変更 */
    line-height: 1.5;
    font-weight: normal; /* 太字をやめてスッキリ */
}

/* --- カテゴリーナビゲーション --- */
.category-nav {
    text-align: center; /* 真ん中に寄せる */
    margin-bottom: 30px; /* 下の記事との間隔 */
    padding: 0 10px;
    /* 画面が狭い時に横スクロールできるようにする設定 */
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ボタンの見た目 */
.category-nav button {
    display: inline-block;
    background-color: #eee; /* 背景は薄いグレー */
    border: none; /* 枠線を消す */
    padding: 10px 20px; /* ボタンの大きさ */
    margin: 5px; /* ボタン同士の間隔 */
    border-radius: 20px; /* 角丸にする */
    cursor: pointer; /* マウスを乗せると指マークに */
    
    /* フォント設定 */
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 14px;
    color: #555;
    transition: background 0.3s; /* 色がふわっと変わる */
}

/* マウスを乗せた時 */
.category-nav button:hover {
    background-color: #ddd;
}

/* 「今選ばれている」ボタンの色（濃くする） */
.category-nav button.active {
    background-color: #888;
    color: #fff;
}

/* --- 詳細ページのデザイン --- */

/* 記事全体を中央に寄せ、幅を制限する（読みやすくするため） */
.article-wrap {
    max-width: 800px;
    margin: 0 auto; /* 中央寄せ */
    padding: 20px;
    background-color: #fff; /* 紙のような白背景 */
    box-shadow: 0 0 10px rgba(0,0,0,0.05); /* うっすら影 */
}

/* 記事ヘッダー（タイトル周り） */
.article-header {
    text-align: center;
    margin-bottom: 30px;
}
.article-header h1 {
    font-size: 24px;
    margin: 15px 0;
    font-family: 'Zen Maru Gothic', sans-serif;
}
.date {
    color: #999;
    font-size: 14px;
}

/* ヘッダーのロゴをリンクっぽくなくす */
.home-link {
    text-decoration: none;
    color: #555;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 1.5em;
}

/* メイン画像 */
.article-main-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 40px;
}

/* 本文のデザイン */
.article-body p {
    line-height: 1.8; /* 行間を広めに */
    margin-bottom: 30px; /* 段落ごとの間隔 */
    font-size: 16px;
}
.article-body h3 {
    border-bottom: 2px solid #eee; /* 下線 */
    padding-bottom: 10px;
    margin-top: 50px;
    margin-bottom: 20px;
    color: #555;
}

/* トップに戻るボタン */
.back-btn {
    text-align: center;
    margin: 60px 0;
}
.back-btn a {
    display: inline-block;
    padding: 10px 30px;
    background-color: #555;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-size: 14px;
    transition: opacity 0.3s;
}
.back-btn a:hover {
    opacity: 0.8;
}

/* フッター */
.site-footer {
    text-align: center;
    padding: 20px;
    color: #aaa;
    font-size: 12px;
}

/* --- カテゴリーと日付の横並び設定 --- */
.card-meta {
    display: flex; /* 横並びにする魔法 */
    justify-content: space-between; /* 左右の端っこに配置 */
    align-items: center; /* 上下の中心を揃える */
    margin-bottom: 10px; /* タイトルとの隙間 */
}

/* 日付のデザイン */
.date {
    font-size: 12px;
    color: #aaa; /* 薄いグレーで主張しすぎないように */
    font-family: 'Zen Maru Gothic', sans-serif; /* 数字も丸文字でかわいく */
}

/* 記事全体のレイアウト */
.post-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    line-height: 1.8;
    color: #333;
}

/* 見出しのデザイン */
.post-header h1 {
    font-size: 2rem;
    border-bottom: 3px solid #005caf; /* 薄いグリーン*/
    padding-bottom: 10px;
}

.post-content h2 {
    font-size: 1.5rem;
    margin-top: 40px;
    padding-left: 10px;
    border-left: 5px solid #005caf;
    background: #f4f4f4;
}

/* 記事内の画像サイズを調整 */
.post-content img {
    display: block;      /* 画像を中央に寄せるための準備 */
    margin: 20px auto;   /* 上下に余白を作り、左右中央に配置 */
    max-width: 60%;      /* 横幅を記事全体の60%に制限（ここを40%などにするともっと小さくなります） */
    height: auto;        /* 縦横比を維持 */
    border-radius: 5px;  /* 角を少し丸くすると柔らかい印象になります */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 軽い影をつけるとプロっぽくなります */
}

/* スマホで見るときは少し大きく表示されるように調整 */
@media (max-width: 600px) {
    .post-content img {
        max-width: 90%;
    }
}

/* 強調ボックス */
.highlight-box {
    margin: 30px 0;
    padding: 20px;
    background-color: #eef6ff;
    border-radius: 8px;
    border: 1px solid #cce4ff;
}

/* 戻るリンク */
.back-link {
    display: inline-block;
    margin-top: 50px;
    text-decoration: none;
    color: #005caf;
    font-weight: bold;
}

/* --- 本文中に挿入する画像のデザイン --- */
.body-image {
    margin: 40px 0;    /* 上下に余白を空ける */
    text-align: center; /* 画像を真ん中に寄せる */
}
.body-image img {
    max-width: 100%;   /* 画面幅からはみ出さないようにする */
    height: auto;      /* 高さは自動調整 */
    border-radius: 8px; /* 角を少し丸くする */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* うっすら影をつけて浮かせる */
}

/* --- 区切り線のデザイン --- */
hr {
    border: none;             /* 元々の線を消す */
    border-top: 2px dashed #ddd; /* 優しいグレーの点線にする */
    margin: 10px 0;           /* 上下の余白をたっぷり取る */
}

.styled-block {
  /* フォントサイズを現在の90%にする（少し小さく） */
  font-size: 0.8em;

  /* 背景色を薄いグレーにする */
  background-color: #f4f4f4;

  /* 内側に余白を設ける（上下1em, 左右1.5em） */
  padding: 1em 1.5em;

  /* （任意）外側の余白を調整する */
  margin: 0.5em 0;

  /* （任意）角を少し丸くする */
  border-radius: 5px;
}

/* 写真と注釈のセット全体の設定 */
figure {
  margin: 0;           /* 必要に応じて余白を調整 */
  text-align: center;  /* 写真と文字を中央揃えにする場合 */
}

/* 注釈（文字）の設定 */
figcaption {
  font-size: 0.8em;    /* 文字サイズを本文の80%にする */
  color: #666;         /* 文字色を少し薄いグレーにする（読みやすくするため） */
  margin-top: 5px;     /* 写真との間に少し隙間を空ける */
}