/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/*
 * modalwindow.css
 */


/*//////////////////////////////////////////////////////////////////////////////////////////////////
//
//		Modal Window
//
//////////////////////////////////////////////////////////////////////////////////////////////////*/


/* ContentsArea
-------------------------- */

.contents {
	color: #fff;
}
.contents h2 {
    padding-top:0;
}

#video01,#video02,#video03,#video04,#video05,
#open01,#open02,#open03,#open04,#open05,#open06,
#open07,#open08,#open09,#open10,#open11,#open12,
#open13,#open14,#open15,#open16,#open17,#open18,
#open19,#open20,#open21,#open22,#open23,#open24 {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	position: fixed; /* 画面全体を覆う */
	z-index: 99990;
}

.close_overlay { /* 画面全体を覆う */
	display: block;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	text-indent: -9999px;
	background: #000;
	opacity: 0.5;
	position: absolute;
	z-index: 99991;
}

.modal_window { /* Windowの本体 */
	top: 5%; 　　/* Window位置 */
	left: 5%;　　/* Window位置 */
	margin-top: 10px;
	margin-left: 5%;
	max-width: 640px;     /* Windowの画面横幅に対する最大サイズ */
	width: 80%;           /* Windowの画面横幅に対するサイズ */
	border-style: solid;
	border-color: #300;
	font-size: 16px;
	text-align: left;
	display: block;
	border-radius: 8px;
	opacity: 1;
	background-color: #960;
	background-image: url(../img/wood002.jpg);
	position: absolute;
	z-index: 99992;
}

@media screen and (max-width: 480px) {  /* 携帯電話 */ 	.modal_window {
	    width: 75%;
		font-size: 13px;
	}
	.modal_window h2 {　/* Windowのタイトル */
	    font-size: 16px;
	}
}
@media screen and (min-width: 640px) {  /* 携帯電話 */ 	.modal_window {
	    width: 65%;
	}
}
@media screen and (min-width: 800px) {  /* 携帯電話 */ 	.modal_window {
	    width: 50%;
	}
}
.modal_window h2 {　/* Windowのタイトル */
	margin-bottom: 16px;
	width: 100%;
	line-height: 30px;
	color: #fff;
	font-size: 19px;
	font-weight: bold;
	text-align: left;
	text-indent: 15px;
	background-color: #620;
}
.modal_window img, .modal_window video  {
	opacity: 1.0;
	width: 96%;
	height: auto;
	border-radius: 10px;
	margin: 3% 2%; /* 上下 左右 */
}

.modal_window_close_text {
  display: block;
  white-space: nowrap;
  //position: absolute;
  //background: #B6D4ED;
  text-align: center;
  color: #000;
  font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
  font-size: 1.1em;
  font-weight: bold;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  border-radius: 30px;
  padding: 8px 5%; /* 上下 左右 */
  margin: 5% 10%; /* 上下 左右 */
  border-style: solid;
  border-color: #FFF;
  border-width: thin;
  background-color: #fff; /* タブの白色 */
}

.modal_window_close_text:hover {
  background-color: #B6D4ED; /* タブの水色 */
}

/* CSS3 ModalWindow SET
-------------------------- */
@-webkit-keyframes modalFadeIn {
	0% {opacity:0;display:block;}
	100% {opacity:1;}
}
div#modal div:target {
	-webkit-animation-name: modalFadeIn; 
  	-webkit-animation-duration: 1s;
  	-webkit-animation-iteration-count: 1;
	opacity: 1;
	display:block;
}