@charset "utf-8";
/* CSS Document */
.modal-content {
	padding:10px;
	position:fixed;
	display:none;
	z-index:10000;
	width:800px;
	margin:0;
	background:#000;
	box-sizing:border-box;
}
.modal-content p {
	margin:0;
	padding:0;
}
.modal-overlay {
	z-index:9999;
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:120%;
	background-color:rgba(0,0,0,0.7);
}
.modal-open {
}
.modal-open:hover {
	cursor:pointer;
}
.modal-close {
	position: absolute;
	top: 0;
	right: -50px;
	width: 50px !important;
	height: 50px !important;
	z-index: 10;
	cursor: pointer;
}
.modal-close:before,
.modal-close:after {
	content: "";
	height: 2px;
	width: 50px;
	background: #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
.modal-close:before {
	transform: rotate(-45deg);
}
.modal-close:after{
	transform: rotate(45deg);
}
.modal-arrow {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	line-height: 0;
}
.modal-arrow span {
	position: absolute;
	z-index: 50;
	color: #fff;
	font-size: 571%;
	line-height: 0;
	cursor: pointer;
	opacity: 0;
	transition: 0.3s;
}
.modal-arrow span:first-of-type {
	left: -5px;
}
.modal-arrow span:last-of-type {
	right: -5px;
}
.modal-content:hover .modal-arrow span {
	opacity: 1;
}
.modal-content:hover .modal-arrow span:first-of-type{
	left: 5px;
}
.modal-content:hover .modal-arrow span:last-of-type{
	right: 5px;
}
@media all and (max-width: 480px) {

	.modal-close {
		right: 0;
		background: rgba(0,0,0,.5);
	}
	.modal-arrow span {
		font-size: 357%;
	}
	.modal-content .modal-arrow span {
		opacity: 1;
	}
	.modal-content .modal-arrow span:first-of-type{
		left: 5px;
	}
	.modal-content .modal-arrow span:last-of-type{
		right: 5px;
	}
	#sp_movie.modal-content{
		height: 100vh;
		box-sizing: border-box;
	}
	#sp_movie.modal-content .know_modal{
		height: 100%;
		overflow: hidden;
	}
	#sp_movie.modal-content .know_modal video{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: auto;
  height: 100%;
	}
}
/*============================
#know_modal #hear-modal
============================*/
.know_modal,
.hear-modal{
	color:#fff;
	letter-spacing:-.4em;
	max-height:90vh;
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
}
.know_modal img,
.hear-modal img{
	width:100%;
	margin-bottom: 20px;
}
.know_modal div,
.hear-modal div {
	padding:20px 30px;
}
.know_modal h3{
	display:inline-block;
	vertical-align:top;
	letter-spacing:normal;
	box-sizing:border-box;
	width:25%;
	padding-right:5%;
	text-align:left;
}
.hear-modal h3{
	letter-spacing:normal;
	box-sizing:border-box;
}
.know_modal h3 span{
	display:block;
	font-size:114%;
}
.hear-modal h3 span{
	font-size:114%;
	margin: 0 10px;
}
.know_modal p{
	display:inline-block;
	vertical-align:top;
	letter-spacing:normal;
	box-sizing:border-box;
	width:75%;
	font-size:93%;
}
@media all and (max-width: 480px) {
.modal-content {
	width:100%;
}
.know_modal,
.hear-modal{
	max-height: 100vh
}
.know_modal h3,
.hear-modal h3{
	width:100%;
	padding-right:0;
	text-align:left;
	margin-bottom:10px;
}
.know_modal p{
	width:100%;
	font-size:93%;
	padding-bottom: 80px;
}
}
/*============================
#saiji_modal
============================*/
.saiji_modal{
	color:#fff;
	letter-spacing:-.4em;
	max-height:100vh;
	overflow-y:auto;
}
.saiji_modal img{
	width:100%;
}
.saiji_modal div {
	padding:30px 40px;
}
.saiji_modal h3{
	display:inline-block;
	vertical-align:middle;
	letter-spacing:normal;
	box-sizing:border-box;
	width:25%;
	padding-right:5%;
	text-align:center;
}
.saiji_modal h3 span{
	display:block;
	font-size:134%;
}
.saiji_modal p{
	display:inline-block;
	vertical-align:middle;
	letter-spacing:normal;
	box-sizing:border-box;
	width:75%;
	font-size:93%;
}
@media all and (max-width: 480px) {
.modal-content {
	width:100%;
}
.saiji_modal div {
	padding:5%;
}
.saiji_modal h3{
	width:100%;
	padding-right:0;
	text-align:left;
	margin-bottom:10px;
}
.saiji_modal p{
	width:100%;
	font-size:93%;
}
}