@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.8
*/

/* ======================================================================
   たださんぽ / Cocoon子テーマ カスタムCSS
   ======================================================================
   【管理メモ】
   ・テーマの見た目を機能別に整理。旧CSSの上書き・重複を統合。
   ・原則として、現在のPC・スマホの表示を維持する。
   ・このファイルは子テーマのstyle.cssとして使用することを想定。
   ・変更前のstyle.cssを必ずバックアップすること。

   【配色】
   文字のブラウン       #382f29（ロゴに近い濃い茶色）
   ホバーのブラウン     #705b4c
   足あと系ベージュ     #b9a591
   見出しの縦線         #d3beaa
   H2の淡い背景         #fcfaf8

   【画面幅の使い分け】
   480px以下：Cocoon由来の小さな画面向け調整
   767px以下：スマホ向けのメニュー・タイトル・シェアなど
   834px以下：内部ブログカードの調整
   769px以上：記事一覧のPC向けカラム調整

   ※上記の境界値は元CSSのまま。統一のために変更していません。
   ====================================================================== */


/* ======================================================================
   01. ヘッダー・ロゴ・キャッチフレーズ
   ====================================================================== */

/* ロゴ全体の上側の余白 */
#header-in {
    margin-top: 15px;
}

/* サイト説明文（キャッチフレーズ）のサイズ・色 */
#header .tagline {
    font-size: 16px;
    font-weight: bold;
    color: #555;
}

/* ロゴ画像の上下余白 */
.logo-image {
    padding: 4px 0;
    font-size: inherit;
}

/* キャッチフレーズをリンクにしたとき、色・下線を変えない */
.tagline-home-link,
.tagline-home-link:hover {
    color: inherit;
    text-decoration: none;
}

/* 小さいスマホではキャッチフレーズ下の余白を縮める */
@media screen and (max-width: 480px) {
    .tagline {
        margin-bottom: 16px;
    }
}

/* スマホでキャッチフレーズが2行になったときの行間 */
@media screen and (max-width: 767px) {
    #header .tagline {
        line-height: 1.4;
    }
}


/* ======================================================================
   02. グローバルメニュー（ヘッダーの地域名メニュー）
   ====================================================================== */

/* メニュー本体の背景と最大幅 */
#navi {
    background: #fff;
    border: none;
}

#navi .navi-in {
    max-width: 1000px;
    margin: 0 auto;
}

/* PCでは横一列に並べる */
#navi .navi-in > ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 14px 0 8px;
}

#navi .navi-in > ul > li {
    flex: 1;
    text-align: center;
}

/* PCでは2項目目以降の左側に区切り線 */
#navi .navi-in > ul > li + li {
    border-left: 1px solid #ddd;
}

/* メニューリンクの文字・配置 */
#navi .navi-in > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    color: #444;
    font-size: 16.5px;
    font-weight: 500;
    text-decoration: none;
}

#navi .navi-in > ul > li > a:hover {
    color: #111;
    background: transparent;
}

/* スマホ：3列×2段のメニュー。区切り線はメニュー全体に描画する。 */
@media screen and (max-width: 767px) {

    #navi .navi-in > ul {
        /* 行の高さ・段の間隔をここで管理 */
        --mobile-navi-row-height: 26px;
        --mobile-navi-row-gap: 8px;
        position: relative; /* 区切り線をメニュー全体に配置する基準 */
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(2, var(--mobile-navi-row-height));
        column-gap: 0;
        row-gap: var(--mobile-navi-row-gap);
        padding: 2px 0;
    }

    #navi .navi-in > ul > li {
        width: auto;
        min-width: 0;
        min-height: 0;
        height: var(--mobile-navi-row-height);
        margin: 0;
        padding: 0;
        border: none;
        background: none;
    }

    /*
     * 左右の区切り線をメニュー全体に2本配置。
     * それぞれの線に、上下24pxずつの同じ長さの部分を描く。
     * liの高さや背景に影響されないため、上下段で長さがずれない。
     */
    #navi .navi-in > ul::before,
    #navi .navi-in > ul::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 1px;
        pointer-events: none;
        z-index: 1;
        background-image:
            linear-gradient(#ddd, #ddd),
            linear-gradient(#ddd, #ddd);
        background-repeat: no-repeat;
        background-size: 1px 24px, 1px 24px;
        /* 24pxの線を各26px行の中央へ。row-gap変更にも追従。 */
        background-position:
            left 3px,
            left calc(3px + var(--mobile-navi-row-height) + var(--mobile-navi-row-gap));
    }

    #navi .navi-in > ul::before {
        left: 33.333333%;
    }

    #navi .navi-in > ul::after {
        left: 66.666667%;
    }

    /* Cocoon標準のリンク高さを解除し、文字を各マスの上下中央へ */
    #navi .navi-in > ul > li > a {
        height: var(--mobile-navi-row-height) !important;
        min-height: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 0 4px;
        line-height: 1.3;
        white-space: nowrap;
        font-size: 15px;
    }

    /* メニューの下に続く本文領域を20px上へ寄せる（元の指定を維持） */
    #content {
        margin-top: -20px;
    }
}


/* ======================================================================
   03. パンくずリスト・メインコンテンツ
   ====================================================================== */

/* もともと2か所にあった.breadcrumbを、後勝ちの値に統一 */
.breadcrumb {
    margin: 0 4em 1em 0;
    color: var(--cocoon-x-pallid-text-color);
    font-size: 13px;
}

/* Cocoonのコンテンツ全体の上余白をなくす */
.content {
    margin-top: 0;
}

/* スマホではパンくずを省略記号「…」にせず、全文を自然に折り返す */
@media screen and (max-width: 767px) {
    .breadcrumb {
        margin-right: 0;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* 記事名を強制的に次の行へ送らず、空いた場所から続けて表示 */
    .single .breadcrumb .breadcrumb-item:last-child {
        display: inline;
        margin-top: 0;
        white-space: normal;
    }
}


/* ======================================================================
   04. 記事タイトル・メタ情報・カテゴリー・タグ
   ====================================================================== */

/* 記事・アーカイブ見出しの下余白 */
.entry-title,
.archive-title {
    margin-bottom: 24px;
}

/* 投稿日などを含むヘッダー情報の下余白 */
.article-header .date-tags {
    margin-bottom: 2em;
}

/* PR表記 */
.pr-label-s {
    left: 20px;
    border: none;
    font-size: 14px;
    color: var(--cocoon-x-pallid-text-color);
    padding: 0 0 0 4px;
}

/* 記事タイトル直下に出るカテゴリー・タグだけを非表示 */
.single .entry-header .entry-categories-tags {
    display: none !important;
}

/* タグの区切り文字の右余白 */
.entry-tags .cus_tags-string {
    margin-right: 6px;
}

/* 小さいスマホでのタイトル・PR表記 */
@media screen and (max-width: 480px) {
    .pr-label-s {
        left: 8px;
    }

    /* .article h1.entry-titleの文字サイズは、下の767px指定が優先 */
    .entry-title {
        font-size: 26px;
        padding: 10px 0 5px;
    }
}

/* スマホの投稿タイトル（H1）の文字サイズ・行間 */
@media screen and (max-width: 767px) {
    .article h1.entry-title {
        font-size: 21px;
        line-height: 1.4;
    }
}


/* ======================================================================
   05. 記事本文（見出し・テキスト・コード）
   ====================================================================== */

/* H2：淡い背景にベージュの縦線 */
.article h2 {
    font-size: 22px;
    margin-top: 40px;
    margin-bottom: 20px;
    padding: 20px;
    border-left: solid 5px #d3beaa;
    background-color: #fcfaf8;
    color: var(--cocoon-text-color);
}

/* H3：左側に縦線、下側に点線 */
.article h3 {
    color: var(--cocoon-text-color);
    border: none;
    padding: 0.2em 0.5em;
    border-left: solid 5px #d3beaa;
    border-bottom: 1px dashed rgba(185, 165, 145, .65);
}

/* H4：下側の点線のみ */
.article h4 {
    color: var(--cocoon-text-color);
    border: none;
    border-bottom: dashed 1px rgba(185, 165, 145, .65);
}

/* H5・H6は装飾罫線を使用しない */
.article h5,
.article h6 {
    border: none;
}

/* ソースコード等で長い文字列がはみ出さないようにする */
.entry-content pre {
    white-space: pre-wrap;
    word-break: break-all;
}

/* 本文で部分的に小さい文字を使うためのクラス */
.mini {
    font-size: 80%;
    padding-bottom: 10px;
}

/* 小さいスマホでは本文直下の要素の行間を調整 */
@media screen and (max-width: 480px) {
    .entry-content > * {
        line-height: 1.5em;
    }
}

/* スマホのH2だけ小さくし、背景枠の余白も縮める */
@media screen and (max-width: 767px) {
    .article h2 {
        font-size: 19px;
        line-height: 1.4;
        padding-top: 10px;
		padding-bottom: 12px;
    }
}


/* ======================================================================
   06. 引用ブロック
   ====================================================================== */

blockquote {
    position: relative;
    padding: 2em 3em;
    box-sizing: border-box;
    font-style: italic;
    color: #555;
    background: #f8f5f1;
    border: 0;
    margin-bottom: 0 !important;
    border-radius: 10px;
}

/* 引用開始・引用終了のアイコン。共通のスタイルだけをまとめる */
blockquote::before,
blockquote::after {
    display: inline-block;
    position: absolute;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #b9a591;
    font-size: 20px;
    line-height: 1;
}

blockquote::before {
    top: 15px;
    left: 20px;
    content: '\f10d';
}

blockquote::after {
    bottom: 15px;
    right: 20px;
    text-align: center;
    content: '\f10e';
}

blockquote p {
    font-size: 0.95em;
    line-height: 1.6em;
}

blockquote cite {
    position: relative;
    z-index: 3;
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}


/* ======================================================================
   07. 目次
   ====================================================================== */

/* 目次全体の余白と角丸 */
.entry-content .toc {
    margin-top: 70px;
    border-radius: 15px;
    padding-bottom: 30px;
    margin-bottom: 100px;
    border-color: #ccc;
}

.toc-title {
    font-size: 16px;
    font-weight: 600;
}

/* 目次項目間の余白を詰める */
#toc .toc-list li {
    margin-bottom: 0;
}

#toc .toc-list ol {
    margin-top: 0;
}


/* ======================================================================
   08. 埋め込み動画・Googleマップ
   ====================================================================== */

/* Googleマップを横幅いっぱい、4:3で表示 */
.entry-content iframe[src*="google.com/maps/embed"] {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    border: 0;
}

/* CocoonのYouTube埋め込みの最大幅制限を外す */
.entry-content .video-container {
    width: 100%;
    max-width: none;
}


/* ======================================================================
   09. テーブル（汎用・海抜・店舗紹介）
   ====================================================================== */

/* 汎用テーブル */
table caption {
    font-weight: bold;
}

table th,
table td {
    text-align: center;
    border: 1px solid #ddd;
}

table th {
    background-color: #f8f5f1;
}

table tr:nth-of-type(2n+1) {
    background-color: #fafbfc;
}

/* 指定された列だけを左寄せにする補助クラス */
.tbl-col1-left tr td:nth-child(1),
.tbl-col2-left tr td:nth-child(2),
.tbl-col3-left tr td:nth-child(3),
.tbl-col4-left tr td:nth-child(4) {
    text-align: left;
}

/* 指定された列だけを右寄せにする補助クラス */
.tbl-col1-right tr td:nth-child(1),
.tbl-col2-right tr td:nth-child(2),
.tbl-col3-right tr td:nth-child(3),
.tbl-col4-right tr td:nth-child(4) {
    text-align: right;
}

/* 海抜表の列幅（3列タイプ） */
.asl-tbl tr:nth-child(1) th:nth-child(1) {
    width: 40%;
}

.asl-tbl tr:nth-child(1) th:nth-child(2) {
    width: 20%;
}

.asl-tbl tr:nth-child(3) th:nth-child(3) {
    width: 50%;
}

.asl-tbl tr td:nth-child(1),
.asl-tbl tr td:nth-child(3) {
    text-align: left;
}

/* 海抜表の列幅（2列タイプ） */
.asl-tbl2 tr:nth-child(1) th:nth-child(1) {
    width: 70%;
}

.asl-tbl2 tr:nth-child(1) th:nth-child(2) {
    width: 30%;
}

.asl-tbl2 tr td:nth-child(1) {
    text-align: left;
}

/* 店舗紹介用の2列テーブル */
.store-intro tr td:nth-child(1) {
    width: 25%;
    text-align: center;
}

.store-intro tr td:nth-child(2) {
    width: 75%;
    text-align: left;
}


/* ======================================================================
   10. 記事一覧カード（トップ・カテゴリー・アーカイブ）
   ====================================================================== */

/* 画像の上に載るカテゴリーラベルを非表示 */
.cat-label {
    display: none;
}

/* 標準の記事一覧カードの画像幅と本文の横位置 */
.entry-card-thumb {
    width: 230px;
}

.entry-card-content {
    margin-left: 250px;
}

/* 記事画像の角丸（画像本体と外側の両方に適用） */
.entry-card-thumb,
.entry-card-thumb img {
    border-radius: 6px;
    overflow: hidden;
}

/* 一覧カードの下線は現在「なし」。余白だけ残す */
.entry-card {
    padding-bottom: 9px;
    border-bottom: none;
}

/* 記事タイトル。重複していた行間・下余白を後勝ちの値に統合 */
h2.entry-card-title {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 8px;
}

.entry-card-title {
    margin-top: 0;
}

/* 各カードの外側余白 */
.entry-card-wrap {
    padding: 0;
    margin-bottom: 6px;
}

/* ホバー時は背景を変えず、文字だけ茶色に */
.a-wrap:hover {
    color: #705b4c;
    background: none;
}

/* 投稿日横の時計アイコンは非表示 */
.entry-card-info span.post-date > .fa-clock {
    display: none;
}

.entry-date {
    font-size: 14px;
    color: #666 !important;
}

.entry-card-meta {
    bottom: 13px;
}

/* 縦型カードのタイトル・カテゴリー・日付 */
.ect-vertical-card .entry-card-title {
    font-size: 16.5px;
    font-weight: 600;
    margin-top: 4px;
}

.ect-vertical-card .entry-card-meta {
    padding-top: 0;
}

/* 画像とタイトルの間にカテゴリー名を配置 */
.entry-card-categorys {
    display: block;
    position: static;
    margin: 0;
    text-align: left;
}

.entry-card-categorys .entry-category {
    font-size: 15px;
    padding: 0;
}

/* PC向け：縦型カードの列間隔と3列カード幅 */
@media screen and (min-width: 769px) {
    .ect-vertical-card {
        column-gap: 8px;
    }

    .ect-3-columns .entry-card-wrap {
        width: calc((100% - 16px) / 3);
    }
}

/* 小さいスマホ向けの一覧表示 */
@media screen and (max-width: 480px) {
    .cat-label {
        font-size: 17px;
    }

    /* 画像をカード幅いっぱいに広げる */
    .entry-card-thumb {
        width: 100%;
    }

    h2.entry-card-title {
        font-size: 24px;
        margin-bottom: 8px; /* 元CSSでは後の共通指定が16pxを上書きしていた */
        clear: both;
    }

    .e-card-snippet {
        font-size: 22px;
    }

    .entry-card-meta {
        padding-top: 0;
        bottom: 0;
        position: static;
    }

    .e-card-info > span {
        margin-top: 10px;
    }
}

/* スマホの縦型カードだけ、タイトルを少し太く */
@media screen and (max-width: 767px) {
    .ect-vertical-card .entry-card-title {
        font-size: 17px;
        font-weight: 700;
        line-height: 1.4;
    }
}


/* ======================================================================
   11. 内部・外部ブログカード
   ====================================================================== */

/* 共通のブログカード背景・罫線 */
.blogcard {
    color: #555;
    border-color: rgba(185, 165, 145, .4) !important;
    background-color: rgba(185, 165, 145, .06);
    border-width: 1px;
}

.blogcard .blogcard-snippet {
    color: #333;
}

/* カードのフッター情報は表示しない */
.blogcard-footer {
    display: none;
}

.blogcard:hover {
    color: #705b4c;
    border-color: rgba(185, 165, 145, .65) !important;
    background-color: rgba(185, 165, 145, .06);
}

/* スマホ・タブレット幅：内部カードの画像と文字のバランスを調整 */
@media screen and (max-width: 834px) {

    /* サムネイルの画像幅（元の120pxから80%の96px） */
    .internal-blogcard .internal-blogcard-thumbnail {
        width: 96px;
    }

    /* 画像を縮めた分、右側テキストの開始位置も左へ移動 */
    .internal-blogcard .internal-blogcard-content {
        margin-left: 106px;
        padding-top: 4px; /* 元ファイルは「padding-top: px;」で無効 → 4pxに修正 */
        line-height: 1.4;
        min-height: 0; /* 説明文を消した後の不自然な空白を抑制 */
        max-height: none;
    }

    /* 記事タイトルを1.1倍程度に拡大し、下の余白を削除 */
    .internal-blogcard .internal-blogcard-title {
        font-size: 0.99em;
        margin-bottom: 0;
    }
}

/* スマホだけ内部ブログカードの本文冒頭（説明文）を非表示 */
@media screen and (max-width: 767px) {
    .blogcard-snippet.internal-blogcard-snippet {
        display: none !important;
    }
}


/* ======================================================================
   12. 関連記事・新着記事などのリスト
   ====================================================================== */

/* 関連記事のアイキャッチ画像だけ角を丸くする */
.related-entry-card-thumb,
.related-entry-card-thumb img {
    border-radius: 10px;
    overflow: hidden;
}

/* 新着記事一覧の外側の余白 */
.info-list {
    padding: 0 20px 6px;
}

/* 新着記事の各行 */
.info-list-item {
    margin: 14px 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.6;
}


/* ======================================================================
   13. ページネーション（ページ送り）
   ====================================================================== */

/* ページ番号・次へボタンの共通デザイン */
.pagination-next-link,
.pagination .page-numbers,
.numbers.dots {
    font-size: 19px;
    font-weight: 500;
    color: #444;
    border-color: rgba(185, 165, 145, .4);
    background-color: rgba(185, 165, 145, .06);
}

.pagination-next-link {
    width: 250px;
    margin: auto;
    padding: 7px;
    border-radius: 30px;
}

.pagination .page-numbers {
    border-radius: 50%;
}

/* 現在のページ・リンクにマウスを重ねたときの配色 */
.pagination .page-numbers:hover,
.pagination-next .pagination-next-link:hover,
.pager-numbers .page-numbers:hover,
.pager-links .page-prev-next:hover,
.pagination .current,
.pager-links span {
    background-color: #705b4c;
    color: #fff;
}

/* スマホではページ番号を減らして、タップしやすい大きさにする */
@media screen and (max-width: 767px) {
    .pagination > .page-numbers {
        display: none;
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
        margin: 0 3px;
        padding: 0;
        box-sizing: border-box;
        border-radius: 50%;
    }

    /* 戻る・進む・現在ページと前後の番号などを表示 */
    .pagination > .page-numbers.prev,
    .pagination > .page-numbers.next,
    .pagination > .page-numbers.current,
    .pagination > .page-numbers.prev + .page-numbers:not(.dots),
    .pagination > .page-numbers.current:first-child + .page-numbers:not(.dots),
    .pagination > .page-numbers:nth-last-child(2):not(.dots) {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


/* ======================================================================
   14. スマホの「もっと見る」ボタン
   ====================================================================== */

/* PCでは出さず、スマホのみ8件目以降に使用する */
.mobile-more-button {
    display: none;
}

@media screen and (max-width: 767px) {

    #list > .mobile-more-hidden {
        display: none !important;
    }

    #list > .mobile-more-button {
        display: block;
        flex: 0 0 100%;
        width: 100%;
        box-sizing: border-box;
        margin: 18px 0 22px;
        padding: 16px;
        border: 1px solid #ded1c4;
        border-radius: 999px;
        background: #fcfaf8;
        color: #333;
        font-size: 16px;
        text-align: center;
        cursor: pointer;
    }

    #list > .mobile-more-button:hover,
    #list > .mobile-more-button:focus-visible {
        background: #f7f3ee;
    }
}


/* ======================================================================
   15. シェアボタン・モバイル下部メニュー
   ====================================================================== */

/* モバイルの下部メニューに出す必要のないSNSを非表示 */
.share-menu-button .bluesky-button,
.share-menu-button .misskey-button,
.share-menu-button .linkedin-button {
    display: none;
}

/* 1カラムのシェアメニューを見やすく大きくする */
.share-menu-content .sns-share-buttons a {
    width: 46%;
}

.share-menu-content .sns-buttons a {
    font-size: 36px;
    height: 60px;
}

/* シェア・フォローメニューの縦位置 */
.share-menu-content,
.follow-menu-content {
    top: 40%;
}

/* SNSボタン同士の横間隔 */
.sns-share.ss-col-3 .sns-buttons {
    column-gap: 12px;
}

/* 画面下に固定される「メニュー・ホーム・検索…」のアイコンと文字色 */
.mobile-footer-menu-buttons .menu-icon,
.mobile-footer-menu-buttons .menu-caption {
    color: #473d35;
}

/* 記事下のSNSシェアボタンをスマホでは2列にする */
@media screen and (max-width: 767px) {
    #main .sns-share .sns-share-buttons {
        column-gap: 8px;
        row-gap: 8px;
    }

    #main .sns-share .sns-share-buttons > a {
        flex: 0 0 calc((100% - 8px) / 2);
        width: calc((100% - 8px) / 2);
        box-sizing: border-box;
    }

    #main .sns-share .sns-share-buttons .button-caption {
        font-size: 14px;
        margin-left: 5px;
    }
}


/* ======================================================================
   16. サイドバー（見出し・カテゴリー・各ウィジェット）
   ====================================================================== */

/* サイドバー全体の基本文字サイズ */
#sidebar {
    font-size: 16.5px;
    line-height: 1.8;
}

/* 「カテゴリー」など、サイドバーのH2 */
#sidebar h2 {
    background: #f7f3ee !important;
    color: var(--cocoon-text-color);
}

/* H3見出しは左側に細いベージュのラインを置く */
.sidebar h3 {
    background: #fff;
    position: relative;
    margin-top: 20px;
    padding: 4px 0 10px 24px;
    color: var(--cocoon-text-color);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    border-bottom: 1px solid #e6dbd0;
}

.sidebar h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: calc(100% - 8px);
    background: #b9a591;
}

/* 各ウィジェットの下に間隔を取る */
#sidebar .widget-sidebar {
    margin-bottom: 30px;
}

/* リスト形式のリンクを少し内側に寄せる */
.widget_block ul li a,
.widget_categories ul li a,
.side-menu-about a {
    padding: 2px 0 2px 15px;
    text-decoration: none;
    color: var(--cocoon-text-color);
}

/* ホバー時は背景を変えず、文字だけ茶色にする */
#sidebar a:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: #705b4c !important;
    box-shadow: none !important;
    transform: none !important;
}

#sidebar a:hover * {
    color: #705b4c !important;
}

/* 子カテゴリーの頭に薄い矢印を付ける */
.cat-item .children a::before {
    font-family: "Font Awesome 5 Free";
    content: '\f105';
    font-weight: 900;
    font-size: .8em;
    margin-right: 6px;
    opacity: .2;
}

/* カテゴリーの投稿数を名称のすぐ右に表示する */
.widget_categories ul li a .post-count {
    display: inline;
    float: none !important;
    margin-left: 0.25em;
    padding: 0;
    background: none;
    color: inherit;
    font-size: inherit;
}

/* 投稿数を括弧で囲む */
.widget_categories .post-count::before {
    content: "(";
    position: relative;
    top: -1px;
}

.widget_categories .post-count::after {
    content: ")";
    position: relative;
    top: -1px;
}

/* 最近の投稿ウィジェット */
#recent-posts-2 {
    font-size: 16px;
}

#recent-posts-2 .post-date {
    padding-top: 0;
}

.widget_recent_entries ul li a {
    padding-bottom: 0;
}

.body .wp-block-categories {
    margin-bottom: 0;
}

/* タグクラウド */
.tagcloud a {
    font-size: 14px;
}


/* ======================================================================
   17. プロフィール・著者情報
   ====================================================================== */

/* プロフィール本文と著者名 */
.author-description,
.author-box .author-name {
    font-size: 16px;
}

.article-footer .author-widget-name {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}

/* サイドバーのプロフィール欄の余白 */
.nwa .author-box .author-content {
    margin: 0;
    padding: 1em .5em;
}

.author-box p {
    margin-top: 0.3em;
    line-height: 1.5;
}

/* 著者プロフィール内のSNSアイコンのタップ領域 */
.sidebar .author-box .sns-follow-buttons a.follow-button {
    width: 40px !important;
    height: 40px !important;
    font-size: 26px !important;
    margin: 0 4px 6px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.sidebar .author-box .sns-follow-buttons a.follow-button .social-icon {
    font-size: 26px !important;
}

/* アイコンの上余白・アイコン同士の間隔 */
.author-box .sns-follow-buttons {
    margin-top: 20px;
}

.nwa .sns-follow-buttons {
    column-gap: 3.5%;
}


/* ======================================================================
   18. コメントフォーム
   ====================================================================== */

/* 元ファイルのクラス名を変更せず保存（必要に応じてHTMLと照合） */
.comment-information-messag {
    margin-bottom: 25px;
}

/* フォームの枠線 */
.comment-form textarea,
.comment-form input {
    border-width: 2px;
    border-color: rgba(185, 165, 145, .4);
}

.comment-form textarea:hover,
.comment-form input:hover {
    background-color: rgba(185, 165, 145, .06);
}

/* 送信ボタンの共通スタイル */
input[type=submit] {
    font-size: 18px;
    font-weight: 500;
    color: #000;
    border-color: rgba(185, 165, 145, .4);
    background-color: rgba(185, 165, 145, .06);
    border-radius: var(--cocoon-basic-border-radius);
}


/* ======================================================================
   19. 広告・アフィリエイト
   ====================================================================== */

/* 広告表示領域の上下余白 */
#main .ad-area {
    text-align: center;
    padding-top: 40px;
    padding-bottom: 40px;
}

/* カテゴリー別アフィリエイトリンクの挿入位置 */
.kichizu-category-affiliate {
    margin: 80px 0 20px;
}

/* Amazon商品のリンク文字色・下線 */
.amazon-item-title a,
.amazon-item-review a {
    color: #1967d2;
    text-decoration: none;
}

/* 商品リンクカードの枠 */
.product-item-box {
    width: 100%;
    border: 1px solid #dfdfdf;
}

/* メルカリのリンクボタン */
.shoplinkmercari a {
    background: #16b1ff;
}

/* 小さいスマホの商品カード調整 */
@media screen and (max-width: 480px) {
    .product-item-thumb {
        width: 180px;
        margin-right: 0 !important;
    }

    .amazon-item-title a,
    .amazon-item-review a {
        font-size: 15px;
        line-height: 0;
    }

    .product-item-buttons a {
        padding: 12px 12px;
        font-size: 17px;
        margin: 0 auto 16px;
        border-radius: 10px;
    }
}


/* ======================================================================
   20. フッター
   ====================================================================== */

/* フッター下部の外側・内側の余白をなくす */
.footer-bottom {
    margin-top: 0;
    padding: 0;
}

/* スマホ下部メニュー：「メニュー」ボタンを非表示 */
.mobile-footer-menu-buttons .navi-menu-button {
    display: none;
}


/* ======================================================================
   21. その他のスマホ用補助クラス
   ====================================================================== */

/* HTML側で.mobile-breakを付けた箇所だけスマホで改行する */
.mobile-break {
    display: none;
}

@media screen and (max-width: 767px) {
    .mobile-break {
        display: block;
    }
}