@charset 'UTF-8';



/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 99999;
		opacity: 0;
		visibility: hidden;
		transition: .6s;
	}
	
	.popup.is-show {
		opacity: 1;
		visibility: visible;
	}
	
	.popup-inner {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 80%;
 		max-width: 600px; 
		height: auto;
		padding: 0px;
		z-index: 2;
	}
	.popup-inner img {
		width: 100%;
	}
	
	.close-btn {
		position: absolute;
		right: 0;
		top: 0;
		width: 50px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		cursor: pointer;
	}
	.close-btn i {
		font-size: 20px;
		color: #333;
	}
	
	.black-background {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.8);
		z-index: 1;
		cursor: pointer;
	}
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.popup {
	  position: fixed;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  z-index: 99999;
	  opacity: 0;
	  visibility: hidden;
	  transition: .6s;
	}
	.popup.is-show {
	  opacity: 1;
	  visibility: visible;
	}
	.popup-inner {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 80%;
	max-width: 600px;
	max-height: 432px;
	padding: 0px;
	background-color: #fff;
	z-index: 2;
	}
	.popup-inner img {
	  width: 100%;
	}
	.close-btn {
	  position: absolute;
	  right: 0;
	  top: 0;
	  width: 40px;
	  height: 50px;
	  line-height: 35px;
	  text-align: center;
	  cursor: pointer;
	}
	.close-btn i {
	  font-size: 18px;
	  color: #333;
	}
	.black-background {
	  position: absolute;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0,0,0,.8);
	  z-index: 1;
	  cursor: pointer;
	}


}