@charset "UTF-8";

/*------------------------
タイトル
------------------------*/
.page-title{
  display:flex;
  justify-content: center;
  background: url(../img/works/bg_pagetitle.jpg) no-repeat center;
  background-size: cover;
  color: #fff;
}
.page-title .text-area{ text-align: center; }
.page-title .text-area .en{
  font-weight: normal;
  display: block;
  letter-spacing: 0.06em;
  line-height: 1;
}
.page-title .text-area h1{
  letter-spacing: 0.18em;
  font-weight: 300;
}
@media screen and (min-width:768px){
  .page-title{ padding-top:157px; height:620px; }
  .page-title h1{ font-size:14px; }
  .page-title .en{ font-size:34px; }
}
/* SP */
@media screen and (max-width:767px) {
	.page-title{
		height: 85.33vw;
		padding-top: 16.5vw;
	}
	.page-title .text-area .en{
		font-size: 8vw;
	}
	.page-title h1{
		font-size: 4vw;
	}
}
/*------------------------
works-sliderエリア
------------------------*/
/* PC */
@media screen and (min-width:768px) {
	#works-gallery{
	}
}
/* SP */
@media screen and (max-width:767px) {
	#works-gallery{
	}
}

/*------------------------
スライダー年部分
------------------------*/
.year-head{
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.year-head .note{ letter-spacing:.18em; }
.year-nav .year-list{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  justify-items:center;
  line-height:1;
  list-style:none;
  padding:0;
  margin:0;
}

.year-nav .year-item{ display:none; }
.year-nav .year-item.prev{
  display:inline-flex; grid-column:1; justify-self:end;
}
.year-nav .year-item.current{
  display:inline-flex; grid-column:2;
}
.year-nav .year-item.next{
  display:inline-flex; grid-column:3; justify-self:start;
}
/*移動はtransform、拡大はfont-size */
.year-nav .year-link{
	display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  letter-spacing:.06em;
  text-decoration:none;
}
.year-nav .year-link span{
  display:inline-block;
  transform: translateY(0) scale(1);
  transform-origin: center bottom;
  transition:
    transform .22s cubic-bezier(.2,0,0,1),
    opacity .25s ease,
    color .25s ease;
}
.year-nav .year-item.current .year-link span{
  transform: translateY(var(--year-current-ty)) scale(var(--year-current-scale));
  transition:
    transform .30s cubic-bezier(.4,0,.2,1) 0.1s,
    opacity .25s ease,
    color .25s ease;
}
/* 移動中ロック：移動中は常に scale(1) で位置もずらさない */
.year-nav.lock-size .year-item.current .year-link span{
  transform: translateY(0) scale(1);
  transition:
    transform .12s ease-out,
    opacity .25s ease,
    color .25s ease;
}
/* 矢印 */
.year-nav .year-item.prev .year-link::before{
  content:"≪ ";
	letter-spacing:normal;
}
.year-nav .year-item.next .year-link::after{
  content:" ≫"; 
	letter-spacing:normal;
}

/* 新規に出現した左右を軽くフェードイン */
.year-nav .year-item.enter-left  .year-link{ animation:fadeInLeft .30s ease-out both; }
.year-nav .year-item.enter-right .year-link{ animation:fadeInRight .30s ease-out both; }
@keyframes fadeInLeft{
  from{ opacity:0; transform:translateX(-8px) }
  to  { opacity:1; transform:translateX(0) }
}
@keyframes fadeInRight{
  from{ opacity:0; transform:translateX(8px) }
  to  { opacity:1; transform:translateX(0) }
}

@media (prefers-reduced-motion: reduce){
  .year-nav .year-link{ transition:none; }
  .year-nav .year-item.enter-left .year-link,
  .year-nav .year-item.enter-right .year-link{ animation:none; }
}

@media screen and (min-width:768px){
	.year-head{
		width:1000px;
		margin:-165px auto 0;
		text-align:center;
		height:165px;
	}
  .year-head::after{
    content:""; display:block; width:16px; height:16px; margin:1px auto 0;
    border-left:1px solid #000; border-bottom:1px solid #000; transform:rotate(-45deg); margin-top:3px;
  }
  .year-head .note{ font-size:12px; margin-bottom:12px; }
  .year-nav .year-list{
		column-gap:55px;
		height:35px;
	}
	.year-nav .year-item{
		font-size: 18px;
	}
	.year-nav .year-item.prev .year-link:hover,
	.year-nav .year-item.next .year-link:hover{
		opacity:.8;
	}
		/* 矢印 */
	.year-nav .year-item.prev .year-link::before{
		font-size:14px;
		margin-right:4px;
	}
	.year-nav .year-item.next .year-link::after{
		font-size:14px; 
		margin-left:4px;
	}
		:root{
		--year-current-ty:5px;   /* current時のY方向移動量（PC） */
		--year-current-scale: 1.8;/* current時の拡大率（PC） */
	}
}

@media screen and (max-width:767px){
  /* 年ナビ上では縦スクロール優先（横ジェスチャのみ拾う） */
  #works-gallery .year-nav{ touch-action: pan-y; }
	:root{
    --year-current-ty: 2px; 
    --year-current-scale: 1.4;
  }

	.year-head{
		margin: -27vw auto 0;
		text-align: center;
		height: 27vw;
		width: 84vw;
	}
	.year-head::after{
		content:"";
		display:block;
		width:4.80vw;
		height:4.80vw;
		margin:0.13vw auto 0;
		border-left:1px solid #000;
		border-bottom:1px solid #000;
		transform:rotate(-45deg);
		margin-top:0vw;
	}
	.year-head .note{
		font-size: 2.93vw;
		margin-bottom: 1.6vw;
	}
  .year-nav .year-list{
		column-gap:12.78vw;
		height:9.1vw;
	}
	.year-nav .year-item{
		font-size: 4.8vw;
	}
		/* 矢印 */
	.year-nav .year-item.prev .year-link::before{
		font-size:3.73vw;
		margin-right:2.4vw;
	}
	.year-nav .year-item.next .year-link::after{
		font-size:3.73vw;
		margin-left:2.4vw;
	}
		:root{
		--year-current-ty:1.67vw;   /* current時のY方向移動量（PC） */
		--year-current-scale: 1.7;/* current時の拡大率（PC） */
	}
}

/*------------------------
スライダー部分
------------------------*/
.works-slider{
  will-change: opacity;
}
.works-slider:not(.slick-initialized){
  opacity: 0;
}
.works-slider.slick-initialized{
  opacity: 1;
}
.works-slider .block .image a{
  display: block;
	width: 100%;
	height: 100%;
}
.works-slider .block .image{
  overflow: hidden;
}
.works-slider .block .image img{
   width: 100%;
 /* width: auto;*/
  height: 630px;
  /*object-fit: contain;*/
	 object-fit: cover;
  transition: transform .5s ease;
}
.works-slider .block .meta{
  text-align: center;
}
.works-slider .block h2{
  font-weight: bold;
  letter-spacing: .18em;
}
.works-slider{
  position: relative;
}
/*slick矢印*/
:root{
  --works-slide-width: 900px;  
  --works-arrow-size: 18px;  
  --works-arrow-gap: 30px;  
	--works-arrow-v-offset: 40px;
}
.works-slider .slick-prev,
.works-slider .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 */
.works-slider .slick-prev{
  left: calc(50% - (var(--works-slide-width) / 2) - var(--works-arrow-gap));
}
.works-slider .slick-next{
  right: calc(50% - (var(--works-slide-width) / 2) - var(--works-arrow-gap));
}
.works-slider .slick-prev::before,
.works-slider .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;
}
.works-slider .slick-prev::before{
  transform: rotate(-135deg);
}
.works-slider .slick-next::before{
  transform: rotate(45deg);
}
/*----PC----*/
@media screen and (min-width:768px){
	.works-slider{
		margin-bottom: 84px;
		position: relative;
}
  .works-slider .block{
		margin:0 25px;
		width:900px;
	}
  .works-slider .block .image{
		height:630px;
		margin-bottom:20px;
	}
	.works-slider .block .image a:hover img{
		transform: scale(1.02);
	}
	/* 画像とボタン動き連動 */
	#works-gallery .block:has(.image a:hover) .v-btn a{
		background: var(--black);
		color: #fff;
	}
		#works-gallery .block:has(.v-btn a:hover) .image img{
		transform: scale(1.02);
	}
  .works-slider .block h2{ font-size:20px; margin-bottom:20px; }
	.works-slider .slick-prev:hover,
	.works-slider .slick-next:hover{
		opacity: .7;
	}
}
/*----SP----*/
@media screen and (max-width:767px){
  :root{
    --works-slide-width: 84vw;
    --works-arrow-size: 3.2vw;
    --works-arrow-gap: 2.67vw;
  }
	.works-slider {
		margin-bottom: 12vw;
	}
	#works-gallery .inner {
		margin-right: 0;
		margin-left: 0;
	}
	.works-slider .block{
			margin:0 2.67vw;
			width: 84vw;
	}
  .works-slider .block .image{
		height:59vw;
		width: 100%;
		margin-bottom:4.26vw;
	}
  .works-slider .block h2{
		font-size:4.8vw;
		margin-bottom:5.06vw;
	}
	.works-slider .slick-prev::before,
	.works-slider .slick-next::before{
		content:"";
		display:block;
		width:100%;
		height:100%;
		border-top:1px solid var(--black);
		border-right:1px solid var(--black);
		opacity: 1;
	}

	.works-slider .block .image img{
		width:100%;
		height:100%;

	}
}

/* =========================================
   プロジェクトリスト
========================================= */

#project-list .inner {
  margin: 0 auto;
}
#project-list h2{
  text-align: center;
  letter-spacing: 0.06em;
  font-weight: normal;
}
/* 各1段ブロック */
#project-list .block:not(.has-more){
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* View More のある場合 */
#project-list .block.has-more a{
  display: flex;
	width: 100%;
  justify-content: space-between;
  align-items: center;
}
#project-list .block:nth-child(odd){
  background: #dcdddd;
}
/*プロジェクト名*/
#project-list .p-name {
	line-height: 1.45;
}
#project-list .p-name .label{
  letter-spacing: 0.10em;
	transition: opacity 0.3s ease;
}
#project-list .block.has-more .label{
	text-decoration: underline;
}
/* View More のある場合 */
#project-list .block.has-more .btn{
  color: #ad0003;
  letter-spacing: 0.06em;
  position: relative;
  display: inline-flex;
  align-items: center;
	transition: transform 0.3s ease;
}
/* ボーダー矢印（>） */
#project-list .block.has-more .btn{
  --btn-arrow-w: 11px;
  --btn-arrow-h: 11px;
  --btn-arrow-mr: 10px;
}
#project-list .block.has-more .btn::before{
  content:"";
  display:inline-block;
  width:var(--btn-arrow-w);
  height:var(--btn-arrow-h);
  margin-right:var(--btn-arrow-mr);
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:rotate(-45deg);
}
/* 説明部分（右カラム） */
#project-list .desc p{
  line-height: 1.6;
  position: relative;
  padding-left: 1.2em;
}
#project-list .desc p::before{
	content: "■";
	position: absolute;
	left: 0;
	top: 0.06em;
	font-size: 1em;
}
/* 注意書き */
#project-list .note {
	letter-spacing: 0.18em;
}
/*--------pc--------*/
@media screen and (min-width:768px){
	#project-list{
		margin-bottom: 120px;
	}
	#project-list .block,
	#project-list .block.has-more a {
		min-height: 70px;
	}
	#project-list .inner {
		width: 1200px;
		padding: 0 150px;
	}
	#project-list h2{
		font-size: 24px;
		margin-bottom: 20px;
	}
	#project-list .block:not(.has-more) > *,
	#project-list .block.has-more a > *{
		width: 50%;
	}
	/*プロジェクト名*/
	#project-list .p-name {
		padding:16px 20px 18px 35px;
	}
	#project-list .label{
		font-size: 19px;
	}
	#project-list .block.has-more .label{
		display: inline;
		padding-right: 12px;
	}
	#project-list .block.has-more .btn{
		display: inline-block;
		font-size: 18px;
	}
	#project-list .block.has-more a:hover .label{
		text-decoration: none;
		opacity: .8;
	}
  #project-list .block.has-more a:hover .btn{
    transform: translateX(5px);
  }
	/* 説明部分（右カラム） */
	#project-list .desc p {
		font-size: 14px;
		line-height: 1.6;
	}
	#project-list .desc {
		padding: 12px 20px 12px 0;
	}
	#project-list .note {
		text-align: right;
		margin-top: 30px;
		font-size: 12px;
	}
}
/*--------sp--------*/
@media screen and (max-width: 767px) {
	#project-list{
		margin-bottom:10.66vw;
	}
	#project-list .block:not(.has-more),
	#project-list .block.has-more a {
		min-height: 25.33vw;
		flex-direction: column;
		justify-content:flex-start;
		padding: 4vw;
		text-align: left;
	}
	#project-list h2{
		font-size: 5.86vw;
		margin-bottom:6.67vw;
	}
	/*プロジェクト名*/
	#project-list .p-name {
		text-align: center;
	}
	#project-list .label{
		font-size: 4.8vw;
		margin-bottom: 1.6vw;
	}
	#project-list .block.has-more .btn{
		display: inline-block;
		font-size: 4.8vw;
		--btn-arrow-w: 2.67vw;
		--btn-arrow-h: 2.67vw;
		--btn-arrow-mr:2.67vw;
		margin-bottom: .53vw;
	}

	/* 説明部分（右カラム） */
	#project-list .desc {
	}
	#project-list .note {
		text-align: right;
		margin-top: 5.33vw;
		padding-right: 4vw;
		font-size: 2.67vw;
	}
}

/* =========================================
　下部の投稿ある年代リスト
========================================= */
#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;
	}
}