/*-----------------------------
*
* No.1　作品page - preview写真 表示-
*
*------------------------------*/
.container{
	display: block;
	text-align: center;
}
/*-- 各作品写真画像 --*/

.preview{
    position	: relative;
    display		: inline-block;
	width		: 31%;
	max-width	: 200px;
	margin-left	: 2px;
	margin-right: 2px;
}
.photo{
    display		: block;
	max-width	: 100%;
    height		: auto;
	border-radius: 10px; /* ちょっとだけ角丸 */  
}
.sold{
	position	: absolute;
	left		: 0px;
	top			: 0px;
	width		: 100%;
	height		: auto;
	border-radius: 10px; /* ちょっとだけ角丸 */  
	pointer-events: none;
}



/*-----------------------------------
*
* No.2　拡大写真page - zoomUp/拡大写真 -
*
*		zoomUp_page内にzoomViewer を設置
*		そこに拡大写真スクロール部
*    　　　写真移動矢印
*　　　　　枚数カウンター
*		を設定している。 
*-------------------------------------*/

*
*-----------------------------------*/

/*- zoomUpページ(zoomUp_setting)の設定をしている --*/ 
#zoomUp_page{
	display		: none; 
}
.setting{
	display		: none;
	position	: fixed;
	z-index		: 100;
	top			: 0px;
	left		: 0px;
	width		: 100%;
	height		: 100vh;
	background-color:rgba(0,0,0,0.8);;
}

/*-- zoomUpページClose ボタン ---*/
#zm_close_btn {
	display		: block;
	position	: absolute;
	top			: 20px;
	right		: 3%;
	width		: 40px;
	height		: 40px;
	cursor		: pointer;
	z-index		: 110;
}
.in_line {
	display		: block;
	position	: absolute;
	right		: 0px;
	width		: 40px;
	height		: 3px;
	background-color:#fff;
	transition	: 1s;
	border-radius: 4px;
	z-index		: 110;
}
#close_line1 {
	top			: 0px;
	transform	: translateY(20px) rotate(-45deg);
}
#close_line3 {
	transform	: translateY(-20px) rotate(45deg);
	top			: 40px;
}


 /*--- zoomViewer　style ---*/
 #zoom_viewer{
	position	: relative;
	top 		: 80px;
	height		: calc(((80vw/3)*4) + 70px);
	max-height	:calc(600px + 70px) ;
	width		:calc(80vw + 6px);
	max-width	:456px;

	margin-left		: auto;
	margin-right	: auto;
}

/*--- 拡大写真スクロール　style ---*/
.hscroll {
	position	:absolute;
	top			:0px;
	width		:80vw;
	max-width	:450px;
	height		:calc((80vw/3)*4);
	max-height	:600px ;
	border: 3px solid white;
}
.hscroll ul {
	padding		: 0px;
	margin		: 0px;
	width		:100%;
	height		:100%;
	overflow	:hidden;
	white-space	:nowrap;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
}
.hscroll li {
	list-style	:none;
	display		:inline-block;
	scroll-snap-align:center;
	width		:100%;
	height		:100%;
}
.hscroll img {
	width		:100%;
	max-width	:476px;
	height		:auto;
	object-fit	:contain;
}


/*--- 拡大写真下の矢印　style ---*/
#arrow_left{
	position	: absolute;
	bottom		: 0px;
	left		:0px;
	font-size	: 40px;
	cursor		: pointer;
	color		:white;
}
#arrow_right{
	position	: absolute;
	bottom		: 0px;
	right		: 0px;
	font-size	: 40px;
	cursor		: pointer;
	color		:white;
}

/*--- 拡大写真 枚数カウンター　style ---*/
#counter{
	position	: absolute;
	bottom:0px;
	left: 50%;
	transform : translate(-50%,0%);

	font-size	: 30px;
	color		:white;

}


@media screen and (max-width:1200px) {
	.hscroll ul {
		overflow-x:auto;
	}
}

/*-----------------------------------
* No.3　作品page - ページTOPへ戻るボタン -
*-----------------------------------*/
#scroll-top-btn{
	position	: fixed;
	bottom		: 80px;
	right		: 10px;
	height		: 50px;
	width		: 50px;
	border		: none;
	border-radius: 50%;
	outline		: none;
	font-size	: 32px;
	font-family	:notosans-font;
	color		: white;
	background-color: #12aa31cc;
	transform	: rotate(-90deg);
	opacity		: 0;
	transition-duration: 0.5s;
}