@charset "UTF-8";

.popup {
  	position: fixed;
  	left: 0;
  	top: 0;
  	width: 100%;
  	height: 100%;
  	z-index: 9999;
  	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;
  	/*padding: 50px;
  	background-color: #fff;*/
  	z-index: 2;
	
  	max-width: 700px;
}
.popup-inner img {
  	width: 100%;
  	transition: .6s;
}
.popup-inner img:hover {
	/*opacity:0.7;*/
}
@media (min-width: 736px) {
	.popup-inner {
		width: 100%;
	}
}
.close-btn {
  	position: absolute;
  	right: 0;
  	top: 0;
  	width: 50px;
  	height: 50px;
  	line-height: 50px;
  	text-align: center;
  	cursor: pointer;
	
	top:-40px;
}
.close-btn i {
  	font-size: 20px;
  	color: #333;
  	color:#FFF;
}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.7);
  z-index: 1;
  cursor: pointer;
}


.popup-inner{
	background:#FFF;
	width:90%;
	padding:20px 15px;
	box-sizing:border-box;
	font-family:'Open Sans','游ゴシック','YuGothic','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ','Meiryo','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}
.popup-inner h1{
	text-align:center;
	font-size:1.9rem;
	padding:0 0 8px;
}
.popup-inner h2{
	text-align:center;
	font-size:1.5rem;
	padding:8px 0;
}
.popup-inner p{
	line-height:160%;
}
.popup-inner p a{
	color:#333;
}
.popup-inner p a:hover{
	text-decoration:underline;
}
.red{
	font-size:130%;
	color:#B20000;
	font-weight:bold;
}
.red2{font-size:150%;
	color:#B20000;
	font-weight:bold;
}
@media (min-width: 414px) {
	.popup-inner h1{
		font-size:2.0rem;
	}
	.popup-inner p{
		/*text-align:center;*/
	}
}
@media (min-width: 568px) {
	.popup-inner{
		padding:10px 15px;
	}
	.popup-inner h1{
		font-size:1.5rem;
	}
	.popup-inner p{
		font-size:1.2rem;
		line-height:140%
	}
	br.br568{
		display:none;
	}
}
@media (min-width: 667px) {
	.popup-inner{
		padding:15px;
	}
	.popup-inner h1{
		font-size:1.6rem;
	}
	.popup-inner p{
		font-size:1.3rem;
	}
}
@media (min-width: 736px) {
	.popup-inner{
		padding:20px 15px;
	}
	.popup-inner h1{
		font-size:2.0rem;
	}
	.popup-inner p{
		line-height:150%
	}
}
@media (min-width: 768px) {
	.popup-inner{
		width:60%;
		padding:40px 30px;
	}
	.popup-inner h1{
		font-size:2.5rem;
	}
	.popup-inner h2{
		font-size:1.8rem;
	}
	.popup-inner p{
		font-size:1.5rem;
		line-height:170%
	}
}
@media (min-width: 812px) {
	.popup-inner{
		width:90%;
		padding:20px 15px;
	}
	.popup-inner h1{
		font-size:1.6rem;
	}
	.popup-inner p{
		font-size:1.3rem;
		line-height:150%
	}
}
@media (min-width: 1024px) {
	.popup-inner{
		width:50%;
		padding:40px 30px;
	}
	.popup-inner h1{
		font-size:2.5rem;
	}
	.popup-inner h2{
		font-size:1.8rem;
	}
	.popup-inner p{
		font-size:1.5rem;
		line-height:170%
	}
}
@media (min-width: 1200px) {
	.popup-inner{
		width:40%;
		padding:35px 35px;
	}
}