/*
Theme Name: Simple Blog
Author: Seiya Doi
Description: 30代〜40代女性向けのシンプルで大人かわいいブログテーマ
Version: 1.0.0
*/

/* ここから下にデザインのコードを書いていきます */

/*
Theme Name: Simple Blog
...（ここに先ほど書いたテーマ情報のコメントを残してください）...
*/

/* ==========================================
   1. 変数の設定（カラー・フォント）
   ========================================== */
   :root {
    /* カラーパレット：大人かわいい・ナチュラルなくすみカラー */
    --primary-color: #dca39a;    /* メイン：くすみピンク（優しい温かみ） */
    --secondary-color: #7fa99b;  /* アクセント：くすみグリーン（安心感・ナチュラル） */
    --text-color: #4a4643;       /* 文字：優しいダークブラウン（黒より柔らかい） */
    --bg-color: #faf7f2;         /* 背景：ホッとするオフホワイト */
    --white: #ffffff;
    --light-gray: #f0ede7;
    
    /* フォント設定：端末のフォントを活かして超軽量化 */
    --font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* ==========================================
   2. 基本スタイル（全体・リセット）
   ========================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.8;
    letter-spacing: 0.05em; /* 文字間を広げて親しみやすさを演出 */
    -webkit-font-smoothing: antialiased;
    /* 1. 日本語の文字間隔を自動で美しく詰める（ガタツキ防止） */
    font-feature-settings: "palt";
    
    /* 2. Firefox用の滑らか処理 */
    -moz-osx-font-smoothing: grayscale;
    
    /* 3. ブラウザに「読みやすさを最優先して描画して！」と指示する */
    text-rendering: optimizeLegibility;
}

a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s ease, opacity 0.3s ease;
}

a:hover {
    color: var(--primary-color);
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border-radius: 8px; /* 画像の角を丸くして柔らかく */
}

.wp-block-image img {
	margin: 1em 0;
}


/* 共通コンテナ（読みやすい一本道の幅） */
.container {
    max-width: 760px; 
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================
   3. ヘッダー・フッター
   ========================================== */
.site-header {
    background-color: var(--white);
    padding: 40px 0;
    text-align: center;
    border-bottom: 2px dashed var(--light-gray); /* ナチュラルフレンチ風の点線 */
}

.site-title {
    font-size: 24px;
    font-weight: 700;
}

.site-title a {
    color: var(--primary-color); /* タイトルを優しいピンクに */
}

.site-description {
    font-size: 12px;
    color: #8c857f;
    margin-top: 8px;
    letter-spacing: 0.1em;
}

.site-main {
    padding: 40px 0;
}

.site-footer {
    background-color: var(--white);
    padding: 30px 0;
    text-align: center;
    font-size: 11px;
    color: #8c857f;
    border-top: 1px solid var(--light-gray);
}

/* ヘッダーをロゴとボタンの横並びに */
.header-container {
    max-width: 760px; 
    display: flex;
    margin: 0;
    padding: 0;
    margin-left: 16px
}

.site-logo img {
    max-width: 150px;
}

@media screen and (min-width: 768px) {
    .header-container {   
        margin-left: max(32px, calc(50% - 500px));
    }
    .site-logo img {
        max-width: 200px;
    }
}




/* =========================================================
   ハンバーガーメニュー
========================================================= */

.floating-menu {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1000;
  }

  /* =========================================
   PC・タブレット向け（画面幅が768px以上の場合）
========================================= */
@media screen and (min-width: 768px) {
    .floating-menu {
        top: 28px; /* PC画面では少しゆとりを持たせる */
        /* 画面がどれだけ大きくなっても、中央のコンテンツの右端で止まる魔法のコード。
         ※もしサイトの最大幅が1200pxなら、半分の「600px」に書き換えてください。
        */
        right: max(32px, calc(50% - 500px));
    }
}
  
  .floating-menu summary {
    list-style: none;
  }
  
  .floating-menu summary::-webkit-details-marker {
    display: none;
  }
  
  .floating-menu__button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--light-gray);
    box-shadow: 0 4px 12px rgba(160, 150, 140, 0.1);
    backdrop-filter: blur(8px);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform 0.22s ease;
  }
  
  .floating-menu__button:hover {
    transform: translateY(-2px);
  }
  
  .floating-menu__button span {
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--text-color);
    transition: transform 0.22s ease, opacity 0.22s ease;
  }
  
  .floating-menu[open] .floating-menu__button span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  
  .floating-menu[open] .floating-menu__button span:nth-child(2) {
    opacity: 0;
  }
  
  .floating-menu[open] .floating-menu__button span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
  
  .floating-menu__panel {
    position: absolute;
    top: 70px;
    right: 0;
    width: 260px;
    padding: 24px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--light-gray);
    box-shadow: 0 10px 30px rgba(160, 150, 140, 0.15);
    backdrop-filter: blur(10px);
  }
  
  .floating-menu__label {
    margin: 0 0 16px;
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-align: center;
  }

/* =========================================
     リストの初期化（黒ポチと変な余白を消す）
  ========================================= */
  .floating-menu__panel ul {
    list-style: none !important; /* 黒ポチ（・）を強制的に消す */
    padding: 0 !important;       /* 左側の不自然な余白を消す */
    margin: 0;
  }
  
  .floating-menu__panel li {
    list-style: none !important;
    margin: 0;
    padding: 0;
  }

  
  /* =========================================
     メニューのリンク（文字と区切り線）の装飾
  ========================================= */
  .floating-menu__panel a {
    display: block;
    padding: 16px 8px; /* スマホで指でタップしやすいよう、上下の余白を少し広げます */
    color: var(--text-color);
    text-decoration: none;
    font-size: 15px; /* 読みやすいように少しだけサイズアップ */
	font-weight: 600;
    text-align: center; /* テキストを真ん中に揃えて美しい配置に */
    border-bottom: 1px solid var(--light-gray); /* 区切り線の色を少し分かりやすく */
    transition: color 0.3s ease;
  }
  
  .floating-menu__panel a:hover {
    color: var(--primary-color);
  }
  
  /* 一番下の区切り線を消す（WordPressのリスト構造に対応） */
  .floating-menu__panel li:last-child a {
    border-bottom: none;
  }




/* ==========================================
   4. 記事一覧ページ（index.php）
   ========================================== */
h2 {
    font-size: 18px;
    margin-bottom: 20px;
    position: relative;
    padding-left: 16px;
    color: var(--text-color);
}

/* 「最新の記事」の左側に丸いドットのアクセント */
h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: var(--secondary-color);
    border-radius: 50%;
}

.post-list {
    list-style: none;
}

.post-item {
    background-color: var(--white);
    padding: 24px;
    margin-bottom: 16px;
    border-radius: 12px; /* カードを角丸に */
    box-shadow: 0 4px 12px rgba(160, 150, 140, 0.04); /* 主張しすぎない優しい影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post-item:hover {
    transform: translateY(-2px); /* マウスを乗せると優しく浮き上がる */
    box-shadow: 0 6px 16px rgba(160, 150, 140, 0.08);
}

.post-item h3 {
    font-size: 18px;
    margin-bottom: 8px;
    color: var(--text-color);
}

.post-item time {
    font-size: 12px;
    color: #9c9590;
}

/* ==========================================
   レイアウト用の広いコンテナ
   ========================================== */
   .container-large {
    max-width: 1080px; /* 記事(読書用)の760pxより広くする */
}

/* 2カラムレイアウト（メイン＋サイドバー） */
.layout-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.main-content {
    flex: 1; /* 残りの幅をすべてメインにする */
    min-width: 0; 
}

.site-sidebar {
    width: 300px; /* サイドバーの横幅 */
}

/* ==========================================
   2列のカードレイアウト (post-grid)
   ========================================== */
.post-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列にする設定 */
    gap: 20px; /* カード同士の隙間 */
}

.post-card {
    background-color: var(--white);
    border-radius: 12px;
    overflow: hidden; /* 画像の角も丸く切り取るため */
    box-shadow: 0 4px 12px rgba(160, 150, 140, 0.04);
    display: flex;
    flex-direction: column;
}

.post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(160, 150, 140, 0.08);
}

.post-card-thumb {
    width: 100%;
    aspect-ratio: 16 / 9; /* すべての画像を同じ比率で綺麗に揃える */
    background-color: var(--light-gray);
    overflow: hidden;
}

.post-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠に合わせて自動で綺麗にトリミング */
    border-radius: 0; 
}

.post-card-title {
    font-size: 15px;
    padding: 16px;
    color: var(--text-color);
    line-height: 1.5;
    margin: 0;
}

@media screen and (max-width: 768px) {
    /* 2カラムレイアウトを解除して縦積みに */
    .layout-wrapper {
        display: block;
    }

    /* メインコンテンツを全幅に */
    .main-content {
        margin-bottom: 30px;
    }

    /* 2列から1列へ切り替え */
    .post-grid {
        grid-template-columns: 1fr; /* これで1列になります */
    }

    /* サイドバーの横幅を100%に */
    .site-sidebar {
        width: 100%;
    }
}

/* ==========================================
   サイドバー内のウィジェットデザイン
   ========================================== */
.site-sidebar .widget {
    background-color: var(--white);
    padding: 24px;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(160, 150, 140, 0.04);
}

.site-sidebar .widget-title {
    font-size: 15px;
    margin-bottom: 16px;
    color: var(--secondary-color);
    border-bottom: 2px solid var(--light-gray);
    padding-bottom: 8px;
}





/* ==========================================
   5. 個別記事ページ（single.php）
   ========================================== */
.entry-article {
    background-color: var(--white);
    padding: 35px 25px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(160, 150, 140, 0.04);
}

.entry-meta {
    margin-bottom: 12px;
    font-size: 12px;
    color: #9c9590;
}

/* カテゴリーを可愛いカプセル型のタグに */
.entry-category a {
    background-color: var(--bg-color);
    padding: 3px 10px;
    border-radius: 20px;
    color: #6b635d;
    margin-left: 8px;
    font-size: 11px;
}

.entry-category a:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

.entry-title {
    font-size: 22px;
    line-height: 1.5;
    margin-bottom: 24px;
    color: var(--text-color);
}

.entry-thumbnail {
    text-align: center;
}

/* 記事本文内の装飾 */
.entry-content p {
    margin-bottom: 24px;
    font-size: 15px;
    word-break: break-all;
}

/* 本文内の見出し（H2）を大人かわいく */
.entry-content h2 {
    font-size: 19px;
    margin: 40px 0 20px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--primary-color); /* ピンクの下線 */
}
.entry-content h2::before {
    display: none; /* 一覧用のドットを消す */
}

/* 本文内の見出し（H3） */
.entry-content h3 {
    font-size: 17px;
    margin: 30px 0 15px;
    color: var(--secondary-color); /* グリーンの文字色に */
}

/* 記事下のナビゲーション */
.post-navigation {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px dashed var(--light-gray);
    font-size: 13px;
}

.nav-previous, .nav-next {
    margin-bottom: 10px;
}

/* ==========================================
   6. レスポンシブ対応（画面幅 768px 以下）
   ========================================== */
   @media screen and (max-width: 768px) {
    /* ヘッダーの余白をコンパクトにして、すぐ記事が目に入るように */
    .site-header {
        padding: 24px 0;
    }
    
    .site-title {
        font-size: 20px;
    }
    
    .site-description {
        font-size: 11px;
        padding: 0 15px; /* 長い説明文が端にぶつからないように */
    }

    .site-main {
        padding: 20px 0;
        padding-top: 0;
    }

    /* 記事一覧（トップページ）のカードの余白を調整 */
    .post-item {
        padding: 16px;
        margin-bottom: 12px;
        border-radius: 10px;
    }

    .post-item h3 {
        font-size: 16px;
    }

    /* 個別記事ページ（single.php）の余白を調整 */
    .entry-article {
        padding: 20px 16px; /* 左右の余白を狭めて、本文の表示幅を広く確保 */
        border-radius: 12px;
    }

    .entry-title {
        font-size: 18px; /* スマホで2列〜3列に綺麗に収まるサイズ */
        margin-bottom: 16px;
    }

    /* 記事本文内の文字サイズと見出し */
    .entry-content p {
        font-size: 14px; /* スマホで一番読みやすいサイズ */
    }

    .entry-content h2 {
        font-size: 16px;
        margin: 30px 0 15px;
    }

    .entry-content h3 {
        font-size: 15px;
        margin: 24px 0 12px;
    }
    
    /* 前後の記事へのナビゲーションを押しやすく */
    .post-navigation {
        margin-top: 30px;
        font-size: 12px;
    }
}


/* ==========================================
   7. 追加パーツ（ページネーション ＆ ウィジェット）
   ========================================== */
/* ページネーションを横並びで丸く可愛いボタンにする */
.pagination-area {
    margin-top: 40px;
    text-align: center;
}

.pagination-area .nav-links {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.pagination-area .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    background-color: var(--white);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-color);
    box-shadow: 0 4px 10px rgba(160, 150, 140, 0.04);
}

/* マウスホバーと、現在のページ（カレント）のデザイン */
.pagination-area .page-numbers:hover,
.pagination-area .page-numbers.current {
    background-color: var(--primary-color);
    color: var(--white);
}

/* 記事下ウィジェットエリアの装飾 */
.single-footer-widget-area {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px dashed var(--light-gray);
}

.single-footer-widget-area .widget {
    margin-bottom: 30px;
}

.single-footer-widget-area .widget-title {
    font-size: 16px;
    margin-bottom: 15px;
    color: var(--secondary-color); /* タイトルはくすみグリーン */
    position: relative;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--light-gray);
}

/* ==========================================
   フッターのデザイン
   ========================================== */
   .site-footer {
    background-color: var(--text-color); /* 濃いめのブラウンで引き締め */
    color: var(--white);
    padding: 50px 0 30px;
    margin-top: 60px;
}

.footer-container {
    text-align: center;
}

/* フッターメニューの横並び（スマホ対応版） */
.footer-nav ul {
    list-style: none;
    padding: 0; /* WordPress特有の左側の見えない余白をリセット */
    margin: 0 0 30px 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* 画面幅に収まらない場合は自動で改行する */
    row-gap: 15px; /* 改行して2段になった時の「上下」の余白 */
    column-gap: 20px; /* 左右の余白（元のgapと同じ） */
}

.footer-nav a {
    color: var(--white);
    font-size: 13px;
    opacity: 0.8;
}

.footer-nav a:hover {
    opacity: 1;
    text-decoration: underline;
}

.copyright {
    font-size: 11px;
    opacity: 0.6;
}

/* ==========================================
   記事本文内の装飾パーツ
   ========================================== */

.wp-block-table {
	margin-bottom:2em;
	margin-top: 2em;

}

/* =========================================
   箇条書きリスト (ul) - くすみピンクのチェックマーク
========================================= */
.entry-content ul {
    background-color: var(--light-gray);
    border-radius: 8px; /* 角を少し丸くして柔らかさを出す */
    padding: 1.5em 1.5em 1.5em 2.5em; /* 内側の余白 */
    margin-bottom: 2em;
    color: var(--text-color);
    list-style-type: none; /* デフォルトの黒丸を消す */
}

.entry-content ul li {
    position: relative;
    margin-bottom: 0.8em;
    line-height: 1.6;
	font-size: 0.8em;
}

.entry-content ul li:last-child {
    margin-bottom: 0;
}

/* チェックマークの作成 */
.entry-content ul li::before {
    content: '';
    position: absolute;
    left: -1.5em;
    top: 0.3em;
    width: 6px;
    height: 10px;
    border-right: 2px solid var(--primary-color); /* くすみピンク */
    border-bottom: 2px solid var(--primary-color);
    transform: rotate(45deg); /* 四角の枠を傾けてチェックマークにする */
}

/* =========================================
   番号付きリスト (ol) - くすみグリーンの丸数字
========================================= */
.entry-content ol {
    background-color: var(--light-gray);
    border-radius: 8px; /* 角を少し丸くして柔らかさを出す */
    padding: 1.5em 1.5em 1.5em 2.5em; /* 内側の余白 */
    counter-reset: list-counter; /* 数字のカウントをリセット */
    list-style-type: none; /* デフォルトの数字を消す */
    padding-left: 1em;
    margin-bottom: 2em;
    color: var(--text-color);
}

.entry-content ol li {
    position: relative;
    padding-left: 2.5em; /* 丸数字を置くための左余白 */
    margin-bottom: 1em;
    line-height: 1.6;
}

/* 丸い数字の作成 */
.entry-content ol li::before {
    counter-increment: list-counter; /* カウントを1ずつ増やす */
    content: counter(list-counter); /* 数字を出力 */
    position: absolute;
    left: 0;
    top: 0;
    width: 1.8em;
    height: 1.8em;
    background-color: var(--secondary-color); /* くすみグリーン */
    color: var(--white);
    border-radius: 50%; /* 完全な丸にする */
    text-align: center;
    line-height: 1.8em;
    font-size: 0.9em;
    font-family: 'Helvetica Neue', Arial, sans-serif; /* 数字をスッキリ見せる */
}


/* タイムライン全体の枠組み */
.custom-timeline {
    position: relative;
    padding-left: 25px; /* 左側に線を引くための余白 */
    margin-top: 2em;
    margin-bottom: 2em;
	margin-left: -1.2em;
}

/* 縦線（擬似要素） */
.custom-timeline::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 5px;
    bottom: 10px;
    width: 2px;
    background-color: #ccc; /* 線の色 */
}

/* タイムライン内の一番最後の要素の左線の下側を少しスッキリさせる調整 */
.custom-timeline > *:last-child {
    margin-bottom: 0;
}

/* タイムライン内のすべてのH3（STEP）の設定 */
.custom-timeline h3 {
    color: var(--text-color);
    position: relative;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

/* H3の左側に配置する丸印（ポイント） */
.custom-timeline h3::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -25px; /* 縦線の上に重なるように調整 */
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-color: var(--primary-color); /* 丸印の色 */
    border-radius: 50%;
    border: 2px solid #fff; /* 背景が白なら、白枠をつけると線と重なった時綺麗です */
    z-index: 1;
}

/* =========================================
   ブログカード（内部リンク）
========================================= */
.custom-blogcard {
    display: flex; /* 横並びにする */
    align-items: center; /* 縦の中央で揃える */
    background-color: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: 12px; /* 少し大きめの角丸で優しい印象に */
    padding: 12px; /* スマホでもスッキリ見える余白 */
    margin: 2em 0;
    text-decoration: none; /* リンクの下線を消す */
    color: var(--text-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); /* ホッとするような、ごく薄い影 */
    transition: background-color 0.3s, box-shadow 0.3s; /* タップ時のアニメーション */
}

/* タップ（ホバー）した時の動き */
.custom-blogcard:hover {
    background-color: var(--bg-color); /* ホバー時に背景をオフホワイトに */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); /* 影を少し濃くする */
}

/* --- サムネイル画像（左側） --- */
.custom-blogcard-thumbnail {
    margin: 0;
    flex: 0 0 120px; /* ★変更: 100pxから120pxに広げる */
    height: 80px;    /* ★変更: 100pxから80pxに縮めて、横長の長方形（3:2）にする */
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--light-gray); /* ★追加: 万が一余白ができた時の背景色 */
}

.custom-blogcard-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* ★変更: cover（切り抜き）から contain（全体を収める）に変更 */
}

/* --- テキスト部分（右側） --- */
.custom-blogcard-content {
    padding-left: 15px; /* 画像とテキストの間の余白 */
    flex: 1; /* 余ったスペースをテキストエリアにする */
    display: flex;
    flex-direction: column; /* テキストを縦に並べる */
    justify-content: center;
}

/* --- ラベル（あわせて読みたい等） --- */
.custom-blogcard-label {
    display: inline-block;
    align-self: flex-start; /* 左寄せにする */
    font-size: 0.75em;
    font-weight: bold;
    color: var(--secondary-color);
    background-color: rgba(220, 163, 154, 0.1); /* くすみピンクを極薄くした背景色（※カラーコードをRGBAに変換） */
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 6px;
    line-height: 1;
}

/* --- 記事タイトル --- */
.custom-blogcard-title {
    font-size: 0.8em;
    font-weight: bold;
    line-height: 1.5;
    /* 長いタイトルは3行で「...」と省略する設定（スマホで枠が崩れないように） */
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================
   スマホ向けのブログカード調整（縦並びにする）
========================================= */
@media screen and (max-width: 767px) {
    .custom-blogcard {
        flex-direction: column; /* 横並びから縦並びに変更 */
        align-items: flex-start; /* 左寄せにする */
        padding: 16px; /* スマホ用に少し余白を広げる */
    }

    .custom-blogcard-thumbnail {
        flex: none; /* 固定幅を解除 */
        width: 100%; /* 横幅いっぱいに広げる */
        height: auto;
        aspect-ratio: 16 / 9; /* 一般的なアイキャッチ画像の比率を維持 */
        margin-bottom: 12px; /* 画像とテキストの間に余白を作る */
    }

    .custom-blogcard-content {
        padding-left: 0; /* PC用の左余白をリセット */
        width: 100%; /* 横幅いっぱいに広げる */
    }

    .custom-blogcard-label {
        margin-bottom: 8px; /* ラベル下の余白を微調整 */
    }
}


/* =========================================
   パンくずリスト
========================================= */
.custom-breadcrumb {
    margin: 1em 0 2em; /* 上下の余白 */
    font-size: 0.7em; /* 本文より少し小さめにして控えめに */
    color: var(--text-color);
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap; /* スマホで長くなった場合は折り返す */
    list-style: none;
    padding: 0;
    margin: 0;
}

.breadcrumb-list li {
    display: flex;
    align-items: center;
}

/* 区切り文字（＞）の設定 */
.breadcrumb-list li:not(:last-child)::after {
    content: '>';
    margin: 0 8px; /* ＞の左右の余白 */
    font-size: 0.9em;
    color: #b3b3b3; /* 薄いグレーで控えめに */
}

/* リンクの色とホバー（タップ）時の動き */
.breadcrumb-list a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-list a:hover {
    color: var(--primary-color); /* ホバーでくすみピンクに */
    text-decoration: underline;
}

/* 現在のページ（一番右のテキスト）は少し色を薄くする */
.breadcrumb-list span[aria-current="page"] {
    color: #888888;
}


/* =========================================
   記事タイトルの下のメタ情報（日付・カテゴリ）
========================================= */
.entry-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px; /* カテゴリと日付の間の隙間 */
    margin-top: 10px;
    margin-bottom: 24px; /* アイキャッチ画像との間の余白 */
}

/* カテゴリを可愛い「タグ（ラベル）」風にする */
.entry-meta .entry-category a {
    display: inline-block;
    background-color: var(--light-gray); /* 優しい背景色 */
    color: var(--text-color);
    font-size: 0.8em;
    padding: 4px 12px;
    border-radius: 20px; /* 角丸にする */
    text-decoration: none;
    transition: background-color 0.3s;
}

.entry-meta .entry-category a:hover {
    background-color: var(--primary-color); /* ホバーでくすみピンクに */
    color: var(--white);
}

/* 日付は控えめに */
.entry-meta .entry-date {
    font-size: 0.85em;
    color: #888888; /* 薄めのグレーでスッキリと */
}


/* =========================================
   この記事を書いた人（プロフィールカード）
========================================= */
.custom-author-box {
    background-color: var(--bg-color); /* 背景：ホッとするオフホワイト */
    border: 1px solid var(--light-gray);
    border-radius: 12px;
    padding: 24px;
    margin: 3em 0; /* 本文との間に少し広めの余白を取る */
    color: var(--text-color);
}

/* タイトル「この記事を書いた人」 */
.custom-author-title {
    font-size: 0.9em;
    font-weight: bold;
    color: var(--primary-color); /* くすみピンク */
    margin-bottom: 16px;
    border-bottom: 2px dashed var(--primary-color); /* ピンクの点線で可愛らしさをプラス */
    padding-bottom: 8px;
	text-align: center;
}

/* 中身のレイアウト（横並び） */
.custom-author-inner {
    display: flex;
    align-items: flex-start; /* 上揃えにする */
    gap: 20px; /* 画像とテキストの隙間 */
}

/* アバター画像（左側） */
.custom-author-avatar {
    margin: 0;
    flex: 0 0 80px; /* 画像の大きさを固定 */
}

.custom-author-avatar img {
    width: 100%;
    height: auto;
    border-radius: 50%; /* 画像をきれいな真ん丸にする */
    border: 2px solid var(--white); /* 画像の周りに白い縁取りをつける */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* ごく薄い影でふんわり浮かせる */
}

/* テキスト情報（右側） */
.custom-author-info {
    flex: 1;
}

/* 名前 */
.custom-author-name {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 8px;
}

/* プロフィール文章 */
.custom-author-desc {
    font-size: 0.9em;
    line-height: 1.6;
    margin: 0;
}

/* --- スマホ向けの調整 --- */
@media screen and (max-width: 599px) {
    .custom-author-inner {
        flex-direction: column; /* スマホでは縦並びにする */
        align-items: center; /* 中央揃え */
    }
    .custom-author-name {
        margin-top: 8px;
        text-align: center;
    }
}

/* =========================================
   引用ブロック (blockquote)
========================================= */
.entry-content blockquote {
    position: relative;
    padding: 20px 20px 20px 50px; /* 左側にアイコンを置くための広めの余白 */
    margin: 2.5em 0;
    background-color: var(--light-gray); /* ホッとするライトグレーの背景 */
    border-left: 4px solid var(--secondary-color); /* 左側のくすみグリーンの縦線 */
    border-radius: 0 8px 8px 0; /* 右側の上下だけ角を丸くする */
    color: var(--text-color);
	margin-left: -1em;
}

/* 左上の大きなクォーテーションマーク（“） */
.entry-content blockquote::before {
    content: "“";
    position: absolute;
    top: 5px;
    left: 10px;
    font-size: 4em;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: rgba(127, 169, 155, 0.3); /* くすみグリーンを透明度30%にして透かす */
    line-height: 1;
}

/* 引用内の段落（pタグ） */
.entry-content blockquote p {
    margin-bottom: 1em;
    line-height: 1.7; /* 読みやすいように行間を少し広めに */
}

/* 最後の段落の余分な余白を消す */
.entry-content blockquote p:last-child {
    margin-bottom: 0;
}

/* 引用元（citeタグ）の装飾 */
.entry-content blockquote cite {
    display: block;
    margin-top: 15px;
    font-size: 0.85em;
    color: #888888; /* 薄めのグレー */
    text-align: right; /* 引用元は右寄せにすると綺麗です */
    font-style: normal; /* 斜体を解除してスッキリ見せる */
}

/* 引用元のテキストの前にダッシュ（—）を自動で付ける */
.entry-content blockquote cite::before {
    content: "— ";
}

/* =========================================
   CVボタン（アフィリエイトリンク）全体
========================================= */
.cv-button-container {
    text-align: center;
    margin: 3.5em 0; 
}

/* --- マイクロコピー（段落ブロック用） --- */
.cv-microcopy {
    display: inline-block;
    font-size: 0.95em !important; /* 少しだけ大きく */
    font-weight: bold;
    color: #6a9184; 
    margin: 0 0 6px 0 !important;
    letter-spacing: 0.05em !important;
}

/* --- サブコピー（ボタンの下：強烈な安心感） --- */
.cv-subcopy {
    display: block;
    font-size: 0.85em !important; /* 上よりは少し小さめ */
    font-weight: bold;
    color: #d9756b; /* 読者の不安を消す重要なお知らせなので、あえて「くすみコーラル」にして目立たせます */
    margin: 10px 0 0 0 !important;
    letter-spacing: 0.03em !important;
    line-height: 1.4 !important;
}

/* --- ボタン本体（カスタムHTMLを囲むグループ用） --- */
.cv-button-inner a {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 360px;
    padding: 18px 20px;
    /* 少し明るいグリーンから、基本のくすみグリーンへのグラデーション */
    background: linear-gradient(135deg, #9ac1b5, var(--secondary-color));
    color: var(--white) !important;
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px;
    /* 影の色をくすみグリーンのRGB（127, 169, 155）に変更 */
    box-shadow: 0 6px 15px rgba(127, 169, 155, 0.4);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}



/* --- タップ時の動き --- */
.cv-button-inner a:hover {
    transform: translateY(2px);
    /* ホバー時の影の色もグリーン系に変更 */
    box-shadow: 0 2px 8px rgba(127, 169, 155, 0.6);
}

/* --- キラッと光るアニメーション --- */
.cv-button-inner a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    animation: shine-effect 3s infinite;
}

@keyframes shine-effect {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; }
}

/* --- ASPの計測用1px画像の無力化 --- */
.cv-button-inner img {
    border: none !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================
   PR表記（ステマ規制対応）
========================================= */
.pr-notice {
    font-size: 0.8em;
    color: #888888; /* 目立ちすぎない薄いグレー */
    background-color: var(--white);
    border: 1px solid var(--light-gray);
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 2.5em; /* 本文との間にしっかり余白を取る */
    text-align: center;
}

/* スマホ表示の微調整 */
@media screen and (max-width: 767px) {
    .pr-notice {
        font-size: 0.75em;
        text-align: left; /* スマホでは左寄せの方が読みやすいです */
    }
}

/* =========================================
   画像・動画のキャプション
========================================= */
.wp-block-image figcaption,
.wp-block-video figcaption {
    color: var(--secondary-color); /* サイトのアクセントカラー（くすみグリーン） */
    font-size: 0.85em; /* 本文より少し小さくして控えめに */
    font-weight: bold; /* 色を薄くする分、太字にして読みやすく */
    text-align: center; /* 画像の中央に揃える */
    margin-top: 8px; /* 画像とキャプションの間の余白 */
    margin-bottom: 1.5em; /* 下の本文との間の余白 */
    letter-spacing: 0.05em; /* 少し文字の間隔を空けて上品に */
}

/* キャプションの頭にさりげない記号（▲）をつける */
.wp-block-image figcaption::before,
.wp-block-video figcaption::before {
    content: "▲ ";
    font-size: 0.8em;
    opacity: 0.7; /* 記号だけ少し色を薄くする */
}

.lyte-wrapper {
	margin: 1.5em 0 !important;
}


/* =========================================
   コンタクトフォーム7のデザイン
========================================= */
.custom-contact-form {
    max-width: 700px;
    margin: 0 auto; /* フォーム全体を中央寄せ */
}

.custom-contact-form .form-group {
    margin-bottom: 25px; /* 各項目の間の余白 */
}

/* ラベル（見出し）の設定 */
.custom-contact-form label {
    display: block;
    font-weight: bold;
    color: var(--text-color);
    margin-bottom: 8px;
    font-size: 15px;
}

/* 「必須」バッジのデザイン */
.custom-contact-form .required-badge {
    display: inline-block;
    background-color: #d9756b; /* 以前使った安心のくすみコーラル */
    color: #ffffff;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
    letter-spacing: 0.05em;
}

/* 入力欄（テキストボックス・テキストエリア）のデザイン */
.custom-contact-form input[type="text"],
.custom-contact-form input[type="email"],
.custom-contact-form textarea {
    width: 100%;
    max-width: 100%; /* 画面外への飛び出しを防ぐ */
    padding: 12px 10px; /* 左右の余白を15pxから10pxに減らし、文字の入るスペースを広げる */
    border: 1px solid var(--light-gray);
    border-radius: 6px;
    background-color: #fafafa;
    color: var(--text-color);
    font-size: 16px !important; /* スマホズーム防止（維持） */
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* 例文（プレースホルダー）の文字サイズだけを少し小さくして、はみ出しを防ぐ */
.custom-contact-form ::placeholder {
    font-size: 14px;
    color: #aaaaaa;
    line-height: 1.5;
}

/* 念のため、古いスマホブラウザ用にも同じ設定を入れる */
.custom-contact-form ::-webkit-input-placeholder {
    font-size: 14px;
    line-height: 1.5;
}

.custom-contact-form textarea {
    height: 200px; /* メッセージ欄は最初から広めに */
    resize: vertical; /* 縦方向のみリサイズ可能にする */
}

/* 入力欄を選択中（フォーカス時）のデザイン */
.custom-contact-form input:focus,
.custom-contact-form textarea:focus {
    outline: none;
    background-color: #ffffff;
    border-color: var(--secondary-color); /* くすみグリーンでハイライト */
    box-shadow: 0 0 0 3px rgba(127, 169, 155, 0.2); /* ふわっと光るエフェクト */
}

/* 送信ボタンのラッパー */
.form-submit-wrap {
    text-align: center;
    margin-top: 40px;
}

/* 送信ボタン本体のデザイン */
.custom-contact-form input[type="submit"] {
    background-color: var(--secondary-color); /* くすみグリーン */
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    padding: 16px 50px;
    border: none;
    border-radius: 30px; /* 丸みを持たせて優しい印象に */
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 100%; /* スマホでは横幅いっぱいに */
    max-width: 320px; /* PCでは大きくなりすぎないように制限 */
}

.custom-contact-form input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    opacity: 0.9;
}

/* =========================================
   Easy Table of Contents (目次) のデザイン
========================================= */
/* =========================================
   Easy Table of Contents (目次) のデザイン (完全版)
========================================= */
#ez-toc-container {
    background-color: #fafafa; /* 全体の優しい背景色 */
    border: 1px solid var(--light-gray);
    border-radius: 12px; /* 角を大きく丸くして親しみやすく */
    padding: 0;
    margin: 2.5em auto;
    width: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); /* ふんわりとした上品な影 */
    overflow: hidden; /* 角丸からはみ出るのを防ぐ */
}

/* 目次のタイトル部分（中央寄せ ＆ ボタンの視認性アップ） */
#ez-toc-container .ez-toc-title-container {
    background-color: var(--secondary-color); /* くすみグリーン */
    padding: 16px 20px;
    text-align: center; /* タイトルを真ん中に */
    position: relative; /* ボタンを右端に固定するための基準 */
    display: block; /* タイトルとボタンが重ならないように */
}

#ez-toc-container .ez-toc-title {
    color: #ffffff;
    font-size: 18px !important;
    font-weight: bold !important;
    margin: 0;
    letter-spacing: 0.05em;
    display: inline-block; /* タイトル自体を中央寄せに */
}

/* 開閉ボタンを右端に固定 */
#ez-toc-container .ez-toc-title-toggle {
    position: absolute;
    right: 15px; /* 右端からの余白（前回の修正値） */
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
}

/* =========================================
   修正点：しぶといボーダーの完全消去 ＆ 位置調整
========================================= */
/* <a> タグ、デベロッパーツールで特定した .ez-toc-js-icon-con のボーダー、背景色を完全に無効化 */
#ez-toc-container .ez-toc-title-toggle a.ez-toc-btn,
#ez-toc-container .ez-toc-title-toggle .ez-toc-js-icon-con {
    border: none !important; /* ★ここを狙い撃ち（image_9.pngのボーダーを消去） */
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important; /* image_9.pngの固定幅をリセット */
}

/* デフォルトのSVGアイコン（リストマークと矢印）を隠す */
#ez-toc-container .ez-toc-icon-toggle-span svg {
    display: none !important;
}

/* 代わりに日本語のテキストを表示する */
#ez-toc-container .ez-toc-icon-toggle-span::after {
    content: "開閉 ↕"; /* お好みで書き換え可能 */
    color: #ffffff !important;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.05em;
    display: inline-block;
    vertical-align: middle;
    /* ★修正点：開閉ボタンが右端すぎるので、右側の余白を追加 */
    margin-right: 16px; /* ここの値を調整して位置を決めます */
}

/* =========================================
   リスト（見出し）のデザイン (前回の修正を維持)
========================================= */
/* リスト全体の余白 */
#ez-toc-container nav {
    padding: 24px 20px;
}

/* デフォルトのリスト装飾をリセット */
#ez-toc-container ul {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

/* H2（大見出し）のデザイン */
#ez-toc-container ul.ez-toc-list > li {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--light-gray); /* 見出しと見出しの区切りを点線に */
}

#ez-toc-container ul.ez-toc-list > li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

#ez-toc-container ul.ez-toc-list > li > a {
    color: var(--text-color);
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
    display: block;
    position: relative;
    padding-left: 22px; /* アイコンの分の余白 */
    transition: all 0.3s ease;
}

/* H2の頭にアイコン（▶︎）をつける */
#ez-toc-container ul.ez-toc-list > li > a::before {
    content: "▶︎";
    color: var(--secondary-color); /* くすみグリーン */
    position: absolute;
    left: 0;
    font-size: 12px;
    top: 3px;
}

/* H3（小見出し）のデザイン (前回の修正を維持) */
#ez-toc-container ul.ez-toc-list li ul {
    margin-top: 12px;
    margin-bottom: 0;
    padding-left: 5px !important; /* H2よりも少し右にずらして階層を分かりやすく（前回の修正値） */
}

/* プラグイン特有の余計な余白も強制リセット */
#ez-toc-container ul.ez-toc-list li ul li {
    margin-bottom: 10px;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

#ez-toc-container ul.ez-toc-list li ul li a {
    color: var(--text-color);
    font-size: 14px;
    text-decoration: none;
    opacity: 0.8; /* H2より少し色を薄くして控えめに */
    transition: all 0.3s ease;
}

/* マウスオーバー時（タップ時）のアクション */
#ez-toc-container ul.ez-toc-list li a:hover {
    color: var(--primary-color); /* くすみコーラル色に変化 */
    opacity: 1;
}