/**
 * 1. グローバル設定：Stickyを殺さずに横揺れを防止
 * hidden はスクロールコンテナ化するため Sticky と相性が悪いが、
 * clip は純粋な切り取りのみを行うため、Sticky の滑走路を邪魔しない。
 */
html, body {
    overflow-x: clip;
}

/**
 * 2. レイアウト構造：サイドバーの「滑走路」を確保
 * .site-content を Flexbox 化し、高さをメインコンテンツと同期させる。
 */
@media (min-width: 1081px) { /* GeneratePressの標準サイドバー表示幅に準拠 */
    .site-content {
        display: flex;
        align-items: stretch; /* 左右の高さを強制的に一致させる */
    }

    #right-sidebar {
        height: auto; /* 高さは Flex の stretch に任せる */
        display: flex;
        flex-direction: column;
    }

    /* 通常ウィジェットエリアが空でも滑走路を維持 */
    .inside-right-sidebar {
        height: auto; 
    }

    /**
     * 3. 追従ユニットの設定
     * .inside-right-sidebar の外（並列）に配置された ID をターゲットにする。
     */
    #kimoota-sticky-unit {
        position: -webkit-sticky;
        position: sticky;
        top: 20px;       /* 追従開始位置 */
        z-index: 10;     /* 重なり順の安全確保 */
        height: auto;    /* 自身の高さはコンテンツに合わせる（必須） */
        flex-grow: 0;    /* 自身が勝手に伸びて滑走路を使い切らないようにする */
        margin-top: 20px; /* 上のウィジェットとの余白 */
    }
}

/**
 * 4. モバイル対応：レイアウトの破綻を防止
 * サイドバーが下部に回り込む解像度では、Flex と Sticky を解除。
 */
@media (max-width: 1080px) {
    .site-content {
        display: block; /* 標準の積み上げレイアウトに戻す */
    }
    
    #kimoota-sticky-unit {
        position: static; /* 追従を解除 */
        margin-top: 40px; /* モバイル時のセクション間の余白 */
    }
}


/* ユニット内の各ウィジェット（aside） */
.kimoota-sticky-item {
    background-color: #fff; /* 背景色 */
    padding: 30px;          /* GPのデフォルトは大体このくらい */
    margin-bottom: 20px;    /* ウィジェット間の隙間 */
    border-radius: 4px;     /* もし角を丸めるなら */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 軽い影で浮かせるとモダン */
}

/* タイトルの装飾（テーマの設定に合わせる） */
#kimoota-sticky-unit .widget-title {
    font-size: 1.2rem;
    margin-bottom: 20px;
    border-bottom: 2px solid #333; /* 下線を引くなら */
}

/* ダークテーマ用：自作ウィジェット内のテキスト装飾 */
.kimoota-custom-widget p {
    font-size: 14px;
    line-height: 1.7;    /* 小さい文字こそ行間を広く */
    color: #ccc;          /* 真っ白(#fff)を避けた、落ち着いたグレー白 */
    margin-bottom: 1.2em;
    font-weight: 400;     /* ダークテーマでは文字が膨張して見えるので標準重で */
    letter-spacing: 0.03em; /* 視認性向上のための微細な調整 */
}

/* リンクがある場合は、少し明るくして視認性を確保 */
.kimoota-custom-widget p a {
    color: #00aaff;       /* ConoHa系なら青系、またはテーマのアクセントカラー */
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: 0.3s;
}

.kimoota-custom-widget p a:hover {
    border-bottom: 1px solid #00aaff;
}

/************************************
** 著者情報
************************************/
.sidebar .kimoota-custom-widget .profile-more-wrap {
    padding-bottom: 20px;
}
/* 念のためボタンの行ボックスを安定させる */
.kimoota-custom-widget .profile-more {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1.4;
}
/************************************
** 著者SNS：洗練されたアウトラインver
************************************/
/* 全体コンテナ */
.kimoota-author-sns-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    background-color: transparent;
    border-top: 1px solid #333; /* 線をさらに細く、暗くして馴染ませる */
    border-bottom: 1px solid #333;
    padding: 25px 0;
    max-width: 400px;
    margin: 0 auto;
}

/* SNS各項目 */
.kimoota-author-sns-wrapper .sns-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* SVGアイコンコンテナ */
.kimoota-author-sns-wrapper .sns-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

/* --- アイコン（SVG）の初期状態：繊細なアウトライン --- */
.kimoota-author-sns-wrapper .sns-icon svg {
    fill: none !important;
    stroke: #888;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition:
        stroke 0.3s ease,
        opacity 0.3s ease !important;
}

/* --- テキストラベル：シンプルに --- */
.kimoota-author-sns-wrapper .sns-label {
    font-size: 11px;
    color: #888;
    text-align: center;
    white-space: nowrap;
    font-weight: bold;
    letter-spacing: 0.05em;
    transition:
        color 0.3s ease,
        opacity 0.3s ease !important;
}

/* --- ホバー時：上品にサーモンピンクが浮かび上がる --- */
.kimoota-author-sns-wrapper .sns-item:hover {
    transform: translateY(-5px);
}

/* アイコン：線だけがピンクに光る */
.kimoota-author-sns-wrapper .sns-item:hover .sns-icon svg {
    stroke: #E9967A;           /* サーモンピンクの線 */   
}

/* テキスト：色だけがスッと変わる */
.kimoota-author-sns-wrapper .sns-item:hover .sns-label {
    color: #E9967A;
}

/* 個別アイコンの微調整（線の重なりを防ぐ） */
.kimoota-author-sns-wrapper .x-icon svg { transform: scale(1.0); }
.kimoota-author-sns-wrapper .pen-icon svg { transform: scale(0.85); }

/************************************

** このはちゃんいない時

************************************/
/* モバイル時にページナビが消えても、サイドバーの並びを崩さない */
@media screen and (max-width: 1080px) {

    /* 1. ページナビ周辺の余計な余白をリセット */
    .nav-links, 
    .pagination {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. 「このはちゃん出し分け」による連続した空隙をネガティブマージンで吸収 */
    /* モバイルでPC用が消えた後の「ガクッ」とした段差を相殺します */
    .sidebar .widget_custom_html {
        margin-bottom: 20px !important; /* 標準的な余白に固定 */
    }

    /* カスタムHTMLが連続して配置されている場合、その隙間を強引にゼロにする */
    .sidebar .widget_custom_html + .widget_custom_html {
        margin-top: -20px !important; 
    }
}