@charset "UTF-8";
/* CSS Document */

@media all and (min-width: 768px){
.modal-window {
-webkit-transform: translate(0, 100%);
-moz-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
transform: translate(0, 100%);
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
opacity: 0;
line-height: 1.8;
display: none\9;

}
.modal-window:target {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
opacity: 1;
}
.is-active.modal-window {
display: block\9;
}
.modal-window:target {
display: block\9;
}
.modal-window .modal-inner {
position: absolute;
top: 50px;
left: 50%;
bottom: 50px;
z-index: 20;
margin-left: -325px;
width: 650px;
overflow-x: hidden;
border-radius: 2px;
background: #fff url(../../live/images/bg_recital201509.jpg) no-repeat;

-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);

padding-top: 30px;
padding-bottom: 50px;
overflow: scroll;
}

.modal-window .modal-close {
display: block;
text-indent: -100px;
overflow: hidden;
}
.modal-window .modal-close:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AAAAAMwA0QDNTiUx4gAAAABJRU5ErkJggg==");
}
.modal-window .modal-close:after {
content: '\00d7';
position: absolute;
top: 7px;
left: 50%;
z-index: 20;
margin-left: 297px;
border-radius: 2px 2px 0 0;
padding: 0px 8px;
font-size: 30px;
color: #fff;
text-decoration: none;
text-indent: 0;
}
.modal-window {
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
}


/*コンテンツ*/
.modal-window .modal-inner p {
padding-right: 30px;
padding-left: 170px;
line-height: 1.8em;
}

.modal-inner .engTitle {
	font-family: 'Italianno', cursive;
	text-align: right;
	font-size: 38px;
	line-height: 1.1 !important;
	color: #b99a4d;
}
.modal-inner .engTitle span {
	display: inline-block;
	margin-right: 1em;
}
.modal-inner .composer {
	font-size: 16px;
	margin: 0.5em 0 0.5em;
	line-height: 1.2 !important;
}
.modal-inner .title {
	font-size: 22px;
	margin-bottom: 2em;
	line-height: 1.2 !important;
}
.modal-inner .description {
	font-size: 14px;
	margin: 1.5em 0;
}
.modal-inner .author {
	text-align: right;
	font-size: 12px;
	margin: 0 0 1em;
}
.modalNavBox {
	text-align: center;
	padding-right: 30px;
	padding-left: 170px;
}
.modalNavBox a p.modalNav,
.modalNavBox p.modalNav {
	display: inline-block;
	border-radius: 2px;
	
	padding: 2px 0;
	text-align: center;
	width: 30px;
	margin: 0 0.2em 1.5em;
}
.modalNavBox a p.modalNav {
	border: 1px solid #d2d2d2;
	background: #fff;
	color: #0085b9;
}
.modalNavBox p.modalNav,
.modalNavBox a:hover p.modalNav {
	background: #0085b9;
	color: #fff;
}
}



@media screen and (max-width: 767px){
.modal-window {
-webkit-transform: translate(0, 100%);
-moz-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
transform: translate(0, 100%);
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
opacity: 0;
line-height: 1.8;
display: none\9;

}
.modal-window:target {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
opacity: 1;
}
.is-active.modal-window {
display: block\9;
}
.modal-window:target {
display: block\9;
}
.modal-window .modal-inner {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
z-index: 20;
margin-left: 0;
width: 100%;
overflow-x: hidden;
background: #fff url(../../live/images/bg_recital201509.jpg) no-repeat;
background-size:cover;

-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);

padding-top: 30px;
padding-bottom: 50px;
overflow: scroll;
}

.modal-window .modal-close {
display: block;
text-indent: -100px;
overflow: hidden;
}
.modal-window .modal-close:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AAAAAMwA0QDNTiUx4gAAAABJRU5ErkJggg==");
}
.modal-window .modal-close:after {
content: '\00d7　close';
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
z-index: 20;
background: #fff;
color: #0085b9;
padding: 0px 8px;
font-size: 14px;
text-decoration: none;
border-top: 1px solid #d2d2d2;
text-indent: 0;
}
.modal-window {
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
}


/*コンテンツ*/
.modal-window .modal-inner p {
padding-right: 10px;
padding-left: 25%;
line-height: 1.8em;
}

.modal-inner .engTitle {
	font-family: 'Italianno', cursive;
	text-align: right;
	font-size: 20px;
	line-height: 1.1 !important;
	color: #b99a4d;
}
.modal-inner .engTitle span {
	display: inline-block;
	margin-right: 1em;
}
.modal-inner .composer {
	font-size: 13px;
	margin: 0.5em 0 0.5em;
	line-height: 1.2 !important;
}
.modal-inner .title {
	font-size: 16px;
	margin-bottom: 2em;
	line-height: 1.2 !important;
}
.modal-inner .description {
	font-size: 13px;
	margin: 1.5em 0;
}
.modal-inner .author {
	text-align: right;
	font-size: 13px;
	margin: 0 0 3em;
}
.modalNavBox {
	text-align: center;
	padding-right: 10px;
	padding-left: 25%;
}
.modalNavBox a p.modalNav,
.modalNavBox p.modalNav {
	display: inline-block;
	border-radius: 2px;
	padding: 2px 0;
	text-align: center;
	width: 28px;
	margin: 1em 1px 1.5em;
}
.modalNavBox a p.modalNav {
	border: 1px solid #d2d2d2;
	background: #fff;
	color: #0085b9;
}
.modalNavBox p.modalNav,
.modalNavBox a:hover p.modalNav {
	background: #0085b9;
	color: #fff;
}
}