@charset "UTF-8";

/* =================================
Page title
================================= */

#page-title-box.-noimage{
height:207px;
background:linear-gradient(to right,#232323 0%,#080808 100%);
}
#page-title-box .text-box{
  padding-top: 10px;
}

.user-info{
display:none!important;
}
@media (max-width:600px){
	#page-title-box.-noimage{
		height: 13vw;
	}
	#page-title-box .text-box{
		display: none;
		/*bottom: 24.46667vw;*/
	}
}

/* =================================
Gallery
================================= */

#gallery{
margin:0 auto;
background:#2b2b2b;
}

#gallery .inner{
padding:90px 0 110px;
}


/* =================================
カテゴリー ナビ
================================= */

.gallery-nav{
background:linear-gradient(to right,#232323 0%,#080808 100%);
}

.gallery-nav ul{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:15px;
list-style:none;
padding:0;
margin:0;
color:#fff;
}

.gallery-nav li{
cursor:pointer;
font-size:14px;
letter-spacing:.08em;
padding:10px 35px 40px;
transition:.3s;
}

.gallery-nav li:hover{
opacity:.7;
}

.gallery-nav li.active{
font-weight:600;
border-bottom:1px solid #fff;
}

/* =========================
スマホナビ（アコーディオン）
========================= */

.gallery-nav-toggle{
display:none;
color:#fff;
padding:15px;
border-bottom:1px solid #444;
cursor:pointer;
position:relative;
}

.gallery-nav-toggle::after{
content:"+";
position:absolute;
top: 3.5vw;
right:4vw;
}

.gallery-nav.open .gallery-nav-toggle::after{
content:"−";
}

/* スマホ */

@media (max-width:600px){

.gallery-nav ul{
display:none;
flex-direction:column;
align-items:flex-start;
padding:10px 20px;
}

.gallery-nav.open ul{
display:flex;
}

.gallery-nav-toggle{
	padding: 3.33333vw;
	border: 1px solid #444;
display:block;
}
.gallery-nav-toggle span{
	font-size: 3.33333vw;
}

.gallery-nav li{
	width: 100%;
padding:10px 0;
}

}

/* =================================
見出し
================================= */

.gallery-heading{
display:none;
text-align:center;
margin-bottom:50px;
color:#fff;
}

.gallery-heading.active{
display:block;
}

.gallery-heading h2{
font-size:32px;
letter-spacing:.08em;
font-weight:500;
line-height: 1;
}
#gallery .gallery-heading-ja{
font-size:14px;
margin-top:8px;
color:#aaa;
}


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

#gallery .gallery-list{
display:grid;
grid-template-columns:repeat(3,282px);
justify-content:center;
gap:80px 40px;
position:relative;
}


/* =========================
カード
========================= */

#gallery .gallery-item{
width:282px;
opacity:1;
transition:opacity .4s ease, transform .4s ease;
}

#gallery .gallery-item.fade-out{
opacity:0;
transform:scale(.98);
}


/* =================================
画像
================================= */

#gallery .photo{
width:282px;
height:397px;
overflow:hidden;
margin-bottom:15px;
}

#gallery .photo img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:.4s;
}



/* =================================
テキスト
================================= */

#gallery h3{
font-size:23px;
margin:10px auto 15px;
font-weight:500;
color:#fff;
}

#gallery p{
font-size:14px;
margin:5px 0 0;
color:#d9ba90;
}
#gallery p span{
  margin-right: 8px;
}


/* =================================
タブレット
================================= */

@media (max-width:900px){

#gallery .gallery-list{
grid-template-columns:repeat(2,282px);
gap:30px;
}

}


/* =================================
スマホ
================================= */

@media (max-width:600px){
.gallery-heading h2{
	font-size: 6.8vw;
}
#gallery .gallery-heading-ja{
	margin-bottom: 6.13333vw;
    font-size: 3.73333vw;
    line-height: 1;
}
#gallery{
padding:14vw 5.33333vw;
}
#gallery .inner{
	padding: 0;
}
#gallery .gallery-list{
grid-template-columns:1fr;
gap:14vw;
}

#gallery .gallery-item{
width:100%;
}

#gallery .photo{
width:100%;
height:auto;
margin-bottom: 0;
aspect-ratio:282/397;
}

.gallery-nav{
	padding: 0 5.33333vw 5.33333vw;
}
.gallery-nav li{
	padding: 1rem 0;
    width: 100%;
}
#gallery h3{
	font-size: 5.33333vw;
}
#gallery p{
	font-size: 3.46667vw;
    line-height: 1.5;
}

}


/* =================================
ロードフェード
================================= */

#gallery{
opacity:0;
transform:translateY(20px);
transition:opacity .8s ease, transform .8s ease;
}

#gallery.is-loaded{
opacity:1;
transform:translateY(0);
}


/* =================================
フェード切替
================================= */

#gallery .gallery-item{
opacity:1;
transition:opacity .4s ease, transform .4s ease;
}

#gallery .gallery-item.fade-out{
opacity:0;
transform:scale(.96);
}


/* =========================
切替中非表示
========================= */

#gallery.is-switching .gallery-list{
opacity:0;
transform:translateY(10px);
pointer-events:none;
}

#gallery .gallery-list{
transition:opacity .35s ease, transform .35s ease;
}