
/* モーダルウィンドウ(ウィンドウ外をクリックしても閉じるバージョン)
   ※CSS3.0を使用
   ※JavaScriptは未使用。CSSのみで実行可
---------------------------------------------------------------------------*/
/* モーダルウィンドウ初期設定(1画面に複数必要な場合、02、03と追加する) */
#modal_open01,
#modal_open02
{
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;                          /* モーダルウィンドウを非表示 */
	position: fixed;
}

/* モーダルウィンドウ表示設定(CSS3.0を使用。クリック時のトリガー) */
div#modal div:target {
	-webkit-animation-name: modalFadeIn;    /* フェードイン設定 */
  	-webkit-animation-duration: 0.4s;
  	-webkit-animation-iteration-count: 1;
	opacity: 1;                             /* 背景色の透明度を設定 */
	display:block;                          /* モーダルウィンドウを表示 */
}

/* モーダルウィンドウ以外の背景設定 */
.close_overlay {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	text-indent: -9999px;
	position: fixed;
	background: #000000;        /* モーダルウィンドウ以外の背景色を設定 */
	opacity: 0.5;               /* 背景色の透明度を設定 */
	z-index: 5;
}

/* モーダルウィンドウ表示設定 */
.modal_window {
	top: 50%;
	left: 50%;
	margin: -200px 0 0 -300px;
	padding: 0 0 10px 0;
	width: 600px;
	height: 500px;
	text-align: center;
	display: block;
	background: #FFFFFF;
	position: absolute;
	z-index: 10;
}

/* CSS3 webkitを利用したオーバーレイ、フェードイン設定 */
@-webkit-keyframes modalFadeIn {
	0% {opacity:0;display:block;}
	100% {opacity:1;}
}
