@charset "utf-8";
/* lenis */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-scrolling  iframe { pointer-events: none; }
.lenis.lenis-stopped { overflow: hidden; }

/* works */
.sec-works {
	padding: clamp(75px, 8.92857143vw, 80px) 0;
	width: 100%;
	background: url(../imgs/bg.jpg) no-repeat top center / 100% auto;
}
.sec-works .head-section {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	margin-bottom: clamp(25px, 2.97619048vw, 50px);
	flex-wrap: wrap;
}
.sec-works .pagerlink {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
	margin: 0 0 25px;
}
.sec-works .pagerlink li {
	width: 50%;
	max-width: 244px;
}
.sec-works .pagerlink a {
	font-size: 80%;
	padding: 14px 10px;
	width: 100%;
	max-width: 100%;
}
.sec-works .pagerlink .square {
	width: clamp(14px, 1.19047619vw, 20px);
	height: clamp(14px, 1.19047619vw, 20px);
	margin-left: 10px;
}
@media screen and (max-width: 767px){
	.sec-works .pagerlink li {
		width: calc(50% - 5px);
	}
	.sec-works .pagerlink a {
		max-width: inherit;
		width: 100%;
		letter-spacing: -0.01em;
		font-size: 70%;
		padding: 7px 5px;
	}
	.sec-works .pagerlink .square {
		position: absolute;
		right: 5px;
		top: 9px;
		margin: 0;
	}
}
.sec-works .heading { text-align: right; }
.sec-works .heading { display: flex; flex-direction: column; align-items: flex-end; gap: clamp(15px, 1.78571429vw, 30px);}
.sec-works .heading h2 { display: flex; align-items: flex-end; gap: 3rem;}
.sec-works .heading h2 img { height: clamp(14px, 1.70747024vw, 28px); }
.sec-works .heading h2 span { font-size: clamp(12px, 1.07142857vw, 18px); line-height: 1.2; }
.sec-works .heading h3 img { height: clamp(20px, 2.85714286vw, 48px); }
.works-list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.works-list .item { position: relative; overflow: hidden;}
.works-list .item-full { width: 100%;}
.works-list .item-half { width: calc(50% - 10px);}
.works-list .item > img { transition: transform 0.8s ease-in-out; transform: scale(1); }
.works-list .item:hover > img { opacity: 0.7; transform: scale(1.05); }

@media screen and (max-width: 767px){
	.sec-works .heading { width: 100%;}
	.works-list { gap: 10px; }
	.works-list .item { width: 100%!important; }
	.works-list .item .caps { padding: 10px;}
	.works-list .item .caps .en { font-size: 1.1rem;}
	.works-list .item .caps .jp { font-size: 1.0rem;}
	.sec-works .heading h2 span {
		letter-spacing: -0.02em;
	}
}

/* modals */
.md-controls { padding: 10px 0; }
.md-controls > div {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
	width: 100%;
}
.md-close {
	text-align: center;
	padding: 7px 0;
}
.md-close img { cursor: pointer; height: 24px; margin: auto; }
.mfp-container { padding: 0; }
.md-content {
	background: #FFF;
	margin: 0 auto;
	padding: 10px 10px 0;
	position: relative;
	overflow-y: auto;
	max-width: 55vw/*1030px*/;
	width: 92%;
}
.md-content-item { position: relative; line-height: 1; }
.md-content-item .caps-btm { font-size: clamp(1.2rem, 1.07142857vw, 1.8rem);	line-height: 1.4; opacity: 0; visibility: hidden; }
@media screen and (max-width: 1200px){
	.md-content {max-width: 1030px; padding: 15px 15px 0; }
}
@media screen and (max-width: 767px){
    .md-close { position: relative; left: 0; top: 0; }
}

.md-content .slick-arrow {
	background-color: #000;
	background-size: cover;
	background-position: center;
	border: none;
	cursor: pointer;
	height: 70px;
	width: 70px;
	opacity: 0.7;
	margin: 0;
	padding: 0;
	position: absolute;
	top: calc(50% - 30px);
	transform: translateY(-50%);
	text-indent: -999em;
	z-index: 10;
}
.md-content .slick-next { background-image: url(../imgs/next.svg); right: 0; }
.md-content .slick-prev { background-image: url(../imgs/prev.svg); left: 0; }

@media screen and (max-width: 767px){
	.md-content .slick-arrow { width: 50px; height: 50px; top: calc(50% - 25px);}
}

#modal {
    z-index: 1050 !important;
}
.md-content video {
    display: block;
    width: 100%;
}
.md-content .slick-slide {
	height: auto;
    overflow: hidden;
	display: flex;
	flex-direction: column;
}
.md-content .slick-slide > img {
    width: auto;    
    margin: 0 auto;  
    object-fit: contain; 
	flex: 1;
	max-height: calc(80vh - 38px);
}
.md-content-iframe {
	padding: 56.25% 0 0 0;
	position: relative;
}
.md-content-iframe iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}