/* フローティングボタン */
.fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #FF5722;
    color: white;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    z-index: 1000;
}

/* PC向け（768px以上） */
@media screen and (min-width: 768px) {
  .comment-popup {
    position: fixed;
    bottom: 0;
    right: 20px; /* 右端に寄せる。空けたい余白に合わせて数値を変えてください */
    width: 700px; /* 600pxより少し大きく */
    max-height: 80vh;
    background-color: #fff;
    border-radius: 10px 10px 0 0; /* 上辺のみ角丸 */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s ease-in-out;
    z-index: 2000;
    display: flex;
    flex-direction: column;

    /* 初期状態は画面外(下)へ飛ばしておく */
    transform: translateY(100%);
  }

  .comment-popup.active {
    transform: translateY(0);
  }
}

/* スマホ用（768px未満） */
@media screen and (max-width: 767px) {
  .comment-popup {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 80vh;
    border-radius: 0;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 2000;
    display: flex;
    flex-direction: column;
  }
  .comment-popup.active {
    transform: translateY(0);
  }
}


/* スマホ用 */
@media screen and (max-width: 768px) {
    .comment-popup {
        left: 0;
        width: 100%;
        transform: translateY(100%);
        border-radius: 0;
    }
    .comment-popup.active {
        transform: translateY(0);
    }
}


/* ヘッダー部分 */
.comment-popup-header {
    background-color: #336600;
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    position: relative;
    z-index: 1000;
}



/* コメントリスト */
.comment-popup .comments-list {
    background: none;
    border: none;
    color: #555;
    font-size: 18px;
    cursor: pointer;
}

/* コメントアイテム全体 */
.comment-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

/* ユーザーアイコン */
.avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
}

/* コメントテキスト部分 */
.comment-content {
    flex: 1;
}

/* ユーザーネーム */
.username {
    font-weight: bold;
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
    display: block;
}

/* コメントテキスト */
.comment-text {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    font-family: Arial, sans-serif;
}

/* コメント入力エリア */
.comment-input {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    border-top: 1px solid #ddd;
    background-color: white;
}

/* 入力フィールド */
.comment-input textarea {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    resize: none;
    font-size: 14px;
    background-color: #f9f9f9;
}

/* 投稿ボタン */
.comment-input button {
    margin-left: 10px;
    padding: 10px 20px;
    background-color: #336600;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.comment-input button:hover {
    background-color: #2a4f00;
}

/* 閉じるボタン */
.close-popup-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-popup-btn:hover {
    color: #f0f0f0;
}



/* 返信のスタイル */
.comment-reply {
    margin-left: 50px; /* インデントして表示 */
    margin-bottom: 15px;
}

.comment-reply .avatar {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    flex-shrink: 0;
    object-fit: cover;
}

.comment-reply .comment-main {
    display: flex;
}

.comment-reply .comment-body {
    flex: 1;
}

.comment-reply .comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comment-reply .username {
    font-weight: bold;
    font-size: 14px;
}

.comment-reply .like-section {
    display: flex;
    align-items: center;
}

.comment-reply .like-button {
    color: #336600;
    cursor: pointer;
    text-decoration: none;
    font-size: 16px;
    margin-right: 5px;
}

.comment-reply .like-count {
    font-size: 14px;
}

.comment-reply .comment-text {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    line-height: 1.4;
}

/* 返信リンクの表示を強制 */
.reply-link {
    display: inline-block !important;
    color: #0073aa;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}

.reply-link:hover {
    text-decoration: underline;
}



body.single aside.p-sidebar.l-secondary {
    display: none !important;
}

body.single .p-entry {
    width: 100% !important;
}


.single .p-entry figure,
.single .p-entry .wp-block-image {
    display: flex;
    flex-direction: column;  /* 要素を縦方向に並べる */
    align-items: center;  /* 中央揃え */
}

.single .p-entry figcaption {
    text-align: center;  /* キャプションを中央揃え */
    margin-top: 5px;  /* 画像との間隔を少し開ける */
    font-size: 14px;  /* キャプションの文字サイズ調整 */
    color: #666;  /* キャプションの色を少しグレーに */
}



/* 目次全体のデザイン */
.toc {
    background: #f8f9fa;  /* 薄いグレーの背景 */
    border: 2px solid #ddd; /* 枠線 */
    padding: 15px;
    border-radius: 8px; /* 角丸 */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
    max-width: 600px; /* 幅を制限 */
    margin: 20px auto; /* ページ中央に配置 */
}

/* 目次タイトル（Index） */
.toc-title {
    font-size: 50px;
    font-weight: bold;
    text-align: center;
    color: #333;
    margin-bottom: 10px;
}

/* 目次のリストデザイン */
.toc ul {
    list-style-type: none; /* デフォルトのリストマークを削除 */
    padding-left: 0;
}

.toc ul li {
    padding: 5px 10px;
    border-bottom: 1px solid #ddd; /* 各項目の区切り線 */
}

.toc ul li:last-child {
    border-bottom: none;
}

/* 目次のリンク */
.toc ul li a {
    text-decoration: none;
    color: #0073aa; /* WordPress風の青 */
    font-weight: bold;
}

.toc ul li a:hover {
    color: #005580; /* ホバー時に濃い青 */
    text-decoration: underline;
}

.header-title a {
    color: #FFFFEE !important; /* 重要度を上げる */
}

@media screen and (max-width: 480px) {
    .header-title a {
        color: #FFFFEE !important;
    }
}

 

/* 1. プロフィール画像の修正（完全に丸く表示） */
.p-author__thumbnail {
    text-align: center; /* 画像を中央に */
    margin-bottom: 20px;
}

.p-author__thumbnail img {
    width: 180px;
    height: 180px;
    border-radius: 50%; /* 丸くする */
    object-fit: cover; /* 画像の比率を維持 */
    display: block;
    max-width: 100%;
}

/* 2. 各セクションに黒い枠を適用 */
.p-author__body,
.p-author__follow-stats,
.p-author__comments {
    border: 2px solid black;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    background-color: #fff; /* 背景を白に */
}

/* 3. 自己紹介文の左寄せ */
.p-author__body p {
    text-align: left;
    line-height: 1.6; /* 行間を少し広げて読みやすく */
}

/* 4. 最近のコメントのデザイン改善 */
.p-author__comments ul {
    padding: 0;
    margin: 0;
    list-style: none; /* マーカーを削除 */
}

.p-author__comments .comment-item {
    display: flex;
    align-items: center;
    gap: 15px; /* 画像とテキストの間隔 */
    padding: 15px 10px;
    border-bottom: 1px solid #ddd; /* コメントの区切り線 */
}

/* 5. 記事のアイキャッチ画像 */
.p-author__comments .comment-item img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 5px;
}

/* 6. コメントのテキスト部分の調整 */
.p-author__comments .comment-text {
    flex: 1;
    min-width: 0;
}

/* 7. 記事タイトルのデザインを強化 */
.comment-title {
    font-weight: bold;
    font-size: 14px;
}

.comment-title a {
    color: #0073aa; /* 青系の色 */
    text-decoration: none;
    transition: all 0.3s ease;
}

.comment-title a:hover {
    text-decoration: underline;
}

/* 8. フォローステータスのデザイン調整 */
.p-author__follow-stats {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

/* 1. プロフィール画像の円形を正しく表示 */
.p-author__thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden; /* 画像がはみ出ないようにする */
    background-color: #fff; /* 背景を白に */
    margin: 0 auto;
}

.p-author__thumbnail img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    display: block;
}

/* 2. フォロー・フォロワー数のデザイン統一 */
.p-author__follow-stats {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

/* 3. 自己紹介文を左寄せ */
.p-author__body p {
    text-align: left;
}

/* 4. コメントエリアのレイアウト調整 */
.p-author__comments {
    padding: 20px;
    border: 2px solid black;
    border-radius: 10px;
    background-color: #fff;
}

.p-author__comments ul {
    padding: 0;
    margin: 0;
}

.p-author__comments .comment-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 10px;
    border-bottom: 1px solid #ddd;
}

/* 5. コメント内の画像（記事サムネイル） */
.p-author__comments .comment-item img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 5px;
}

/* 6. コメントのテキスト部分 */
.p-author__comments .comment-text {
    flex: 1;
    min-width: 0;
}

/* 7. 記事タイトルのデザイン */
.comment-title {
    font-weight: bold;
    font-size: 14px;
}

.comment-title a {
    color: #0073aa;
    text-decoration: none;
    transition: all 0.3s ease;
}

.comment-title a:hover {
    text-decoration: underline;
}

/* 8. プロフィール編集ボタンのデザイン */
.p-author__edit {
    text-align: center;
}

.p-author__edit a {
    display: inline-block;
    padding: 12px 20px;
    background-color: #28a745;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    transition: 0.3s ease;
    font-weight: bold;
}

.p-author__edit a:hover {
    background-color: #218838;
}

/* 9. Gravatarのホバーカードを無効化 */
img.avatar {
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    display: block;
    pointer-events: none;
}


/* 1. コメント欄の余白を増やす */
.p-author__comments {
    padding: 20px;
    border: 2px solid black;
    border-radius: 10px;
    background-color: #fff;
    max-width: 100%;
}

/* 2. コメントテキストの調整 */
.p-author__comments .comment-text p {
    white-space: normal; /* テキストの折り返しを有効化 */
    word-break: break-word; /* 長い単語で折り返し */
    font-size: 14px;
    line-height: 1.6;
}



/* 記事タイトル（PC用） */
.p-entry__title {
    font-size: 40px !important; /* 記事タイトルを大きく */
    color: #333 !important; /* 文字色 */
    font-weight: bold;
}

/* 記事本文の文字サイズ（PC用） */
.p-entry__body p, 
.entry-content, 
.post-content, 
article, 
body .entry-content, 
body .post-content, 
body article {
    font-size: 32px !important; /* 文字を大きく */
    line-height: 1.8 !important; /* 行間を広めに */
    color: #333 !important;
}

/* 記事内リストの文字サイズ */
.p-entry__body ul, .p-entry__body ol,
.entry-content ul, .entry-content ol,
.post-content ul, .post-content ol,
article ul, article ol {
    font-size: 32px !important;
    line-height: 1.8 !important;
}

/* 見出しのフォントサイズ */
.wp-block-heading, 
.p-entry__body h1, 
.p-entry__body h2, 
.p-entry__body h3, 
.entry-content h1, 
.entry-content h2, 
.entry-content h3 {
    font-size: 36px !important; /* 見出しを大きく */
    font-weight: bold;
    line-height: 1.5 !important;
}

/* 目次の文字サイズ */
.toc {
    font-size: 24px !important; /* 目次全体のフォントサイズ */
}

.toc-title {
    font-size: 32px !important; /* 目次タイトル */
    font-weight: bold;
}

.toc ul li {
    font-size: 24px !important; /* 目次のリストのフォントサイズ */
}

/* 画像の最大幅を調整 */
.wp-block-image img {
    max-width: 100%;
    height: auto;
}

/* タブレット用の調整 */
@media screen and (max-width: 1024px) {
    .p-entry__title {
        font-size: 36px !important;
    }

    .p-entry__body p, 
    .entry-content, 
    .post-content, 
    article {
        font-size: 28px !important;
    }

    .p-entry__body ul, .p-entry__body ol,
    .entry-content ul, .entry-content ol,
    .post-content ul, .post-content ol,
    article ul, article ol {
        font-size: 28px !important;
    }

    .wp-block-heading, 
    .p-entry__body h1, 
    .p-entry__body h2, 
    .p-entry__body h3 {
        font-size: 32px !important;
    }

    .toc {
        font-size: 22px !important;
    }

    .toc-title {
        font-size: 28px !important;
    }

    .toc ul li {
        font-size: 22px !important;
    }
}

/* スマホ用の調整 */
@media screen and (max-width: 768px) {
    .p-entry__title {
        font-size: 32px !important;
    }

    .p-entry__body p, 
    .entry-content, 
    .post-content, 
    article {
        font-size: 26px !important;
    }

    .p-entry__body ul, .p-entry__body ol,
    .entry-content ul, .entry-content ol,
    .post-content ul, .post-content ol,
    article ul, article ol {
        font-size: 26px !important;
    }

    .wp-block-heading, 
    .p-entry__body h1, 
    .p-entry__body h2, 
    .p-entry__body h3 {
        font-size: 28px !important;
    }

    .toc {
        font-size: 20px !important;
    }

    .toc-title {
        font-size: 24px !important;
    }

    .toc ul li {
        font-size: 20px !important;
    }
}


/* Chart.js のキャンバス全体を包むラッパ要素がある場合 */
幅を制限する例 */
  margin: 40px auto;
  position: relative;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  background: #fafafa;
}

.chart-container:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
/* キャンバス自体の初期スタイル */
.chart-container canvas {
  display: block;
  width: 100% !important;   /* 念のためレスポンシブを確実にする */
  height: auto !important;
}

/* タイトル部分の余白を少し調整（Chart.js が描画するタイトルより少し余白を広める例） */
.chart-container h2,
.chart-container .chart-title {
  text-align: center;
  margin-bottom: 1em;
  font-weight: bold;
}

/* ホバーしたら少し影が強調される例 */
.chart-container:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}


/* responsive-featured クラスが付いた画像だけ幅100%に */
.responsive-featured img {
  width: 100%;
  height: auto;
  display: block;
}


.wp-quads-shortcode .quads-image img {
  width: 728px !important;
  height: auto !important;
}