/* =========================================
   記事・プロフィール コンテンツ
   ========================================= */
main.container {
    background-color: #ffffff !important;
    padding: 50px 40px;
    border-radius: 15px;
    margin-top: 30px;
    margin-bottom: 60px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}

.post-content {
    padding: 50px 40px;
    border-radius: 15px;
    font-size: 17px; 
    line-height: 1.8;
}

.post-content p {
    margin-bottom: 2.0rem; 
}

/* h2（角丸装飾） */
.section-title, .profile-text h2 {
    border-left: 8px solid #1a3c40;
    padding: 15px 25px;
    margin: 60px 0 30px;
    background: #e0f7fa;
    color: #1a3c40;
    font-size: 1.6rem;
    border-radius: 15px;
    line-height: 1.4;
    display: block;
}

/* h3（下線） */
.post-content h3 {
    font-size: 1.4rem;
    color: #1a3c40;
    border-bottom: 3px solid #b2ebf2;
    padding-bottom: 5px;
    margin: 50px 0 25px;
    display: inline-block;
}

.page-title {
    text-align: center;
    color: #1a3c40;
    margin-bottom: 60px;
    font-size: 2.2rem;
}

/* =========================================
   テーブル装飾
   ========================================= */
.post-content .music-table {
    width: 100%;
    border-collapse: collapse;
    margin: 40px 0;
    line-height: 1.5;
}

.post-content .music-table th {
    background-color: #00838f !important;
    color: #ffffff !important;
    padding: 15px;
    border: 1px solid #b2ebf2;
    text-align: left;
}

.post-content .music-table td {
    padding: 12px 15px;
    border: 1px solid #e0f7fa;
    color: #444;
}

/* tbodyの中の行だけで奇数・偶数を数えるようにします */
.post-content .music-table tbody tr:nth-child(odd) {
    background-color: #ffffff; /* 1行目は白 */
}

.post-content .music-table tbody tr:nth-child(even) {
    background-color: #f4fdff; /* 2行目は薄い青 */
}

/* PC・スマホ共通の設定 */
.table-wrapper {
    width: 100%;
    overflow-x: auto; /* はみ出たらスクロール */
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
}

.post-content .music-table {
    min-width: 600px; /* ★重要：スマホでも表を潰さないための最低幅 */
}

/* =========================================
   画像・リスト
   ========================================= */
.top-banner {
    width: 100%;
    max-width: 800px;
    height: auto;
    display: block;
    margin: 0 auto 30px;
    border: none;          /* 枠線が不要ならこれを追加 */
    box-shadow: none;      /* 影が不要ならこれを追加 */
}

.profile-img, .post-content img { 
    display: block;
    margin: 40px auto;
    max-width: 100%;
    height: auto;
    border: 5px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border-radius: 10px;
}

/* ==================================================
   リストボックス＆プロフィールリスト（ピンクの囲み枠対応版）
   ================================================== */

/* 【基本】枠線なし・背景なし（全体の余白のみ設定） */
.list-box {
    margin: 40px 0; /* 外側の余白を40pxに統一 */
    padding: 0;
}

/* 「♪」マーク付きリストの基本デザイン */
.profile-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.profile-list li { 
    position: relative; 
    padding: 10px 0 10px 35px; 
    border-bottom: 1px dashed #b2ebf2; /* 水色の点線 */
    line-height: 1.8;
}
.profile-list li:last-child {
    border-bottom: none; /* 一番最後の項目の下線だけ消して枠内をすっきりさせる */
}
.profile-list li::before { 
    content: "♪"; 
    position: absolute; 
    left: 10px; 
    color: #00838f; 
    font-weight: bold; 
}

/* 【特別版】クラス名に「with-border」がついている時だけピンクの枠をつける */
.list-box.with-border {
    background-color: #ffffff; /* 箱の中は白 */
    border: 2px solid #ffddeb; /* 薄いピンクの太線 */
    border-radius: 15px;       /* 角を丸く */
    padding: 25px 30px;        /* 内側のきれいな余白 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.02); /* ほんのり上品な影 */
}

/* 枠線がついた時、最初と最後の項目の上下余白をきれいに収める微調整 */
.list-box.with-border .profile-list li:first-child {
    padding-top: 5px;
}
.list-box.with-border .profile-list li:last-child {
    padding-bottom: 5px;
}

/* 画像下の説明文（figcaption）のスタイル */
figcaption {
    text-align: center;
    font-size: 0.85rem;
    color: #666;
    margin-top: -30px; /* 画像の余白に合わせて調整してください */
    margin-bottom: 40px;
    font-style: italic; /* 少し斜体にすると「補足」らしくなります */
}

/* 補足コラムのスタイル */
.column-box {
    margin: 2em 0;
    padding: 1.5em;
    background-color: #fffef9; /* 背景をより明るいクリーム色に変更 */
    border: 1px solid #eee;    /* 枠線をより薄く */
    border-left: 5px solid #ff9900; /* アクセントの線だけオレンジを維持 */
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* わずかな影で浮き立たせる */
}

.column-title {
    display: block;
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 0.8em;
    color: #333; /* 文字色を濃いグレーにして読みやすく */
}

.column-content {
    font-size: 0.95em;
    line-height: 1.7; /* 行間を少し広げて読みやすく */
    color: #444; /* 本文も落ち着いた色に */
}

/* =========================================
   アフィリエイト
   ========================================= */
.ad-section {
    margin: 60px 0;
    padding: 20px;
    background-color: #f9fdfd;
    border: 2px dashed #b2ebf2;
    border-radius: 12px;
    text-align: center;
}
.ad-label {
    font-weight: bold;
    margin-bottom: 15px 
}
.ad-box {
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* もしもアフィリエイトの枠自体がはみ出さないようにする */
.ad-box div[id^="msmaflink-"] {
    max-width: 100% !important;
    margin: 0 auto !important;
}


/* 広告を2個並べる時の外枠 */
.ad-section-double {
    margin: 40px 0;
}

/* 2個並んだ時の間の余白 */
.ad-section-double .ad-section {
    margin-bottom: 20px; /* 縦に並べた時の隙間 */
}

/* 広告ラベルの色をしゅうこさんらしく少し柔らかく */
.ad-label {
    color: #b07c85  /* 吹き出しのピンクに合わせた色 */
}

/* 広告表記のスタイル */
.ad-notice {
    font-size: 13px;       /* 少し小さめに */
    color: #888;           /* グレーで控えめに */
    text-align: right;     /* 右寄せにすると自然です */
    margin-bottom: 10px;
    font-style: italic;    /* 少し斜体にして補足感を出します */
}

/* =========================================
   関連記事
   ========================================= */
.related-posts {
    margin-top: 80px;
    padding-top: 40px;
    border-top: 2px solid #e0f7fa;
}
.related-title {
    font-size: 1.4rem;
    color: #1a3c40;
    margin-bottom: 30px;
    text-align: center;
}
.related-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.related-card {
    text-decoration: none;
    color: #333;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: 0.3s;
}
.related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.related-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    margin: 0; /* 記事内の画像設定（余白）を打ち消す */
    border: none;
    border-radius: 0;
}
.related-card p {
    padding: 15px;
    font-size: 0.95rem;
    line-height: 1.4;
    margin: 0 !important;
    font-weight: bold;
}

/* 記事の途中で「横並び」にしたい時だけ使うクラス */
.related-grid.is-horizontal {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.related-grid.is-horizontal .related-card {
    flex: 1;
    min-width: 200px; /* 画面が狭い時に縦に落ちる基準サイズ */
}

/* 小さな横並びリンク用の枠組み */
/* さらに細長くスリムにした横並びリンク */
.related-mini {
    display: flex;
    align-items: center;
    gap: 20px;
    /* ↓ここを追加・修正↓ */
    justify-content: flex-start; /* 中身を左から並べる */
    width: 100%;                 /* 本文の幅いっぱいに広げる */
    /* または、幅を固定したい場合は width: 500px; など数字を入れてください */
    text-decoration: none;
    color: inherit;
    margin: 10px 0;
    border: 1px solid #eee;
    padding: 8px 12px;            /* 上下のパディングを少し削って細く */
    border-radius: 4px;
    max-width: 100%;       /* 親要素（本文の幅）に合わせる */
    background-color: #fafafa; /* ほんの少し背景色をつけると「リンク」だと分かりやすいです */
    transition: background-color 0.3s;
    height: 100px;          /* 高さを固定してスリム化 */
}

.related-mini:hover {
    background-color: #f0f0f0; /* マウスを乗せた時に色を変える演出 */
}

/* サムネイルをさらに小さく、横長に合わせる */
.related-mini img {
    width: 80px;            /* 80pxから60pxへ小さく */
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;         /* 画像が潰れないように固定 */
    /* ↓ここを追加して中央寄せを打ち消す↓ */
    margin: 0 !important;
}

/* タイトルの文字調整 */
.related-mini p {
    margin: 0;
    font-size: 0.9em;       /* 少し小さめにして1行に収まりやすく */
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis; /* 長すぎるタイトルを「...」で省略 */
    white-space: nowrap;    /* 1行に強制する（2行にしたい場合はここを消す） */
}

.related-link-box {
    background-color: #f0fbfc; /* 優しい水色 */
    border-left: 5px solid #b2ebf2; /* アクセントの左線 */
    padding: 15px;
    margin: 20px 0;
}
.related-link-box h4 {
    margin-top: 0;
    font-size: 1.1rem;
}


/* =========================================
   吹き出し
   ========================================= */
.speech-wrap {
    display: flex;
    align-items: flex-start;
    margin: 40px 0;
    gap: 15px;
}
.speech-icon {
    flex-shrink: 0; 
    width: 100px; /* ★幅を100に */
    text-align: center;
}
.speech-icon img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #e0f7fa;
    margin: 0 !important; 
    box-shadow: none !important;
}
.speech-name {
    font-size: 0.8rem;
    color: #666;
    margin-top: 5px;
    font-weight: bold;
}
.speech-bubble {
    position: relative;
    padding: 15px 25px;
    background: #fff0f5; 
    border-radius: 15px;
    font-size: 1.15rem; 
    line-height: 1.4;
    color: #333;
    filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.05));
}
/* 2. 吹き出しの中のpタグの余白を消す設定 */
.speech-bubble p {
    margin: 0;
}

/* 吹き出しの三角（しっぽ） */
.speech-bubble::before {
    content: "";
    position: absolute;
    top: 35px;
    left: -15px;
    border-style: solid;
    border-width: 10px 15px 10px 0;
    /* ★ここも本体と同じ色（#fff0f5）に変更 */
    border-color: transparent #fff0f5 transparent transparent;
}

/* =========================================
   箇条書きの囲み枠
   ========================================= */
.point-box {
    background-color: #ffffff; /* 箱の中は白 */
    border: 2px solid #ffddeb; /* 薄いピンク */
    border-radius: 15px;      /* 角を丸く */
    padding: 25px 30px;       /* 内側の余白 */
    margin: 40px 0;           /* 外側の余白 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.02); /* ほんのり影 */
}

/* 枠の中のリストの間隔を少し調整 */
.point-box ul {
    margin: 0;
    padding: 0;
}

/* 枠の中にタイトルをつけたい場合 */
/* 左側に太い縦線を引くスタイル */
.point-box-title {
    display: block;
    background: transparent; /* 背景を消す */
    color: #1a3c40; /* 文字色は元の濃い色を活かしてもOK */
    padding: 2px 0 2px 12px; /* 左側に余白を作る */
    border-radius: 0;
    font-size: 1.05rem;
    font-weight: bold;
    margin-bottom: 15px;
    border-left: 5px solid #66e2ed; /* 左側にアクセントの縦線 */
    position: static;
}

/* ↓ これを新しく追加する */
.point-box .list-box {
    margin: 0;
}

    /* 中見出し(h2) */
    h2 {
        font-size: 1.05rem; /* 本文より少し大きい程度に */
        margin-top: 20px;
    }

    /* 小見出し(h3) */
    h3 {
        font-size: 1.0rem; /* 本文(15px)とほぼ同じか少し太いくらい */
        margin-top: 15px;
    }

/* =========================================
   目次・その他
   ========================================= */
.toc-container {
    background-color: #f0f7f8;
    border: 2px solid #00838f;
    border-radius: 15px;
    padding: 25px;
    margin: 40px 0;
}
.toc-title {
    font-weight: bold;
    text-align: center;
    color: #1a3c40;
    font-size: 1.2rem;
    margin-bottom: 20px !important;
    border-bottom: 2px solid #00838f;
    padding-bottom: 10px;
}

.toc-list {
    list-style: none;
    padding-left: 0;
    counter-reset: toc-count; /* 番号のリセット */
}

/* 目次のh2（親のli）に番号を自動で振る */
.toc-list > li {
    counter-increment: toc-count; /* 番号をカウントアップ */
    margin-bottom: 12px;
    display: block;
}

.toc-list > li::before {
    content: counter(toc-count) ". "; /* 「1. 」という表示を作る */
    color: #00838f;
    font-weight: bold;
    margin-right: 8px;
}

.toc-list a {
    text-decoration: none;
    color: #006064; /* リンクの色を濃く */
    font-weight: bold;
    font-size: 1rem;
    transition: 0.3s;
}

.toc-list a:hover {
    color: #b07c85;
    text-decoration: underline;
}

/* h3（子要素）の各行の設定 */
.toc-list ul li {
    font-size: 0.9rem;
    margin-bottom: 8px;
    line-height: 1.5;
    display: flex;       /* 印と文字を綺麗に並べる */
    align-items: flex-start;
}

/* h3の前の印（箇条書きの記号） */
.toc-list ul li::before {
    content: "♪";        /* ここを "・" や "●" に変えるとお好みの印になります */
    color: #00838f;      /* 印の色 */
    font-size: 0.8rem;   /* 印の大きさ */
    margin-right: 8px;   /* 印と文字の間の隙間 */
    flex-shrink: 0;      /* 改行したときに印が潰れないようにする */
}

/* h3（子要素）をまるごと右に寄せる設定 */
.toc-list ul {
    list-style: none;
    padding-left: 0 !important; /* 他の設定に負けないように強制 */
    margin-top: 8px;
    margin-left: 45px; /* ここで右に寄せる距離を調整します */
    border-left: none;
}

/* 日付エリアのスタイル */
.post-meta {
    text-align: right;
    font-size: 0.9em;
    color: #666;
    margin-bottom: 20px;
}
.post-meta span {
    margin-left: 15px;    /* 公開日と更新日の間に隙間を作る */
}

/* 擬似要素でおしゃれなアイコン風の記号をつける（お好みで） */
.published-date::before {
    content: "📅 ";       /* カレンダーの絵文字 */
}

.updated-date::before {
    content: "🔄 ";       /* 更新マークの絵文字 */
}



/* =========================================
   スマートフォン用設定（@media）
   ========================================= */
@media screen and (max-width: 768px) {

    /* 全体の文字サイズ調整 */
    body {
        font-size: 15px; 
        line-height: 1.5; 
    }

    /* 記事エリアの余白調整（ここがはみ出すとPCの余白がなくなります） */
    .post-content {
        padding: 30px 20px !important; 
        border-radius: 10px;
    }

    /* 本文とリストの文字サイズ */
    p, .profile-list li, .balloon-text {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 10px;
    }

    /* スマホ用の見出しサイズ調整 */
    h1, .page-title, .site-title a {
        font-size: 1.5rem !important; /* スマホに適したサイズに */
        margin-bottom: 10px;
    }

    h2 { font-size: 1.2rem; margin-top: 20px; }
    h3 { font-size: 1.1rem; margin-top: 15px; }

    /* 記事内の画像を画面幅いっぱいに */
    .post-content img, .profile-img {
        width: 100% !important;
        height: auto !important;
        margin: 20px 0 !important;
        position: static !important;
        transform: none !important;
        left: auto !important;
        border: 2px solid #fff !important;
    }

    /* 関連記事を1列にする */
    .related-grid { grid-template-columns: 1fr; }

    /* 吹き出しアイコンを小さく */
    .speech-icon, .speech-icon img {
        width: 65px;
        height: 65px;
    }

    /* プロフィール（この記事を書いた人）の調整 */
    .author-icon img {
        width: 80px !important;
        height: 80px !important;
    }

    /* スマホでハンバーガーボタンを表示 */
    .hamburger-btn {
        display: block; /* スマホで表示 */
        margin: 0;      /* 先ほどつけた中央寄せを解除 */
    }

    /* タイトルなどの親要素に、ボタンの基準点を作る */
    .header-container {
        position: relative; /* これでボタンがヘッダーの中を基準に動きます */
        padding: 30px 0;    /* 上下の余白を少し詰めるとスッキリします */
    }
    
    /* メニューをスマホ用に隠す（必要であればここに追加します） */
    .main-nav {
        display: none;
        position: fixed;
        top: 0;
        right: 0;        /* 右から出す */
        width: 80%;      /* ★画面の80%だけ覆う（左側に記事が見える） */
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.98); 
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 1050;
    }

    .main-nav.is-open {
        display: flex;
    }
    
    /* メニュー内のリンクも見やすく調整 */
    .main-nav li {
        margin: 15px 0;
        width: 100%;
        text-align: center;
    }

   /* スマホ用のアフィリエイト設定（画面幅が768px以下のとき） */
    .ad-box {
        display: block;      /* 横並びを解除して縦に並べる */
        min-height: auto;    /* 高さを中身に合わせる */
    }

    .ad-section {
        margin: 30px 0;      /* スマホでは上下の余白を少し狭く */
        padding: 15px;
    }

    .ad-section-double {
        display: block;      /* 2個並びも確実に縦にする */
    }

    /* スマホ用のテーブル設定
    /* テーブルの文字をスマホ用に小さくする */
    .post-content .music-table th,
    .post-content .music-table td {
        padding: 10px 8px; 
        font-size: 14px;
    }

} /* <--- 【重要】ここでスマホ設定をしっかり閉じます */

/* =========================================
   PC用：タイトルサイズ固定
   ========================================= */
.site-title, .site-title a {
    font-size: 34px !important; 
}
h1.page-title {
    font-size: 28px !important; 
}

/* ==========================================================================
   Back to Top Button (かわいい丸型)
   ========================================================================== */
/* Back to Top */
.back-to-top {
    position: fixed;
    right: 20px; bottom: 20px;
    width: 50px; height: 50px;
    border-radius: 50%;
    background-color: #98f3aa;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: all 0.3s;
}
.back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* 記事終わりの区切り線 */
.article-divider {
    border: 0;
    border-top: 1px solid #eee; /* さらに薄いグレー */
    margin: 40px 0 20px;       /* 上に広め、下に少しの余白 */
}

/* 署名のテキスト */
.article-footer {
    color: #666;
    font-size: 0.9em;
}

/* アプリーチ */
.appreach {
  text-align: left;
  padding: 10px;
  border: 1px solid #7C7C7C;
  overflow: hidden;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach a:after {
  display: none;
}
.appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 3% 0 0 !important;
  width: 25% !important;
  height: auto !important;
  max-width: 120px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
}
.appreach__detail:after {
  content: "";
  display: block;
  clear: both;
}
.appreach__name {
  font-size: 16px;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 8px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}
.appreach__star {
  position: relative;
  font-size: 14px !important;
  height: 1.5em;
  width: 5em;
}
.appreach__star__base {
  position: absolute;
  color: #737373;
}
.appreach__star__evaluate {
  position: absolute;
  color: #ffc107;
  overflow: hidden;
  white-space: nowrap;
}


/* =========================================================
   ▼▼▼ まとめページ用の追記（2026年6月）▼▼▼
   ・ここから下が今回の追加分です。
   ・03_components.css は一番最後に読み込まれるので、
     上の元の設定を上書きして調整できます。
   ========================================================= */

/* ① トップページと同じ記事リスト（角丸サムネ＋2行タイトル）
      まとめページの記事一覧で使います。 */
.entry{
    display:flex; align-items:center; gap:18px;
    padding:18px 6px; border-bottom:1px solid #ece3d6;
    text-decoration:none; color:inherit; transition:transform .25s ease;
}
.entry:last-child{ border-bottom:none; }
.entry:hover{ transform:translateX(4px); }
.entry__thumb{ width:82px; height:82px; flex-shrink:0; border-radius:12px; overflow:hidden; background:#efe8df; }
.entry__thumb img{
    width:100%; height:100%; object-fit:cover; display:block;
    margin:0 !important; border:none !important; border-radius:0 !important;
    box-shadow:none !important; transition:transform .5s ease;
}
.entry:hover .entry__thumb img{ transform:scale(1.07); }
.entry__body{ flex:1; min-width:0; }
.entry__cat{ font-size:.78rem; letter-spacing:.06em; font-weight:700; color:#00838f; display:block; margin-bottom:6px; }
.entry__title{
    font-size:1.12rem; font-weight:500; color:#3a4a4d; line-height:1.6;
    transition:color .2s ease;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.entry:hover .entry__title{ color:#00838f; }

/* スマホではサムネを少し小さく（トップページと同じ） */
@media screen and (max-width:768px){
    .entry__thumb{ width:70px; height:70px; }
    .entry__title{ font-size:1.06rem; }
}

/* ② h2（カテゴリー見出し）の上の余白を狭く
      ※一覧ページのh2だけが対象。記事ページのH2見出しには影響しません。 */
main.container > .section-title{ margin-top:24px; }

/* ③ パンくずリストとヘッダーの間に余白を足す（近すぎる対策） */
nav.breadcrumb-container{ margin-top:24px; }

/* ④ フッターの行間を広げる */
footer{ line-height:1.9; }
.copyright{ margin-bottom:20px; }
.footer-links{ row-gap:12px; }

/* ⑤ プロフィール欄の行間を広げる（全ページ共通で効きます）
      ・数字（line-height）を大きくするほど行間が広がります。
      ・1.8→2.0→2.2 のように増やして好みに調整してください。 */
#profile-placeholder .author-text{ line-height:1.8; }
#profile-placeholder .author-name{ margin-bottom:8px; }
#profile-placeholder .author-description{ line-height:1.9; }
#profile-placeholder .author-description p{ line-height:1.9; margin-bottom:8px; }

/* ⑥ カテゴリー紹介文と記事一覧の間隔を広げる（一覧ページのみ）
      ・数字（margin-top）を大きくするほど、紹介文と最初のカードが離れます。 */
main.container > .entry-list{ margin-top:32px; }

/* ⑦ 親カテゴリーページ用：サブカテゴリーへの案内カード */
.subcat-grid{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:32px; }
.subcat-card{
    display:block; text-decoration:none; color:inherit;
    background:#fff; border:1px solid #ece3d6; border-radius:12px;
    padding:22px 24px; transition:transform .2s ease, box-shadow .2s ease;
}
.subcat-card:hover{ transform:translateY(-3px); box-shadow:0 6px 16px rgba(0,0,0,.06); }
.subcat-card__title{ display:block; font-size:1.15rem; font-weight:700; color:#1a3c40; margin:0 0 8px; }
.subcat-card__title::after{ content:" →"; color:#00838f; }
.subcat-card__desc{ display:block; font-size:.92rem; color:#555; line-height:1.7; margin:0; }
@media screen and (max-width:768px){ .subcat-grid{ grid-template-columns:1fr; } }
 
/* サブカテゴリーが1つだけの親ページ用（カードを横幅いっぱいにする） */
.subcat-grid.is-single{ grid-template-columns:1fr; }