@charset "UTF-8";
/**
 * main.css - Custom styles for this theme
 * @since 1.0.0
 */
/* ==========================================================================
   1. 変数の再定義とベース設定
   ========================================================================== */
:root {
    /* theme.jsonで設定した値を参照 */
    --accent-color: var(--wp--preset--color--link-hover); /* 濃い赤 */
}

/* ==========================================================================
   2. 見出しのデザイン
   ========================================================================== */
main h1 {
    padding-bottom: 15px;
    margin-bottom: 2rem;
    border-bottom: 3px solid var(--accent-color);
}

main h2, .normaltitle, .toc-title {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 4px solid #ccc;
}

main h2::after, .normaltitle::after, .toc-title::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 20%;
    height: 4px;
    background-color: var(--wp--preset--color--link-hover); /* 濃い赤 */
    z-index: 2;
}

main h3 {
    padding-left: 12px;
    border-left: 5px solid var(--accent-color);
    margin-bottom: 1.25rem;
    line-height: 1.4;
}

main h4 {
    margin-bottom: 1rem;
}

/* ==========================================================================
   3. レイアウト調整（ユーティリティクラス）
   ========================================================================== */
/* ヘッダ固定 */
.wp-site-blocks > .wp-block-template-part {
    /*position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    background-color: transparent !important;
    transition: all 0.3s ease, top 0.1s ease; /* transitionをシンプルに統合 */

    /* 1. 管理バー（Admin Bar）対応 */
    /*.admin-bar & { top: 32px !important; }
    @media (max-width: 782px) {
        .admin-bar & { top: 46px !important; }
        .admin-bar &.is-scrolled { top: 0 !important; } /* スマホスクロール時 */
    /*}

    /* 2. 通常スクロール時のエフェクト */
    &.is-scrolled {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        header {
            background-color: rgb(from var(--wp--preset--color--secondary) r g b / 0.4) !important;
            backdrop-filter: blur(12px) !important;
            -webkit-backdrop-filter: blur(12px) !important;
        }
    }

    /* 3. モバイルメニュー開閉時のバグ修正 */
    .has-modal-open & header {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background-color: var(--wp--preset--color--secondary) !important;
    }
}
/* クラス「no-gap」がついた要素の上下余白を強制解除 */
.no-gap {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ==========================================================================
   4. フッターを最下部に固定する設定
   ========================================================================== */
footer,
footer a,
footer p {
    color: #fff;
}
/* ブロックテーマのルート要素に対して適用 */
.wp-site-blocks {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* メインコンテンツエリアを伸ばす */
/* WordPressのテンプレート構造に応じて複数のクラスをカバー */
.wp-site-blocks > main,
.wp-site-blocks > .wp-block-group.has-background, /* 背景色ありのグループ等 */
.wp-site-blocks > .entry-content {
    flex: 1 0 auto;
}

/* フッターの縮みを防止 */
footer {
    flex-shrink: 0;
}

/* sns */
/* 各カラムの枠線設定 */
.sns-nav .wp-block-column {
    border-right: 1px solid #fff;
    margin-left: 0 !important; /* 標準のマージンをリセット */
    margin-right: 0 !important;
}

/* 最後のカラムだけ右線を消す */
.sns-nav .wp-block-column:last-child {
    border-right: none;
}

/* 中身のグループ（アイコンと文字） */
.sns-nav .wp-block-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 5px;
    text-decoration: none;
    color: #fff;
}

/* SNSエリア全体の強制横並び設定 */
@media (max-width: 781px) {

    /* 1. 親要素：隙間を完全に排除 */
    .sns-nav.wp-block-columns {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0 !important; /* ブロック間の隙間をゼロに */
        padding: 0 !important;
    }

    /* 2. 各カラム：パディングを調整して線を端まで伸ばす */
    .sns-nav .wp-block-column {
        flex-basis: 50% !important;
        max-width: 50% !important;
        margin: 0 !important;
        padding: 15px 0 !important; /* 上下に余白、左右はゼロにして線を端まで届かせる */
        box-sizing: border-box;
        border-bottom: 1px solid #fff !important; /* 下線 */
        border-right: 1px solid #fff !important;  /* 右線 */
    }

    /* 3. 右側（2個目と4個目）の「右線」だけ消す */
    .sns-nav .wp-block-column:nth-of-type(2n) {
        border-right: none !important;
    }

    /* 4. 下側（3個目と4個目）の「下線」だけ消す */
    .sns-nav .wp-block-column:nth-of-type(n+3) {
        border-bottom: none !important;
    }
    
    /* 5. カラム内のグループ要素の余白をリセット */
    .sns-nav .wp-block-column .wp-block-group {
        padding: 0 !important;
        margin: 0 !important;
    }
}
/* SP時QRコードを中央寄せ */
@media (max-width: 782px) {
    footer {
        /* 右寄せ（is-content-justification-right）になっている要素を狙い撃ち */
        .is-content-justification-right {
            align-items: center !important;       /* 縦並びのflexアイテム（画像とテキスト）を中央寄せ */
            justify-content: center !important;   /* 念のための軸方向中央寄せ */
            text-align: center !important;        /* 下の「hidemitsu.com」のテキストも中央寄せ */
        }
        
        /* 念のため画像自体の外枠マージンもリセット */
        .wp-block-image {
            margin-left: auto !important;
            margin-right: auto !important;
        }
    }
}
/* ==========================================================================
   5. サイドバー
   ========================================================================== */
aside > div, aside > nav, aside > ul {
    border: 1px solid #ddd;
    padding: 15px !important;
    margin-bottom: 2rem;
    background: var(--wp--preset--color--base);
}

aside h4 {
    background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
    border-bottom: 1px solid #ccc;
    border-left: 5px solid var(--wp--preset--color--link-hover);
    padding: 8px 15px;
    margin: -15px -15px 15px -15px;
    font-weight: bold;
}
.wp-block-latest-posts__list li {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
    font-size: 0.9rem;
}
/* 検索ブロック */
.wp-block-search__input {
    background-color: var(--wp--preset--color--base-alt) !important; /* 薄ベージュ */
    border: 1px solid #ddd !important;
}

.wp-block-search__button {
    background-color: var(--wp--preset--color--secondary) !important; /* セカンダリ色 */
    color: #fff;
}

/* ==========================================================================
   6. クエリーループ（カードデザイン）
   ========================================================================== */

.wp-block-post,
.view-all-fixed-card {
    display: flex !important;
    flex-direction: column !important;
    position: relative;
    transition: transform 0.3s ease;
    border-radius: 10px;      /* 投稿カードと合わせる */
    overflow: hidden;         /* はみ出しをカット */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 影を復活 */
    background-color: #fff;   /* 白枠を復活 */
    height: 100% !important;  /* 縦幅を隣のカードに合わせる */
}
.wp-block-post:hover,
.view-all-link:hover {
    background-color: #f8f8f8;        /* ホバー時に薄く色付け */
    opacity: 0.9;
}

/* カード全体をクリック可能にする */
.wp-block-post-title a::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10;
}
/* 「すべて見る」の中身を上下左右の中央に配置 */
.view-all-content {
    flex: 1;                          /* カード内の全スペースを占有 */
    display: flex;
    align-items: center;              /* 垂直中央 */
    justify-content: center;          /* 水平中央 */
    width: 100%;
}

.view-all-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;                     /* 親の全高さを埋める */
    min-height: 250px;                /* 隣の画像付きカードと高さを合わせる目安 */
    text-decoration: none;
}
/* ==========================================================================
   7. 記事・画像・目次エリア
   ========================================================================== */
.acf-main-image, .ssp-main-image {
    max-width: 820px;
    margin: 0 auto 3rem;
}

.acf-main-image img, .ssp-hero-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* 目次・カテゴリーの▶アイコン */
.wp-block-categories-list,
#toc ul {
    list-style: none !important; /* 黒丸を強制非表示 */
    padding: 0 !important;       /* 左側の余白をリセット */
    margin: 5px !important;
}
#toc a::before, .wp-block-categories-list li::before {
    content: "▶";
    color: var(--wp--preset--color--link-hover); /* 濃い赤 */
    font-size: 0.7rem;
    margin-right: 10px;
}
/* 子カテゴリー（階層）がある場合の調整 */
.wp-block-categories-list .children {
    list-style: none !important; 
    padding-left: 1rem !important; 
}
/* ==========================================================================
   8. ページ送り（ページネーション）
   ========================================================================== */
/* ページ送り全体のコンテナ */
.wp-block-query-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 30px;
    gap: 14px; /* 元のmargin: 7pxの代わり */
}

/* 通常のリンクボタンと、現在のページ（active）の共通スタイル */
.wp-block-query-pagination a,
.wp-block-query-pagination .wp-block-query-pagination-numbers .current {
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
    border: 1px solid #ffe4e1;
}

/* 通常のリンクボタン（背景：ロージーブラウン、文字：白） */
.wp-block-query-pagination a {
    background: var(--wp--preset--color--secondary) !important; /* セカンダリ色 */
    color: #fff;
}

/* 現在のページ（背景：ミスティローズ、文字：ブラウン） */
.wp-block-query-pagination .wp-block-query-pagination-numbers .current {
    background: #ffe4e1;
    color: brown;
}

/* ホバー時のスタイル（背景：ミスティローズ、文字：ブラウン） */
.wp-block-query-pagination a:hover {
    background: #ffe4e1;
    color: brown;
}