@charset "utf-8";

.mb0 { margin-bottom: 0 !important;}
.mb6 { margin-bottom: 6px !important;}
.mb12 { margin-bottom: 12px !important;}
.mb18 { margin-bottom: 18px !important;}
.mb24 { margin-bottom: 24px !important;}
.mb36 { margin-bottom: 36px !important;}
.mb48 { margin-bottom: 48px !important;}

.mb5 { margin-bottom: 5px !important;}
.mb8 { margin-bottom: 8px !important;}
.mb10 { margin-bottom: 10px !important;}
.mb13 { margin-bottom: 13px !important;}
.mb15 { margin-bottom: 15px !important;}
.mb20 { margin-bottom: 20px !important;}
.mb22 { margin-bottom: 22px !important;}
.mb25 { margin-bottom: 25px !important;}
.mb30 { margin-bottom: 30px !important;}
.mb35 { margin-bottom: 35px !important;}
.mb40 { margin-bottom: 40px !important;}
.mb45 { margin-bottom: 45px !important;}
.mb50 { margin-bottom: 50px !important;}
.mb55 { margin-bottom: 55px !important;}
.mb60 { margin-bottom: 60px !important;}

.mt6 { margin-top: 6px !important;}
.mt12 { margin-top: 12px !important;}
.mt18 { margin-top: 18px !important;}

.w216 { width: 216px !important;}
.w336 { width: 336px !important;}

.cms_marker {
	border: solid 1px red;
}




/* コントロール */
.modal-controls-prev,
.modal-controls-next {
	width: 40px;
	height: 40px;
	overflow: hidden;
	margin-top: -20px;
}
.modal-controls-prev {
	left: -65px !important;
}
.modal-controls-next {
	right: -65px !important;
}
.modal-controls-prev:before,
.modal-controls-next:before {
	content: '';
	display: block;
	position: absolute;
	width: 60%;
	height: 60%;
	-webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
	-webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-left: 4px solid #fff;
    border-bottom: 4px solid #fff;
    left: 30%;
    top: 15%;
}
.modal-controls-next:before {
	-webkit-transform: rotate(225deg);
    transform: rotate(225deg);
    left: auto;
    right: 30%;
}
.modal-controls-close {
	width: 40px;
	height: 40px;
	overflow: hidden;
	top: -3px !important;
	right: -65px !important;
}
.modal-controls-close:before,
.modal-controls-close:after {
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: #fff;
    width: 4px;
    height: 100%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.modal-controls-close:before {
	-webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.modal-controls-close:after {
	-webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.modal-controls-prev:hover,
.modal-controls-next:hover,
.modal-controls-close:hover {
	opacity: .5;
}

/* スライダー */
.modal-content {
	max-width: 80% !important;
}

@media (max-width: 767px) {
	.modal-controls-prev:hover,
	.modal-controls-next:hover,
	.modal-controls-close:hover {
		opacity: 1;
	}
	.modal-controls-prev,
	.modal-controls-next,
	.modal-controls-close {
		width: 25px;
		height: 25px;
	}
	.modal-controls-close:before,
	.modal-controls-close:after {
	    width: 2px;
	}
	.modal-controls-prev:before,
	.modal-controls-next:before {
	    border-left: 2px solid #fff;
	    border-bottom: 2px solid #fff;
	}
	.modal-controls-prev {
		left: -28px !important;
	}
	.modal-controls-next {
		right: -28px !important;
	}
	.modal-controls-close {
		right: -28px !important;
	}
}