@charset "utf-8";

/* ==========================================
カバー
========================================== */

.in-cover-bg > img {
    object-position: 70%;
}

/* ==========================================
ギャラリー
========================================== */

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

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

.gallery-area {
    display: flex;
    justify-content: space-between;
}

.gallery-main {
    width: 75%;
}

.gallery-side {
    width: 20%;
}

.category-list > .is-active > a {
    background: var(--color-primary) !important;
    color: var(--white);
}

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

.gallery-list {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0.5rem;
}

.gallery-link {
    display: block;
}

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

.gallery-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-img {
    aspect-ratio: 1/1;
}

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

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

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

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

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

.gallery-detail-slider {
    text-align: center;
    margin: 4rem 0 0;
}

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

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

.gallery-detail-slider-item {
    background: var(--bg-color-primary);
    aspect-ratio: 3/2;
    position: relative;
}

.gallery-detail-slider-item > img {
    position: absolute;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}

.gallery-detail-slider .swiper-button-next,.gallery-detail-slider .swiper-button-prev{
    background-color: var(--btn-secondary);
    border-radius: 50%;
    width: 5rem;
    height: 5rem;
	transition: 0.3s;
}

.gallery-detail-slider .swiper-button-next:hover,.gallery-detail-slider .swiper-button-prev:hover{
    opacity: 0.65;
}

.gallery-detail-slider .swiper-button-next::after, .gallery-detail-slider .swiper-button-prev::after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #fff;
    font-size: 1.5rem;
}

.gallery-detail-slider .swiper-button-next::after {
    content: '\f054'; /* FontAwesomeの右矢印 */
}

.gallery-detail-slider .swiper-button-prev::after {
    content: '\f053'; /* FontAwesomeの左矢印 */
}

/* スライダー */

.thumb-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin: 1rem 0 0;
}

.thumb-media {
    aspect-ratio: 3/2;
    cursor: pointer;
    transition: 0.3s;
}

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

.thumb-media-active {
    filter: brightness(0.5);
}

.thumb-media:hover {
    filter: brightness(0.5);
}

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

.category-title {
    font-size: 1.25em;
    letter-spacing: 0.05em;
    line-height: 1.45em;
    font-weight: bold;
    border-bottom: solid 0.3rem var(--color-primary);
    padding: 0 0 1rem;
}

.category-list {
    margin: 1.5rem 0 0;
}

.category-list > li:not(:first-child) {
    margin: 1rem 0 0;
}

.category-list > li > a {
    display: block;
    border: solid 0.2rem var(--color-primary);
    border-radius: 0.3rem;
    background: var(--white);
    padding: 1rem 1.5rem;
}

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


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

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

	

}

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

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

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

	

}

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

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

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


	
}

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

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

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

	.gallery-wrapper {
	    padding: 7rem 0 8rem;
	}
	
	.gallery-area {
	    flex-direction: column;
	}
	
	.gallery-main {
	    width: 100%;
	}
	
	.gallery-side {
	    width: 100%;
	    margin: 6rem 0 0;
	}
	
    
	/* ==========================================
	一覧
	========================================== */
	
	.gallery-list {
	    grid-template-columns: repeat(3,1fr);
	}

	/* ==========================================
	詳細
	========================================== */
	
	.gallery-detail {
	    padding: 4.5rem 1.5rem 6rem;
	}
	
	.gallery-detail-title {
	    padding: 0 0 1.5rem;
	}
	
	.gallery-detail-slider {
	    margin: 3rem 0 0;
	}

	.gallery-detail-slider .swiper-button-next, .gallery-detail-slider .swiper-button-prev {
	    width: 3rem;
	    height: 3rem;
	}
	
	.gallery-detail-slider .swiper-button-next::after, .gallery-detail-slider .swiper-button-prev::after {
	    font-size: 1rem;
	}
	
	.gallery-detail-content {
	    margin: 3rem 0 0;
	}
	
	.gallery-detail-btn {
	    margin: 3rem auto 0;
	}
	
}

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

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

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

	/* ==========================================
	一覧
	========================================== */
	
	.gallery-list {
	    grid-template-columns: repeat(2,1fr);
	}

}

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

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

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



}

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