@charset "utf-8";
.blackmask{
	display: none;
	position: fixed;
	width: 100%;
	height: calc(100% + 95px);
	background-color: rgba(0,0,0,0.8);
	top: 0;
	left: 0;
	z-index: 999;
}
.popup_wrapper{
	padding-top: 40px;
	display: none;
	align-items: center;
	width: 60%;
	height: auto;
	max-height: 70%;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 1001;
	text-align: center;
	max-width: 1000px;
}
.popup_innerarea{
	position: relative;
	border: 1px solid #2CCABE;
}
.popup_innerarea::before, .popup_innerarea::after{
	position: absolute;
	content: '';
	background-repeat: no-repeat;
    background-size: auto;
	width: 32px;
    height: 36px;
}
.popup_innerarea::before{
	background: url('../img/chara_left.gif');
	top: -1px;
	left: -1px;
}
.popup_innerarea::after{
	background: url('../img/chara_right.gif');
	bottom: -1px;
	right: -1px;
}
.css-cancel_position{
	float: right;
	margin: -55px -8px 0 0;
	cursor: pointer;
}
.css-cancel{
  display: inline-block;
  position: relative;
  margin: 0 20px 0 20px;
  padding: 0;
  width: 1px;
  height: 40px;
  background: #fff;
  transform: rotate(45deg);
}
.css-cancel:before{
  display: block;
  content: "";
  position: absolute;
  top: 20px;
  left: -20px;
  width: 40px;
  height: 1px;
  background: #fff;
}
.spec_container_l img:last-child{
	margin-top: 10px;
}
#special .special_ps{
	text-align: center;
    margin: 30px auto 100px auto;
    max-width: 1050px;
	/*
    background: rgba(231,0,98);
    background: linear-gradient(90deg, rgba(231,0,98,0.2) 0%, rgba(221,18,200,0.2) 21%, rgba(113,226,209,0.2) 94%);
	*/
}
#special .special_ps img{
	margin-bottom: 20px;
}
#special .cf{
	display: none!important;
}

.mainimage ul li{
	position: absolute;
	opacity: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
}
.mainimage ul li.active{
	opacity: 1;
}
.mainimage ul li.mainimg_1{
	background: url('../img/main.jpg') no-repeat top center;
	background-size: cover;
}
.mainimage ul li.mainimg_2{
	background: url('../img/main_2.jpg') no-repeat top center;
	background-size: cover;
}
@media only screen and (max-width: 1080px) {
	.popup_wrapper{
		width: 80%;
	}
}
@media only screen and (max-width: 840px) {
	.popup_wrapper{
		max-height: 80%;
	}
}
@media only screen and (max-width: 768px) {
	.mainimage ul li.mainimg_1{
		background: url('../img/main_768.jpg') no-repeat center center;
		background-size: cover;
	}
	.mainimage ul li.mainimg_2{
		background: url('../img/main_768_2.jpg') no-repeat center center;
		background-size: cover;
	}
}
@media only screen and (max-width: 640px) {
	.popup_wrapper{
		width: 90%;
	}
}
@media only screen and (max-width: 540px) {
}
@media only screen and (max-width: 480px) {
	.mainimage ul li.mainimg_1{
		background: url('../img/main_480.jpg') no-repeat center center;
		background-size: cover;
	}
	.mainimage ul li.mainimg_2{
		background: url('../img/main_480_2.jpg') no-repeat center center;
		background-size: cover;
	}
}