@charset "utf-8";


/*--------------------------------------
gallery_select
----------------------------------------*/
#gallery{
	position:relative;
	padding-bottom:100rem;
	min-height:100vh;
}

#gallery_select{
	width:fit-content;
	margin-left:auto;
	position:relative;
	height:40rem;
	box-sizing:border-box;
	border-bottom:2px solid var(--color-light_gray);
}

#gallery_select::after{
	content:"";
	position:absolute;
	right:0;
	top:50%;
	transform:translateY(-50%);
	width:17rem;
	height:17rem;
	background:url(../img/common/arrow_bottom.svg) no-repeat center;
	background-size:cover;
	pointer-events:none;
}

#gallery_select select{
	appearance:none;
	-webkit-appearance:none;
	width:fit-content;
	min-width:0;
	padding:0 120rem 0 0;
	border:none;
	background:transparent;

	font-size: var(--fs-15);
	line-height:1.5;
	white-space:nowrap;

	cursor:pointer;
}

#gallery_select select:focus{
	outline:none;
}

#gallery_select select,
#gallery_select select option{
	color:var(--color-gray);
}

#gallery h3{
	font-size:var(--fs-40);
	font-weight: 700;
	line-height: 120%;
	margin-top:70rem;
	position:relative;
}

/*--------------------------------------
gallery_img
----------------------------------------*/
.gallery_img{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:32rem;
	padding:0;
	margin-top:25rem;
	list-style:none;
	opacity:0;
	transition:opacity .4s ease;
}

.gallery_img.is-show{
	opacity:1;
}

.gallery_img li{
	width:276rem;
	display:flex;
	justify-content:center;
	align-items:center;
	overflow:hidden;
}

.gallery_img img{
	width:100%;
	height:100%;
	object-fit:contain;
	display:block;
	transition:opacity .4s ease;
}

.gallery_img img:hover{
	opacity:0.6;
	cursor:pointer;
}


/*--------------------------------------
modal
----------------------------------------*/
html.modal-open,
body.modal-open{
	overflow:hidden;
}

#gallery_modal{
	position:fixed;
	inset:0;
	justify-content:center;
	align-items:center;
	background:rgba(0,0,0,.85);
	display:none;
	opacity:0;
	z-index:9999;
	overflow-y:auto;
	padding:40rem;
	box-sizing:border-box;
}

#gallery_modal.is-open{
	display:flex;
}

#gallery_modal .modal_inner{
	position:relative;
	margin:auto;
}

#gallery_modal .modal_image{
	position:relative;
	opacity:0;
}

#gallery_modal img{
	display:block;
	width:100%;
	height:auto;
}

.modal_image img{
	border:2px solid #fff;
}

#gallery_modal .credit{
	position:absolute;
	right:0;
	bottom:-28rem;
	color:#fff;
	font-size: var(--fs-12);
}

#gallery_modal .modal_close{
	position:static;
	display:block;
	margin:20rem auto 0;
	width:90rem;
	cursor:pointer;
}

.modal_prev,
.modal_next{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:48rem;
	height:48rem;
	cursor:pointer;
}

.modal_prev{
	left:-70rem;
}

.modal_next{
	right:-70rem;
}


@media (max-width:1200px) {

  /*--------------------------------------
  gallery_select
  ----------------------------------------*/
  #gallery{
		padding:0 0.5vw 8.6667vw 0.5vw;
  }

  #gallery_select{
    height:3.3333vw;
  }

  #gallery_select::after{
    width:1.4167vw;
    height:1.4167vw;
  }

  #gallery_select select{
    padding:0 10vw 0 0;
  }

  #gallery h3{
    font-size:3.3333vw;
    margin-top:5.8333vw;
  }

  /*--------------------------------------
  gallery_img
  ----------------------------------------*/
  .gallery_img{
    gap:2.6667vw;
    margin-top:2.0833vw;
		overflow:hidden;
  }

  .gallery_img li{
    width:23vw;
  }

  /*--------------------------------------
  modal
  ----------------------------------------*/
  #gallery_modal{
    padding:3.3333vw;
  }

  #gallery_modal .credit{
    font-size:1vw;
    bottom:-2.3333vw;
  }

  #gallery_modal .modal_close{
    width:7.5vw;
    margin-top:2vw;
  }

  .modal_prev,
  .modal_next{
    width:4vw;
    height:4vw;
  }

  .modal_prev{ left:-5.8333vw; }
  .modal_next{ right:-5.8333vw; }

}



@media screen and (max-width: 767px) {

	/*--------------------------------------
	gallery_select
	----------------------------------------*/
	#gallery{
		position:relative;
		padding-bottom:100rem;
		min-height:100vh;
	}

	#gallery_select{
		width:100%;
		width:fit-content;
		margin-left:auto;
		position:relative;
		height:40rem;
		box-sizing:border-box;
		border-bottom:2px solid var(--color-light_gray);
	}

	#gallery_select::after{
		content:"";
		position:absolute;
		right:0;
		top:50%;
		transform:translateY(-50%);
		width:17rem;
		height:17rem;
		background:url(../img/common/arrow_bottom.svg) no-repeat center;
		background-size:cover;
		pointer-events:none;
	}

	#gallery_select select{
		width:350rem;
		font-size: var(--fs-15);
	}

	#gallery h3{
		font-size:var(--fs-26);
		margin-top:50rem;
	}

	/*--------------------------------------
	gallery_img
	----------------------------------------*/
	.gallery_img{
		display:grid;
		grid-template-columns:repeat(2,1fr);
		gap:24rem;
		padding:0;
		margin-top:25rem;
		list-style:none;
		opacity:0;
		transition:opacity .4s ease;
	}

	.gallery_img li{
		width:163rem;
	}

	/*--------------------------------------
	modal
	----------------------------------------*/
	html.modal-open,
	body.modal-open{
		overflow:hidden;
	}

	#gallery_modal{
		position:fixed;
		inset:0;
		justify-content:center;
		align-items:center;
		background:rgba(0,0,0,.85);
		display:none;
		opacity:0;
		z-index:9999;
		overflow-y:auto;
		padding:40rem;
		box-sizing:border-box;
	}

	#gallery_modal.is-open{
		display:flex;
	}

	#gallery_modal .modal_inner{
		position:relative;
		margin:auto;
	}

	#gallery_modal .modal_image{
		position:relative;
		opacity:0;
	}

	#gallery_modal img{
		display:block;
		width:100%;
		height:auto;
	}

	.modal_image img{
		border:2px solid #fff;
	}

	#gallery_modal .credit{
		position:absolute;
		right:0;
		bottom:-28rem;
		color:#fff;
		font-size: var(--fs-10);
	}

	#gallery_modal .modal_close{
		position:static;
		display:block;
		margin:30rem auto 0;
		width:60rem;
		cursor:pointer;
	}

	.modal_prev,
	.modal_next{
		position:absolute;
		top:50%;
		transform:translateY(-50%);
		width:30rem;
		height:30rem;
		cursor:pointer;
	}

	.modal_prev{
		left:-34rem;
	}

	.modal_next{
		right:-34rem;
	}
}