/********/
/* 共通 */
/********/

.gallery-wrapper{
	padding             : 0 80px;
}
.gallery-wrapper > *{
	margin              : 0 auto;
	max-width           : 960px;
}

@media screen and (max-width: 768px){
	.gallery-wrapper{
		padding         : 0;
	}
}


/********/
/* 写真 */
/********/

/* イメージ画像 */
.img-wrapper .images a{
	position            : absolute;
	top                 : 0;
	bottom              : 0;
	left                : 0;
	right               : 0;
	z-index             : 0;
	opacity             : 0;
}
.img-wrapper .images input:checked + a{
	z-index             : 1;
	opacity             : 1;
}
.img-wrapper .selectors{
	position            : relative;
	margin              : 8px -8px;
	padding             : 0;
	list-style-type     : none;
	font-size           : 0;
	line-height         : 0;
	text-align          : center;
	white-space         : nowrap;
	overflow            : auto;
	-ms-overflow-style  : none;
	scrollbar-width     : none;
}
.img-wrapper .selectors::-webkit-scrollbar{
	display             : none;
}
.img-wrapper .selectors li{
	display             : inline-block;
	margin              : 8px;
	width               : 183px;
	width               : calc(25% - 2 * 8px);
	cursor              : pointer;
}
.img-wrapper .selectors .selector{
	padding-top         : 66.67%;
	padding-top         : calc(100% / 3 * 2);
	height              : 0;
	box-sizing          : content-box;
}

.gallery-wrapper .selectors-wrapper{
	position            : static;
	padding             : 0;
	overflow            : hidden;
}
.img-wrapper .swipe-arrow-fence{
	position            : absolute;
	top                 : 0;
	bottom              : 0;
	left                : 0;
	right               : 0;
	z-index             : 2;
	pointer-events      : none;
}

.img-wrapper .nav-button{
	position            : absolute;
	top                 : 50%;
	width               : 44px;
	height              : 44px;
	transform           : translateY(-50%);
	cursor              : pointer;
}
.img-wrapper .nav-button.next{
	right               : -72px;
	right               : min(-72px, -6vw);
	background          : no-repeat center / contain url('../icon/arrow-right.svg');
}
.img-wrapper .nav-button.prev{
	left                : -72px;
	left                : min(-72px, -6vw);
	background          : no-repeat center / contain url('../icon/arrow-left.svg');
}
.img-wrapper .nav-button.next::after,
.img-wrapper .nav-button.prev::after{
	content             : none;
}
.img-wrapper .sp-nav-button-container{
	position            : relative;
	display             : none;
	margin              : 0 80px;
	height              : 44px;
}
@media screen and (max-width: 768px){
	.img-wrapper .selectors{
		margin          : 4px -4px;
	}
	.img-wrapper .selectors li{
		margin          : 4px;
		width           : calc(25% - 2 * 4px);
	}
	.img-wrapper .nav-button{
		display         : none;
	}
	.img-wrapper .sp-nav-button-container,
	.img-wrapper .sp-nav-button-container .nav-button{
		display         : block;
	}
}


/**********/
/* ヘッダ */
/**********/

.gallery-attribute{
	overflow            : hidden;
}
.gallery-attribute .post-date{
	margin              : 0 calc(100% / 160 - 0.5em);
	font-size           : 16px;
}
@media screen and (max-width: 425px){
	.gallery-attribute .post-date{
		font-size       : 14px;
	}
}
.gallery-attribute .post-date li{
	display             : inline-block;
	margin              : 0 6px;
}
.gallery-attribute .post-date li::before{
	opacity             : 0.8;
}

.gallery-case-header .gallery-title{
	margin              : 8px 0;
	line-height         : 1.4em;
}
@media screen and (max-width: 768px){
	.gallery-case-header .gallery-title{
		margin          : 64px 10px 12px;
		font-size       : 12px;
	}
}



/********/
/* 説明 */
/********/

.gallery-case-description{
	margin-bottom       : 64px;
}
.description-wrapper p{
	text-align          : justify;
}
@media screen and (max-width: 425px){
	.description-wrapper p{
		text-align      : start;
	}
}


