@charset "UTF-8";
/*------------------------
メイン（article）
------------------------*/
/* PC */
@media screen and (min-width:768px){
	.project-gallery{
		margin-bottom: 130px;
	}
}
/* SP */
@media screen and (max-width:767px) {
	.project-gallery{
		padding:0 4vw;
		margin-bottom: 15.2vw;
	}
}
/*------------------------
タイトル
------------------------*/
.page-title{
	text-align: center;
}
.page-title h1{
  letter-spacing:0.18em;
	line-height: 1.35;
}
.page-title .data{
  letter-spacing:0.22em;
}
.page-title .year{
	line-height: 1;
  letter-spacing:0.06em;
}
/* PC */
@media screen and (min-width:768px){
	.page-title{
		width: 1200px ;
		margin: 0 auto;
		padding: 15px 0 20px;
	}
	.page-title h1{
    font-size:24px;
		margin-bottom: 12px;
  }
  .page-title .year{
    font-size:18px;
		margin-bottom: 12px;
  }
	.page-title .data{
    font-size:14px;
  }
}
/* SP */
@media screen and (max-width:767px) {
	.page-title{
		padding: 5.07vw 0 2.67vw;	
	}
	.page-title h1{
		font-size: 5.33vw;
		margin-bottom: 1.86vw;
  }
  .page-title .year{
		font-size: 4.80vw;
		margin-bottom: 2vw;
  }
	.page-title .data{
		font-size: 3.20vw;
  }
}
/*------------------------
スライダー
------------------------*/
.slider-main{
	background: #efefef;
}
/*slick矢印*/
:root{
  --works-slide-width: 1200px;  
  --works-arrow-size: 18px;  
  --works-arrow-gap: 20px;  
	--works-arrow-v-offset: 0px;
}
.js-project-main:not(.slick-initialized){
  opacity: 0;
}
.js-project-main.slick-initialized{
  opacity: 1;
  transition: opacity .3s ease;
}

.js-project-main .slick-prev,
.js-project-main .slick-next{
	position: absolute;
  top: calc(50% - var(--works-arrow-v-offset));
  transform: translateY(-50%);
  width: var(--works-arrow-size);
  height: var(--works-arrow-size);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0; /* “Previous”“Next”テキスト非表示 */
  z-index: 5;
	transition: opacity .3s ease;
}

/* 左右位置：中央（50%）± スライド幅/2 ± gap */
.js-project-main .slick-prev{
  left: calc(50% - (var(--works-slide-width) / 2) - var(--works-arrow-gap));
}
.js-project-main .slick-next{
  right: calc(50% - (var(--works-slide-width) / 2) - var(--works-arrow-gap));
}
.js-project-main .slick-prev::before,
.js-project-main .slick-next::before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  border-top:1px solid var(--black);
  border-right:1px solid var(--black);
	opacity: 1;
	transition: opacity .3s ease;

}
.js-project-main .slick-prev::before{
  transform: rotate(-135deg);
}
.js-project-main .slick-next::before{
  transform: rotate(45deg);
}
.slider-main .slide img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.slider-caption{
	min-height: 2em;
	}
.slider-caption p{
	letter-spacing: 0.18em;
	text-align: center;
	font-weight: bold;
}

.slider-thumb .thumb{
	cursor: pointer
}
.slider-thumb .thumb img{
	width:100%;
	height: 100%;
	object-fit: cover;
	opacity:.6 ;
	transition: opacity .3s ease;
}
.slider-thumb .thumb.current img{
	opacity:1 ;
}
/* PC */
@media screen and (min-width:768px) and (max-width:1280px){
  :root{
    --works-arrow-gap: -20px;
  }
}
@media screen and (min-width:768px){
	.gallery-wrap{
		margin-bottom: 100px;
	}
	.slider-main{
		margin-bottom: 15px;
	}
	.slider-main .slide{
		height: 720px;
		display: flex;
		justify-content: center;
		align-items: center; 
	}
	.js-project-main .slick-prev:hover,
	.js-project-main .slick-next:hover{
		opacity: .7;
	}
	.slider-main .slide img{
		width: auto;
		max-width: 1400px;
		height: 100%;
		display: block;
	}
	.slider-caption{
		width: 1200px;
		margin: 0 auto 50px;
	}
	.slider-caption p{
		font-size: 16px;
	}
	/*サムネイルスライダー*/
	.slider-thumb{
	}
	.slider-thumb .inner{
		width: 1200px;
		margin: 0 auto;
		padding: 0 92px 0;
		display: flex;
		flex-wrap: wrap;
		gap:20px 28px;
	}
	.slider-thumb .thumb{
			width: calc(calc(100% - 112px) / 5);
			height: 120px;
	}
	.slider-thumb .thumb:hover img{
		opacity:1 ;
	}
}
/* SP */
@media screen and (max-width:767px) {
		/*slick矢印*/
	:root{
		--works-slide-width: 100vw;  
		--works-arrow-size: 4vw;  
		--works-arrow-gap: -1vw;  
		--works-arrow-v-offset: 0px;
	}
	.gallery-wrap{
		margin-bottom: 13.33vw;
	}
	.slider-main{
		margin:0 -4vw 5.6vw;
	}
	.slider-main .slide{
		/*height: 85.33vw;*/
		height: 72vw;		
		display: flex;
		justify-content: center;
		align-items: center; 
	}

	.slider-main .slide img{
		width: auto;
		height: 100%;
		display: block;
	}
	.slider-caption{
		display: none;
	}
	.slider-thumb{
		padding: 0 2.13vw 0;
		margin: 0 auto;
	}
	.slider-thumb .inner{
		display: flex;
		flex-wrap: wrap;
		gap: 0.93vw;
	}
	.slider-thumb .thumb{
		flex: 0 0 calc((100% - (0.93vw * 4)) / 5);
		height: 11.2vw;

	}
}
/* =========================================
　下部の投稿ある年代リスト
========================================= */
#works-year-index{
	background: #efefef;
}
#works-year-index .year-index-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
#works-year-index .year-index-item{
	text-align: center;
}
#works-year-index a{
  letter-spacing:.06em;
	line-height: 1;
  position: relative;
  transition: color .2s ease, opacity .2s ease;
}
/* カレントの下線 */
#works-year-index .year-index-item.current a:after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:1px;
  background:var(--black);
	transform: scaleX(1)!important;     
}

/* PC*/
@media screen and (min-width:768px){
	#works-year-index{
		padding: 60px 0;
	}
  #works-year-index .inner{
		width: 900px;
		margin: 0 auto;
  }
	#works-year-index .year-index-list{
		gap: 31px 45px;
	}
  #works-year-index .year-index-list > *{
    width:calc((100% - 360px) / 9);
  }
  #works-year-index li a{
    font-size: 26px;
  }
	#works-year-index li a:hover{
 	 opacity:.8;
	}
	#works-year-index li a::after{
		content:"";
		position:absolute;
		left:0;
		right:0;
		bottom:-2px;
		height:1px;
		background:var(--black);
		transform: scaleX(0);          /* 最初は見えない状態 */
		transform-origin: center;      /* 中央起点で伸びる */
		transition: transform 0.25s ease;
	}
	/* ホバー時：中央から左右に100%まで伸びる */
	#works-year-index li a:hover::after{
		transform: scaleX(1);
	}
}
/*--------sp--------*/
@media screen and (max-width: 767px) {
	#works-year-index{
		padding: 11vw 4vw 16vw;
	}
	#works-year-index .year-index-list{
		gap: 8vw 10.66vw;
	}
  #works-year-index .year-index-list > *{
    width:calc((100% - 31.98vw) / 4);
  }
  #works-year-index li a{
    font-size:6.93vw;
  }
	#works-year-index li a::after{
		content:"";
		position:absolute;
		left:0;
		right:0;
		bottom:-2px;
		height:1px;
		background:var(--black);
		transform: scaleX(0);          /* 最初は見えない状態 */
		transform-origin: center;      /* 中央起点で伸びる */
		transition: transform 0.25s ease;
	}
}