@charset "utf=8";

.blog-wrapper {
    padding: 12rem 0 13rem;
}

.blog-inner {
    max-width: 125rem;
    width: 100%;
    padding: 0 1.5rem;
    margin: auto;
}

/* ==========================================
一覧
========================================== */

.blog-list {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 6rem 5%;
}

.blog-item {
    overflow: hidden;
}

.blog-link {
    display: block;
}

.blog-category {
    max-width: 100%;
    width: fit-content;
    display: block;
    letter-spacing: 0.05em;
    line-height: 1.5em;
    border-bottom: solid 1px var(--color-secondary);
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blog-img {
    aspect-ratio: 3/2;
    margin: 1.2rem 0 0;
    transition: 0.3s;
}

.blog-img > img {
    object-fit: cover;
    width: 100%;
    height: 100% !important;
}

.blog-date {
    letter-spacing: 0.05em;
    line-height: 1.5em;
    margin: 1.5rem 0 0;
}

.blog-title {
    font-size: 1.125em;
    margin: 0.5rem 0 0;
}

.blog-link:hover .blog-img {
    filter: brightness(0.5);
}

/* ==========================================
詳細
========================================== */

.blog-detail {
    padding: 6rem 1.5rem 8rem;
    box-shadow: 0 0 1rem rgb(0 0 0 / 8%);
}

.blog-detail-inner {
    max-width: 112rem;
    width: 100%;
    margin: auto;
}

.blog-detail-title {
    border-bottom: solid 0.1rem var(--border-color-primary);
    padding: 0 0 2rem;
    margin: 3rem 0 0;
}

.blog-detail-img {
    text-align: center;
    margin: 4rem 0 0;
}

.blog-detail-content {
    margin: 4rem 0 0;
}

.news-detail-btn {
    margin: 5rem auto 0;
}

/* ==========================================
カテゴリ
========================================== */

.category-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 6rem auto 0;
}

.category-box {
    max-width: 16rem;
    width: 49%;
    position: relative;
}

.category-box:nth-child(n+2) {
    margin: 0 0 0 2%;
}

.category-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.125em;
    border: solid 0.1rem var(--border-color-primary);
    padding: 0.5rem 1rem;
    background: var(--white);
    cursor: pointer;
    transition: .3s;
}

.category-title:hover {
    opacity: .6;
}

.category-title.active:after {
    transform: scale(1, -1);
}

.category-list {
    background: var(--white);
    border: solid 1px var(--border-color-primary);
    width: 100%;
    margin: auto;
    position: absolute;
    bottom: calc(100% + 3px);
    right: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

.active+.category-list {
    opacity: 1;
    visibility: visible;
}

.category-list>li:not(:last-child) {
    border-bottom: solid 1px var(--border-color-primary);
}

.category-list>li>a {
    display: block;
    padding: 0.8rem 1rem;
    position: relative;
}

.category-list>li>a:hover {
    background: var(--bg-color-secondary);
}

.category-title:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    content: '\f107';
    display: block;
    font-size: 1.2rem;
    padding-left: 1rem;
    transition: transform .3s;
}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1920px) {

	

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1550px) {

	

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1024px) {

/* ==========================================
一覧
========================================== */

.blog-list {
    grid-template-columns: repeat(3,1fr);
}
	
}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 768px) {

	/* ==========================================
	一覧
	========================================== */
	
	.blog-list {
	    grid-template-columns: repeat(2,1fr);
	    gap: 4rem 3%;
	}

	/* ==========================================
	詳細
	========================================== */
	
	.blog-detail {
	    padding: 4.5rem 1.5rem 6rem;
	}
	
	.blog-detail-title {
	    padding: 0 0 1.5rem;
	    margin: 2rem 0 0;
	}
	
	.blog-detail-img {
	    margin: 3rem 0 0;
	}
	
	.blog-detail-content {
	    margin: 3rem 0 0;
	}
	
	.news-detail-btn {
	    margin: 3rem auto 0;
	}
	
	/* ==========================================
	カテゴリ
	========================================== */

	/* カテゴリ */

	.category-area {
    	justify-content: center;
    	margin: 4rem auto 0;
 }

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 576px) {

	/* ==========================================
	一覧
	========================================== */

    .blog-list {
        grid-template-columns: repeat(1,1fr);
    }

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 414px) {



}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */