@charset  "utf-8";
/* CSS Document */
.hero {
	width: 100%;
	background: url("/photogallery/img/common/mv_bg.png") no-repeat right top;
	background-size: 65%;
	text-align: center;
}
.hero__caption {
	margin: 0 auto;
	text-align: left;
	font-size: var(--16px);
	line-height: 1.8;
	padding: 0 var(--30px) var(--10px);
}

.slick-prev:focus-visible, .slick-next:focus-visible {
	outline: auto;
}


.mainTtl {
	padding: var(--80px) var(--40px) var(--60px);
}

.contentsNav{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--24px);
	padding: 0 var(--40px);
	flex-wrap: wrap;
	column-gap: var(--10px);
	row-gap: var(--10px);
	& li {
		width: calc(50% - var(--10px));
	}
}

.componentsWrap {
	width: 100%;
	margin: 0 auto;
}
#yokohamalandmarktower {
	background: url("/photogallery/img/common/kamifubuki.png") no-repeat;
	background-size: contain;
}

#skygardenContainer {
	background: url("/photogallery/img/common/kamifubuki_bg.png") no-repeat;
	background-size: contain;
	margin: var(--24px) 0 var(--36px);
}

#moriContainer {
	background: url("/photogallery/img/common/kamifubuki_bg.png") no-repeat;
	background-size: contain;
	margin: var(--24px) 0 0;
}

#artspotContainer {
	background: url("/photogallery/img/common/kamifubuki_bg.png") no-repeat;
	background-size: contain;
	margin: var(--24px) auto 0;
}

#movieContainer {
	background: url("/photogallery/img/common/moviecontainer_bg.png") no-repeat;
	background-size: cover;
}

.contantsTtl {
	margin: 0 var(--40px) var(--30px);
	text-align: center;

	& .ttl01 {
		margin: 0 auto;
	}

	& .ttl02 {
		margin: 0 auto;
	}
}

.contantsTtl#mori {
	margin: 0 var(--20px) var(--30px);
}

.headingtitle_catch {
	font-weight: bold;
	font-size: var(--16px);
}

.catch__caption {
	border-radius: var(--15px);
	background-color: #faeff1;
	padding: var(--20px);
	margin: 0 1% var(--30px);
	font-size: var(--16px);
	text-align: left;
	line-height: 1.8;
}

#artspotContainer .catch__caption {
	margin: 0 5% var(--30px);
}

.container__photoList {
	width: 100%;
	background-color: #e9f5ff;
	text-align: center;
	padding: var(--20px) 0;
	overflow-x: auto;

	.photoTtl {
		font-size: var(--14px);
		font-weight: bold;
	}
}

.photoWrapper {
	overflow-x: auto;
	padding: 0 var(--16px);
}

.photoWrapper .landmarktower__upper__photo {
	width: calc((160px * 15) + 70px);
	margin: var(--16px) auto 0;
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
	overflow-x: scroll;
	column-gap: var(--5px);

	& div {
		width: 240px;
		flex-shrink: 0;

		& img {
			width: 100%;
		}
	}
}

.photoWrapper .landmarktower__lower__photo {
	width: calc((160px * 18) + 85px);
	margin: var(--16px) auto 0;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	column-gap: var(--5px);
	overflow-x: scroll;

	& div {
		width: 160px;

		& img {
			width: 100%;
		}
	}
}

.yokohamalandmarktower_photo .container__photoList {
	padding: var(--20px) var(--10px);
}

.slider_photo {
	padding: 0 var(--10px);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	overflow: hidden;
	column-gap: var(--5px);
	row-gap: var(--5px);

	& .slick-slide {
		width: 24%;
	}
}

#openlandmarktowerphotolist .slick-track {
	padding: 0;
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	column-gap: 4%;
	row-gap: var(--5px);
	width: 100%!important;
	box-sizing: border-box;

	&:after, &:before {
		content: none;
	}

	& .slick-slide {
		width: 22%!important;

		& img {
		box-sizing: border-box;
		}
	}
}

#mori_photo .slick-prev,
#mori_photo .slick-next {
	top: calc(50% - 75px);
}

#moriphotolist .slick-track {
	padding: 0 var(--10px);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	column-gap: var(--5px);
	row-gap: var(--5px);
	width: 100%!important;

	&:after, &:before {
		content: none;
	}

	& .slick-slide {
		width: 23%!important;

		& img {
			box-sizing: border-box;
		}
	}
}

#artspotphotolist .slick-track {
	padding: 0 var(--10px);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	column-gap: var(--5px);
	row-gap: var(--5px);
	width: 100%!important;

	&:after, &:before {
		display: block;
		width: 23%;
		content: '';
		height: 0;
	}
	&:before {
		order: 1;
	}

	& .slick-slide {
		width: 23%!important;

		& img {
			box-sizing: border-box;
		}
	}
}

.slidethumb .slick-current img {
	border: var(--2px) solid #fc0;
}

.yokohamalandmarktower_photo {
	background: url("/photogallery/img/openlandmarktowerphotolist/openlandmarktower_bg.png") no-repeat top;
	padding-top: var(--36px);

	& .photoTtl {
		font-size: var(--14px);
		font-weight: bold;
		text-align: center;
		margin-bottom: var(--16px);
	}
	& .open__landmarktower__caption {
		font-size: var(--14px);
		padding: var(--8px) 0;
	}
}

.eventPhoto {
	margin-top: var(--60px);
	background: #e9f5ff;
	padding: var(--50px) 0;

	& .photoTtl {
		font-size: var(--14px);
		font-weight: bold;
		text-align: center;
		margin-bottom: var(--16px);
	}
	& .eventPhotoList {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 25px 0;
		padding: 0 11%;

		& li {
			width: 47.5%;
		}

		& .modalBtnImage {
			display: block;
			position: relative;
		}

		& .modalBtnImage::after {
			content: "";
			width: 15%;
			height: 23%;
			background: url(/photogallery/img/event/icn.png) no-repeat;
			background-size: contain;
			position: absolute;
			right: 4%;
			bottom: 4%;
		}
	}
	& .modalBtnWrap {
		width: 100%;
		margin: 0;
		text-align: center;
	}
	& .modalOverlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.8);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 100;
		will-change: transform;
	}
	& .modalHeaderHidden {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
	& .modalClose {
		position: absolute;
		top: -8%;
		right: 0;
		width: 5.5%;
		height: 7.666%;
		z-index: 101;
	}
	& .modalClose::after,
	& .modalClose::before {
		content: "";
		position: absolute;
		width: 2px;
		height: 100%;
		top: 50%;
		left: 50%;
		background: #bababa;
		transition: opacity 0.3s ease-out;
	}
	& .modalClose::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}
	& .modalClose::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
	
	/* モーダルの表示制御 */
	& .micromodalSlide {
		display: none;
	}
	& .micromodalSlide.is-open {
		display: block;
	}
	
	/* オーバーレイのアニメーション */
	& .micromodalSlide[aria-hidden="false"] .modalOverlay {
		animation: mmfadeIn .5s cubic-bezier(0.0, 0.0, 0.2, 1);
	}
	& .micromodalSlide[aria-hidden="true"] .modalOverlay {
		animation: mmfadeOut .5s cubic-bezier(0.0, 0.0, 0.2, 1);
	}
	
	& .modalTxt {
		margin-top: var(--10px);
		font-size: var(--14px);
		color: #bababa;
	}
	& .modalContainer {
		position: relative;
		overflow: visible;
	}
}

@keyframes mmfadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes mmfadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}

.photo__caption {
	font-size: var(--14px);
	padding: var(--8px) var(--8px) 0;
}

.slick-slide .photo__caption {
	font-size: var(--14px);
	margin-left: var(--10px);
}

.slidethumb .slick-track {
	transform: unset !important;
}

.skygardenOpeningPhotolist {
	margin: var(--16px) 0 0;
	display: flex;
	width: 200%;
	column-gap: var(--16px);
	& li {
		width: 33%;
	}
}

.skygarden__contents {
	padding: var(--20px) var(--20px) 0;
}
.skygarden__components {
	& p {
		margin: var(--20px) 0;
		text-align: left;
		font-size: var(--13px);
	}
}

.skygarden__photo {
	overflow: hidden;
	position: relative;
	width: 100%;
	min-height: 276px;

	& .changeItem {
		opacity: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		position: absolute;
		left: 0;
		top: 0;
		animation: anime 20s 0s infinite;
	}

	& .changeItem:nth-of-type(2) {
		animation-delay: 10s;
	}
}

@keyframes anime {
	0% {
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	35% {
		opacity: 1;
	}
	50% {
		opacity: 0;
		z-index: 9;
	}
	100% {
		opacity: 0;
	}
}


.skygarden__photolist {
	margin: var(--16px) 0 0;
	display: flex;
	width: 183%;
	column-gap: var(--16px);
}

.mori__profile {
	& .profile__text {
		margin-top: var(--10px);
		font-size: var(--14px);
		span {
			font-size: var(--16px);
		}

		& p + p {
			margin-top: var(--10px);
			font-size: var(--12px);
		}
	}
}

.artspot__heading {
	background: url("/photogallery/img/common/artspot_heading_bg.png") no-repeat center;
	background-size: contain;
	height: var(--80px);
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 var(--40px) 0;
}

#artspotphotolist {
	& ul {
		justify-content: start;
	}
	& ul li:after {
		content: "";
		display: block;
		width: 24%;  /* .boxに指定したwidthと同じ幅を指定する */
		height: 0;
	}
}

#movieContainer {
	width: 100%;
	& .movieWrap {
		padding: var(--40px) 0 var(--20px);
	}

	& .contantsTtl {
		margin: 0 auto;
	}
	& video {
		width: 100%;
		padding: 0 var(--20px);
	}
}

.reference {
	margin: var(--16px);
	font-size: var(--12px);
	text-align: right;
}