/* ◇◆◇◆◇◆◇◆◇◆◇◆◇　以前のCSS 20260109追記　ここから　◇◆◇◆◇◆◇◆◇◆◇◆◇　*/
.page-content img.toppage {
    max-width: 300px;
    border: none;
}

.test:before {
    position: absolute;
    width: 0;
    height: 0;
    content: "";
    border: 100px solid transparent; /* 高さを指定 */
    border-left-color: rgb(204, 22, 22); /* 右向きならleftを指定 */
    border-top-width: 10px; /* 幅を指定 */
    border-bottom-width: 10px; /* 幅を指定 */
}
/* 赤 rgb(91,25,17) 黒 rgb(197,162,84) 緑 rgb(36,87,43) */

/* 共通：吹き出しの器 */
.balloon-left, .balloon-right {
    position: relative;
    margin: 20px 0;          /* 上下の重なり防止 */
    padding: 15px 20px;      /* 中の余白 */
    border-radius: 20px;
    display: flex;           /* Flexboxを使用 */
    align-items: center;     /* 中の文字を上下中央に */
    min-height: 80px;        /* アイコン(75px)より少し大きくして高さを固定 */
    box-sizing: border-box;  /* パディングを含めた高さ計算 */
}
/* 左吹き出し（緑） */
.balloon-left {
    color: rgb(36, 87, 43);
    background-color: rgb(215, 255, 221);
    border: 2px solid rgb(36, 87, 43);
    margin-left: 90px;       /* アイコン分のスペース */
}
/* 右吹き出し（黄） */
.balloon-right {
    color: rgb(91, 25, 17);
    background-color: rgb(253, 235, 196);
    border: 2px solid rgb(197, 162, 84);
    margin-right: 90px;      /* アイコン分のスペース */
}
/* 共通：三角形（しっぽ） */
.balloon-left:before, .balloon-right:before {
    content: '';
    position: absolute;
    top: 50%;                /* 上から50%の位置 */
    transform: translateY(-50%); /* 自分の高さの半分戻して中央寄せ */
    width: 0;
    height: 0;
}
.balloon-left:before {
    left: -15px;
    border-right: 15px solid rgb(36, 87, 43);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}
.balloon-right:before {
    right: -15px;
    border-left: 15px solid rgb(197, 162, 84);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}
/* 共通：アイコン配置 */
.icon {
    width: 75px;
    height: 75px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* アイコンを上下中央に固定 */
}
.balloon-left .icon { left: -90px; }
.balloon-right .icon { right: -90px; }
.icon img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    display: block;
}
.balloon-left .icon img { border: 2px solid rgb(36, 87, 43); }
.balloon-right .icon img { border: 2px solid rgb(197, 162, 84); }

/* ボックスレイアウト */
.boxlayout-red {
    color: rgb(91, 25, 17);
    border: solid 2px rgb(91, 25, 17);
    border-radius: 10px;
    position: relative;
    margin: 2em 0;
    padding: 1em 1em;
    white-space: pre-wrap;
}
.boxlayout-red .box-title {
    color: rgb(91, 25, 17);
    background: #FFF;
    font-weight: bold;
    font-size: 17px;
    line-height: 1;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    position: absolute;
    display: inline-block;
}
.boxlayout-yellow {
    color: rgb(197, 162, 84);
    border: solid 2px rgb(197, 162, 84);
    border-radius: 10px;
    position: relative;
    margin: 2em 0;
    padding: 1em 1em;
    white-space: pre-wrap;
}
.boxlayout-yellow .box-title {
    color: rgb(197, 162, 84);
    background: #FFF;
    font-weight: bold;
    font-size: 17px;
    line-height: 1;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    position: absolute;
    display: inline-block;
}
.boxlayout-green {
    color: rgb(36, 87, 43);
    border: solid 2px rgb(36, 87, 43);
    border-radius: 10px;
    position: relative;
    margin: 2em 0;
    padding: 1em 1em;
    white-space: pre-wrap;
}
.boxlayout-green .box-title {
    color: rgb(36, 87, 43);
    background: #FFF;
    font-weight: bold;
    font-size: 17px;
    line-height: 1;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    position: absolute;
    display: inline-block;
}
.boxlayout-inlink {
    color: rgb(36, 87, 43);
    border: solid 2px rgb(36, 87, 43);
    border-radius: 0px 5px 5px 5px;
    position: relative;
    margin: 2em 0;
    padding: 1em 1em;
    white-space: inherit;
}
.boxlayout-inlink .box-title {
    color: rgb(255, 255, 255);
    background: rgb(36, 87, 43);
    border-radius: 5px 5px 0px 0px;
    font-size: 17px;
    line-height: 1;
    top: -22px;
    left: -2px;
    padding: 2px;
    position: absolute;
    display: inline-block;
}

.img-margin {
    margin: 0 0 0 0;
}
.img-shadow {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, .0), 0 0 0 0 rgba(0, 0, 0, .0);
}

/* 蛍光ペンマーカー */
.marker_pink {
    background: linear-gradient(transparent 60%, rgb(255, 102, 255) 100%);
}
.marker_yellow {
    background: linear-gradient(transparent 60%, rgb(246, 233, 4) 100%);
}

h2 {
    display: block; /* 明示的にブロック要素に指定 */
    overflow: hidden; /* 中身がはみ出すのを防ぐ */
    font-size: 18px;
    color: rgb(36, 87, 43);
    background: linear-gradient(transparent 0%, rgba(197, 162, 84, 0.205) 100%);
    border-left: 10px solid rgb(36, 87, 43);
    width: 100%; /* 横幅100% */
    margin: 15px 0px 5px 0px; /* 余白の削除 */
    padding: 0px 0px 0px 5px; /* 余白の削除 */
    line-height: 1.8em;
}

/* アンカータグ */
#articleContent a {
    color: rgb(36, 87, 43);
    background: linear-gradient(transparent 0%, rgba(36, 87, 43, 0.062) 100%);
}

/* コマンドライン */



/* ◇◆◇◆◇◆◇◆◇◆◇◆◇　以前のCSS 20260109追記　ここまで　◇◆◇◆◇◆◇◆◇◆◇◆◇　*/

/* タイルコンテナ：横3列を維持しつつ、隙間を調整 */
.post-tile-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 10px; /* タイル間の隙間を少し狭くしてコンパクトに */
    margin-top: 10px;
}

/* 各タイル：サイズを小さく、コンパクトな比率に */
.post-tile-item {
    position: relative;
    display: block;
    /* 画像の比率に合わせて調整（2/1 は横:縦 = 2:1） */
    aspect-ratio: 2 / 1; 
    /* 画像全体を表示させる設定 */
    background-size: contain !important; 
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

/* オーバーレイ：画像が見えるように透過度を上げ、配置を調整 */
.post-tile-overlay {
    position: absolute;
    inset: 0;
    /* 下から上にかけて暗くなるグラデーションにすると、画像の上部がより綺麗に見えます */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.1) 100%);
    display: flex;
    align-items: flex-end; /* 文字を下側に配置して画像を見せる */
    padding: 10px;
}

/* ★ 記事タイトルの微調整（サイズ縮小） */
.post-tile-title {
    color: #fff !important;
    font-weight: bold;
    font-size: 0.85rem;      /* 文字を小さく（14px相当） */
    line-height: 1.3;
    text-align: left;       /* 左揃えの方が画像が見えやすい */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
    /* 長すぎるタイトルを2行でカットしてスッキリさせる */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ◇◆◇◆◇◆◇◆◇◆◇◆◇　以前のCSS 20260111追記　ここまで　◇◆◇◆◇◆◇◆◇◆◇◆◇　*/


/* hexo-filter-github-emojis */
.github-emoji {
    height: 2em;
    width: 2em;
    display: inline-block !important;
    position: relative;
    margin: 0 3px !important;
    padding: 0;
}
.github-emoji:hover {
    animation: emoji-face 5s infinite ease-in-out;
}
@keyframes emoji-face {
    2% {
        transform: translate(0, 1.5px) rotate(1.5deg);
    }
    4% {
        transform: translate(0, -1.5px) rotate(-0.5deg);
    }
    6% {
        transform: translate(0, 1.5px) rotate(-1.5deg);
    }
    8% {
        transform: translate(0, -1.5px) rotate(-1.5deg);
    }
    10% {
        transform: translate(0, 2.5px) rotate(1.5deg);
    }
    12% {
        transform: translate(0, -0.5px) rotate(1.5deg);
    }
    14% {
        transform: translate(0, -1.5px) rotate(1.5deg);
    }
    16% {
        transform: translate(0, -0.5px) rotate(-1.5deg);
    }
    18% {
        transform: translate(0, 0.5px) rotate(-1.5deg);
    }
    20% {
        transform: translate(0, -1.5px) rotate(2.5deg);
    }
    22% {
        transform: translate(0, 0.5px) rotate(-1.5deg);
    }
    24% {
        transform: translate(0, 1.5px) rotate(1.5deg);
    }
    26% {
        transform: translate(0, 0.5px) rotate(0.5deg);
    }
    28% {
        transform: translate(0, 0.5px) rotate(1.5deg);
    }
}