/* =========================================
   ブログ一覧ページのデザイン
   ========================================= */

/* 1. 記事全体を「カード」にする */
.blog .post, 
.archive .post {
    background: #fff;           /* 背景は白 */
    border: 1px solid #e5e7eb;  /* 薄いグレーの枠線 */
    border-radius: 10px;        /* 角丸にする */
    padding: 10px;              /* 内側の余白をたっぷりとる */
    margin-bottom: 10px;        /* 記事同士の間隔 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* うっすら影をつける */
    transition: transform 0.3s ease; /* ホバー時の動き準備 */
}

/* (おまけ) マウスを乗せると少し浮く */
.blog .post:hover, 
.archive .post:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}


/* 3. 「続きを読む」をボタンにする */
/* ボタンを右寄せにする魔法 */
.read-more {
    text-align: right; /* これで中のボタンが右に行きます */
}
.read-more a {
    display: inline-block;
    padding: 3px 12px;
    
    /* 青ボタンのデザイン */
    background-color: #0073e6; /* メインの青 */
    color: #fff;               /* 文字は白 */
    border: 1px solid #0073e6; /* 枠線も同じ青（1pxで控えめに） */
    font-weight: normal;
    
    text-decoration: none;     /* 下線を消す */
    border-radius: 2px;        /* 角丸は控えめ（四角っぽく） */
    font-size: 0.85rem;        /* 文字も少し控えめに */
    transition: all 0.3s ease;
}

/* ホバー時の動き */
.read-more a:hover {
    background-color: #005bb5; /* 少し濃い青になる */
    border-color: #005bb5;
    color: #fff;               /* 文字は白のまま */
    opacity: 0.9;              /* ほんのり透けさせる */
    transform: translateY(-2px); /* 少し浮く */
}

/* スマホ対応：余白を少し減らす */
@media (max-width: 768px) {
    .blog .post, 
    .archive .post {
        padding: 10px; /* スマホなら狭めでOK */
    }
}

/* =========================================
   ブログ一覧の画像と隙間の調整
   ========================================= */

/* 1. 画像を横長（16:9）に整形してトリミング */
.blog .post-thumb img,
.archive .post-thumb img {
    aspect-ratio: 16 / 9;  /* 横：縦の比率を固定 */
    object-fit: cover;     /* 枠からはみ出た分をカット */
    width: 100%;           /* 幅はコンテナに合わせる */
    height: auto;
    border-radius: 8px;    /* 画像の角も少し丸くすると馴染みます */
}

/* 2. 続きを読むボタンの下の余計な隙間を消す */
.read-more {
    margin-bottom: 0 !important; /* ボタン自体の下の余白をゼロに */
}




/* PC表示（幅769px以上）のときだけ適用 */
@media (min-width: 769px) {
	/* 1. 「ast-article-inner」をFlexボックス化して中央揃え */
	.blog .ast-article-inner > .ast-blog-featured-section,
	.archive .ast-article-inner > .ast-blog-featured-section {
	    float: none !important;
	    width: 35% !important;  /* ここで幅を決める */
	    margin-bottom: 0 !important;
	    padding-right: 25px;
	}

	/* テキストが入っているエリア */
	.blog .ast-article-inner > .post-content,
	.archive .ast-article-inner > .post-content {
	    float: none !important;
	    width: 65% !important;  /* 残りの幅 */
	}
}

/* 4. 抜粋（説明文）の文字サイズを小さくする */
.ast-excerpt-container p {
    font-size: 0.85rem !important; /* 13〜14pxくらいに */
    line-height: 1.6;
    color: #666;
    margin-bottom: 10px;
}