@charset "utf-8";

/* モーダル
============================ */
#cboxContent {
	margin: 0;
	padding: 42px 10px 50px;
	background: #fff;
	}
	@media screen and (min-width:1025px) {
	#cboxContent {
		padding: 60px 80px;
	}
}
/* 枠線 */
#cboxLoadedContent {
	border: none;
	overflow-y: auto !important;
}
/* 閉じるボタン */
#cboxClose {
	position:absolute;
	top:3px;
	right:0px;
	display:block;
	width: 36px;
	height: 36px;
	text-indent:-9999px;
	transition: all .6s;
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
	}
	@media screen and (min-width:1025px) {
	#cboxClose {
		width: 60px;
		height: 60px;
		top:0px;
		right:10px;
	}
}
#cboxClose::before,
#cboxClose::after {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 24px;
	height: 2px;
	background: #000;
	z-index: 1000;
}
#cboxClose:before {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#cboxClose:after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
#cboxClose:hover {
	opacity: 0.4;
	transition: all .6s;
}

/*pre-next*/
#cboxPrevious {
	outline:none;
	background: url("images/arrow_pre.svg") 0 0 no-repeat;
	background-size: 50px;
	left: -10px;
	width: 50px;
	height: 50px;
	margin-top: -25px;
	z-index: 1000;
}
#cboxNext {
	outline:none;
	background: url("images/arrow_next.svg") 0 0 no-repeat;
	background-size: 50px;
	right: -10px;
	width: 50px;
	height: 50px;
	margin-top: -25px;
	z-index: 1000;
	}
	@media screen and (min-width:1025px) {
	#cboxPrevious {
		background: url("images/arrow_pre.svg") 0 0 no-repeat;
		background-size: 100px;
		left: -10px;
		width: 100px;
		height: 100px;
		margin-top: -50px;
	}
	#cboxNext {
		background: url("images/arrow_next.svg") 0 0 no-repeat;
		background-size: 100px;
		right: -10px;
		width: 100px;
		height: 100px;
		margin-top: -50px;
	}
}

/* 画像タイトルと枚数表示 */
#cboxTitle,
#cboxCurrent {
	top: auto;
	bottom: 26px;
	font-size: 1.2rem;
	color: #333;
}
#cboxTitle {
	left: 10px;
}
#cboxCurrent {
	right: 10px;
	}
	@media screen and (min-width:1025px) {
	#cboxTitle,
	#cboxCurrent {
		top: auto;
		bottom: 30px;
		font-size: 1.5rem;
		color: #333;
	}
	#cboxTitle {
		left: 80px;
	}
	#cboxCurrent {
		right: 80px;
	}
}