@charset "UTF-8";

/*======================================================
  blog
======================================================*/

.blgMn {
	background-image: url(../images/blog/bg_main.jpg);
}

.blgMn .lwrMnTtlBox {
	color: #000;
}
.blgMn .lwrMnSubTtl:after {
	background: #000;
}

/* blgListの最大幅と中央寄せ */
.blgList {
    max-width: 1000px;
    margin: 0 auto;
}
.blgList p{
    font-size:1.6em;
}
.blgList .revLst li{
    padding:20px;
    width:calc(33.333% - 75px);
}
/* blgItemの余白とボーダー設定 */
.blgItem {
    padding: 30px 0;
    border-top: 1px solid #eaeaea;
}

.blgList a:first-of-type .blgItem {
    padding:30px 0;
    border-top: none;
}

/* タイトルと日時の横並び */
.blgTtl,
.blgDate {
    display: inline-block;
    margin-right: 15px; /* 要素間の余白 */
    vertical-align: middle; /* 横並び時の整列 */
}

.blgDate{
    font-size:1.6em;
}
.blgTtl{
    color:#000;
    font-size:1.6em;
}


/* ページネーション中央寄せ */
.pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    font-size:1.6em;
}

.pagination .page-numbers {
    margin: 0 5px;
}

/* トップページ用パーツ */
.revImgBox.blogcolumn{
    margin:0;
}

.hblogImg{
    width: 100%; /* 親要素の幅いっぱいに広げる */
    aspect-ratio: 3 / 2; /* 3:2のアスペクト比 */
    overflow: hidden; /* はみ出た部分を非表示にする */
}

.hblogImg img{
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠をカバーするように表示 */
}
.revImgBox.blogcolumn p.blogDate{
    color:#000;
    margin:15px 0 5px 0;
    font-size:1.6em;
}

.revImgBox.blogcolumn h3.revNme{
    margin:0;
    font-size:2.4em;
    width:100%;
}

#revAra.blog{
    margin-bottom:40px;
}

/* SP用のメディアクエリ（タイトルと日時を縦並び、余白調整） */
@media screen and (max-width: 768px) {
    #blgAra{
        padding:0 15px;
    }
    .blgList .revLst li{
        width:100%;
    }
    .blgItem {
        padding: 20px 0;
    }

    .blgTtl,
    .blgDate {
        display: block;
        margin-right: 0;
        font-size:1.4em;
    }
}


/*======================================================
  blog-post-single
======================================================*/

.blgDate_single{
    color:#00AEFF;
}

.blgTtle_single{
    font-size:24px;
    margin-bottom:30px;
    font-weight: bold;
}

.blgList h4{
    font-size:1.8em;
    background-color: #F7F7F7;
    padding:5px 10px;
    margin:40px 0 10px 0;
}