/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{
	/*background:url(../img/colorbox/overlay.png) repeat 0 0;*/
	background: #FFF;
	/*opacity: 0.9;
	filter: alpha(opacity = 90);*/
	overflow: visible;
}
#colorbox{
	outline:0;
	overflow: visible !important;	
	text-align: center;
	display: block;
	position: absolute;
	visibility: visible;
	width: 97% !important;
	max-width: 100%;
	height: 100%;
	/*height: 1000px !important;*/
	top: 3% !important;
	left:0% !important;
	right: 0% !important;
	margin: 0 auto;
}
#cboxWrapper {
	overflow: visible !important;
	width: 100% !important;
	height: auto !important;
	position: inherit !important;
}
    #cboxTopLeft{ display: none; width:21px; height:21px; /*background:url(../img/colorbox/controls.png) no-repeat -101px 0;*/}
    #cboxTopRight{ display: none; width:21px; height:21px; /*background:url(../img/colorbox/controls.png) no-repeat -130px 0;*/}
    #cboxBottomLeft{ display: none; width:21px; height:21px; /*background:url(../img/colorbox/controls.png) no-repeat -101px -29px;*/}
    #cboxBottomRight{ display: none; width:21px; height:21px; /*background:url(../img/colorbox/controls.png) no-repeat -130px -29px;*/}
    #cboxMiddleLeft{ display: none; width:21px; /*background:url(../img/colorbox/controls.png) left top repeat-y;*/}
    #cboxMiddleRight{ display: none; width:21px; /*background:url(../img/colorbox/controls.png) right top repeat-y;*/}
    #cboxTopCenter{ display: none; height:21px; /*background:url(../img/colorbox/border.png) 0 0 repeat-x;*/}
    #cboxBottomCenter{ display: none; height:21px; /*background:url(../img/colorbox/border.png) 0 -29px repeat-x;*/}
    #cboxContent{
		/*background:#fff;*/
		/*overflow:hidden;*/
		width: auto !important;
		height: auto !important;
		float: none !important;
	}
        .cboxIframe{/*background:#fff;*/}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{
			margin-bottom:28px;
			width: auto !important;
			height: auto !important;
		}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494; display: none !important; }
        #cboxLoadingOverlay{background:url(../img/colorbox/loading_background.png) no-repeat center center; display: none !important; }
        #cboxLoadingGraphic{background:url(../img/colorbox/loading.gif) no-repeat center center; display: none !important; }

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{
			position:absolute;
			top: 300px;
			left: 0;
			/*background:url(../img/colorbox/controls.png) no-repeat -75px 0;*/
			background:url(../img/colorbox/img_prev.png) no-repeat;
			width: 43px;
			height: 72px;
			text-indent:-9999px;
			-webkit-transition:	all 0.3s ease;
			transition:	all 0.3s ease;
		}
        #cboxPrevious:hover{
			/*background-position:-75px -25px;*/
			left: -10px;
			opacity: 0.5;
			filter: alpha(opacity = 50);
			-webkit-transition:	all 0.3s ease;
			transition:	all 0.3s ease;
			}
        #cboxNext{
			position:absolute;
			top: 300px;
			right: 0;
			/*background:url(../img/colorbox/controls.png) no-repeat -50px 0;*/
			background:url(../img/colorbox/img_next.png) no-repeat;
			width: 43px;
			height: 72px;
			text-indent:-9999px;
			-webkit-transition:	all 0.3s ease;
			transition:	all 0.3s ease;
		}
        #cboxNext:hover{
			/*background-position:-50px -25px;*/
			right: -10px;
			opacity: 0.5;
			filter: alpha(opacity = 50);
			-webkit-transition:	all 0.3s ease;
			transition:	all 0.3s ease;
		}
        #cboxClose{
			position:absolute;
			top:0;
			right:0;
			/*background:url(../img/colorbox/controls.png) no-repeat -25px 0;*/
			background: url(../img/colorbox/img_close.png) no-repeat;
			width: 57px;
			height: 54px;
			text-indent:-9999px;
		}
        #cboxClose:hover{
			/*background-position:-25px -25px;*/

			opacity: 0.5;
			filter: alpha(opacity = 50);
		}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

.colorbox_wrapper {
	margin:0 auto;
	max-width:640px;
	text-align:left;
	padding:5% 1%;
}
#cboxContent img {
	width: 100%;
	max-width:640px;
	outline:1px solid #DFDFDF;
}
#cboxContent p {
	color: #000;
	padding: 0;
	margin: 0;
	line-height:1.3em;
}
#cboxContent .date {
	font-size: 20px;
	margin: 0 0 10px;
}

#cboxContent .title {
	font-size: 19px;
	margin: 10px 0 0;
	font-weight:bold;
}
#cboxContent .sub_title {
	font-size: 19px;
	margin: 0 0 10px;
	font-weight:bold;
	line-height:1.4em;
}

#cboxContent .movie {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
#cboxContent iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}
#cboxContent .detail {
	font-size: 13px;
}
#cboxContent .produce {
	font-size: 13px;
	margin: 0 0 5% 0;
}
#cboxContent .btn {
	color: #fff;
	font-size: 14px;
	line-height: 14px;
	text-decoration: none;
	display: block;
	width: 90%;
	max-width: 340px;
	height: auto;
	margin: 0 auto;
	padding: 3% 0;
	background: #db0a5b;
}
#cboxContent .btn:hover{
	/*background-position:-25px -25px;*/
	opacity: 0.8;
	filter: alpha(opacity = 80);
}

@media (max-width: 800px) {

#cboxPrevious{
		top: 40%;
		left: -30%;
		width: 6%;
		height: 11%;
		margin-left: 0;
		background-size: 100%;
	}
	#cboxPrevious:hover{
			opacity: 1.0;
			filter: alpha(opacity = 100);
			}
	#cboxNext{
		top: 40%;
		right: -30%;
		width: 6%;
		height: 11%;
		margin-right: 0;
		background-size: 100%;
	}
	#cboxNext:hover{
			opacity: 1.0;
			filter: alpha(opacity = 100);
	}
	#cboxClose{
		position:absolute;
		top:-50px;
		right:0;
		width: 11%;
		height: 11%;
		margin-right: 0;
		background-size: 100%;

	}
	#colorbox{
		width: 96% !important;
		top: 2%;
	}
	#cboxContent .movie {
	    width: 85%;
	    padding-top: 56.25%;
		margin: 0 auto;
	}
	#cboxContent .btn {
		font-size: 14px;
		line-height: 14px;
		width: 90%;
		padding: 7% 0;
	}
	#cboxContent .title {
		font-size: 16px;
		margin: 10px 0 10px;
		font-weight:bold;
	}
	#cboxContent .sub_title {
		font-size: 16px;
		margin: 0 0 10px;
		font-weight:bold;
		line-height:1.4em;
	}
	#cboxContent p {
		color: #000;
		margin: 0;
		line-height:1.3em;
	}
	#cboxContent .detail {
		font-size: 13px;
		padding-left: 10px;
	}
	#cboxContent .title {
		font-size: 16px;
		margin: 10px 0 0;
		font-weight:bold;
		padding-left:10px;
	}
	#cboxContent .sub_title {
		font-size: 16px;
		margin: 0 0 10px;
		font-weight:bold;
		line-height:1.4em;
		padding-left:10px;
	}
}

.popupModal1 img {
	width: 94%;
	max-width: 196px;
}

.popupModal1 > input { /* ラジオボックス非表示 */
    display: none;
}
.popupModal1 > input:nth-child(1) + label { 
    cursor: pointer;
}
.modalPopup2 { /* 初期設定 ポップアップ非表示 */
    display: none;
}

.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 {/* ラジオ１ チェックでポップアップ表示 */
    display: block;
    z-index: 998;
    position: fixed;
    width: 90%;
    height: auto;
    border-radius: 14px;
    left: 50%;
    top: 50%;
	margin-top: 0;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background: #fff;
    padding: 10px 15px;
    overflow: hidden;
	box-sizing: border-box;
}
@media (min-width: 640px) {/* PCのときはページの真ん中の600x600領域 */
	.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2{
		 width: 414px;
		 height: 600px;
		 padding: 30px;
		 box-sizing: content-box;
		 /*margin-top: 30px;*/
	}
	.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label {
		 left: 50% !important;
		 top: 50% !important;
		 margin-left: 270px !important;
		 /*margin-top: -310px !important;*/
		 margin-top: -342px !important;
	}
	.popupModal1 img {
		width: 100%;
		max-width: 300px;
	}
	label img{
	-webkit-transition: All .3s ease-in-out;
	-moz-transition: All .3s ease-in-out;
	-o-transition: All .3s ease-in-out;
	-ms-transition: All .3s ease-in-out;
	transition: All .3s ease-in-out;
	}
	label:hover img{
	filter: alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
	}
}

.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 > div {/* */
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    display: inline-block;
    width: 100%;
    height: 100%;
}
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 > div > iframe {
    width: 100%;
      height:100%;
      border:none;
      display:block;
}

.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 > div > img {/* ポップアップの中の要素 */
max-width: 100%;
}
.popupModal1 > input:nth-child(1) + label ~ label {
    display: none;/* ラジオ１ 以外のラベルを初期は非表示 */

}
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.70);
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 997;
    text-indent: -999999px;
    overflow: hidden;
}
.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label {
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    position: fixed;
    left: 10px;
    bottom: 20px;
    z-index: 999;
    width: 44pt;
    height: 44pt;
    font-size: 40px;
    border-radius: 50%;
    line-height: 44pt;
    text-align: center;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
}
@media (min-width: 640px) {
	.popupModal1 > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label {
    left: 45% !important;
}

	
}
.popupModal1 > input:nth-child(1) + label + input:nth-child(3):checked + label + input:nth-child(5) + label + .modalPopup2,
.popupModal1 > input:nth-child(1) + label + input:nth-child(3) + label + input:nth-child(5):checked + label + .modalPopup2 { /* ラジオ２と３ どっちかチェックでポップアップ非表示 */
    display: none;
}


.modalPopup2 {
    animation: fadeIn 1s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.popupModal1 .modalTitle {
     padding-bottom: .5em;
     margin: 0.5em 0 8px;
     /*border-bottom: 1px solid #ccc;*/
     font-weight: bold;
	 text-align: center;
}
.popupModal1 .modalMain {
     color:#222;
     text-align: left;
     /*font-size: 14px;
     line-height: 1.8em;*/
}