/*
 * Bootstrap依存のクラスはTailwind CSSで代用してください。
 * 例: .container-m → mx-6, .d-flex → flex, .justify-content-center → justify-center など
 * ここでは独自スタイルやTailwindで代用できないものだけ残します。
 */

/* 独自レイアウト */
div.container-m {
    margin-top: 24px;
}

footer.footer {
    text-align: center;
}

.page_btn {
    font-size: 14px;
}

/* フォント指定 */
body {
    font-family: 'Kiwi Maru', serif !important;
}

/* 人気タイトルサムネイルトリミング */
.img-card-article {
	height:250px;
	object-fit:cover;
}

/* 人気タイトルサムネイルトリミング */
.img-fav-article {
	height:200px;
	object-fit:cover;
}

/* タイトル省略 */
.title-omit {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* タイトル省略 */
.description-omit {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* PCサイズ用のスタイル（必要ならTailwindのカスタムブレークポイント推奨） */
@media (min-width: 1920px) {
    .row-cols-xxxl-5 > * {
        flex: 0 0 auto;
        width: calc(100% / 5);
    }
}

@media (min-width: 769px) {
    .container-m {
        margin-left: 24px;
        margin-right: 24px;
    }
}

/* スマホ用のレイアウト調整（Tailwindのp-やm-で代用可） */
@media (max-width: 768px) {
    .container-m {
        padding-left: 4px;
        padding-right: 4px;
    }

    /* Bootstrapのcol-系はTailwindのw-full等で代用 */
    .col-md-8,
    .col-md-4,
    .col-lg-4 {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}