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

html {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;

	display: table;	/* 中央配置用-親 */
}

body{
	font-size:100%;
	font-family:'Meiryo UI','メイリオ','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Verdana,'ＭＳ Ｐゴシック',sans-serif;
	letter-spacing: 1px;			/* 文字間 */
	line-height: 170%;				/* 行間 */
	color:#000000;
	text-align:justify;
	text-justify:distribute;
	/*display: none;*/						/* 画面無効 最初から見えない*/
	filter:alpha(opacity=0);			/* IE 半透明 すぐに反映されない*/
	opacity:0.0;						/* IE以外 半透明 すぐに反映されない*/

	background:#FFFFFF;
	background:url('./../img/back/main_back_ptn.jpg');
	background-repeat: repeat;
	background-size: auto;

	/* absolute:絶対 relative:相対 */
	position: relative;
  	z-index: 0;
  	
  	/* スマートフォンで原因不明の文字サイズが変わる現象の回避 */
  	-webkit-text-size-adjust: 100%;

	/* 中央配置 */
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;

	display: table-cell;	/* 中央配置用-子 */
	text-align: center;
	vertical-align: middle;

}

/* 画像用枠 */
#change_view_clock{
	margin:0 auto;	/* 中央に */
	width:1024px;
	height:576px;

	/* absolute:絶対 relative:相対 */
	position: relative;
}

/* ロゴ */
.LogoArea{
	z-index: 200;

	/* absolute:絶対 relative:相対 */
    position: absolute;
    
    /* ロゴ位置 */
    top: 10px;		/* ★ここがなぜ20ditほどデフォルトで移動しているのか？ */
    left: 30px;

	/* ロゴサイズ */
    width:200px;
}

.LogoAreaImg{
	/* absolute:絶対 relative:相対 */
    position: relative;

	/* 親に合わせる */
    top: 0px;
    left: 0px;
    width: 100%;

	/* 初期透明 */
	filter:alpha(opacity=0);			/* IE 半透明 すぐに反映されない*/
	opacity: 0.0;						/* IE以外 半透明 すぐに反映されない*/

}

.LogoAreaText{
	z-index: 100;
    
	/* absolute:絶対 relative:相対 */
    position: absolute;
    top: 0px;
    left: 0px;
    padding-top: 0px;
    padding-left: 0px;

	text-align:left;
    margin-left:80px;
    margin-top:62px;
    font-size: 10px;
    color: #cccccc;
    text-shadow: 1px 1px 1px #000000;

	/* 初期透明 */
	filter:alpha(opacity=0);			/* IE 半透明 すぐに反映されない*/
	opacity: 0.0;						/* IE以外 半透明 すぐに反映されない*/

}

/* 写真 */
#photo_clock {
	/* absolute:絶対 relative:相対 */
	/*position: relative;*/

	width: 1024px;
	height: 576px;
	margin: 0 auto;
	background-color: #888888;

	/* テスト*/
	/*border: solid 1px skyblue;*/
}

#photo_clock img {
	/* absolute:絶対 relative:相対 */
	position: absolute;

    /*表示直後は最後の画像が一瞬表示されてしまうため非表示に*/
	display: none;						/* 画面無効 最初から見えない*/
	filter:alpha(opacity=0);			/* IE 半透明 すぐに反映されない*/
	opacity:'0';						/* IE以外 半透明 すぐに反映されない*/
	
	box-shadow: 2px 2px 2px #222222;
}

.DateArea{
	z-index: 100;

	position: absolute;
	top: 370px;
	left: 360px;

	text-align:right;
	width: 600px;

	font-size: 30px;
	color: #FFFFFF;
	font-weight: bold;
	text-shadow: 3px 3px 2px #000000;

	/* 初期透明 */
	filter:alpha(opacity=0);			/* IE 半透明 すぐに反映されない*/
	opacity: 0.0;						/* IE以外 半透明 すぐに反映されない*/
}

.ClockArea{
	z-index: 100;

    position: absolute;
    top: 390px;
    left: 360px;

	text-align:right;
	width: 600px;

    font-size: 80px;
    color: #FFFFFF;
    font-weight: bold;
    text-shadow: 3px 3px 2px #000000;

	/* 初期透明 */
	filter:alpha(opacity=0);			/* IE 半透明 すぐに反映されない*/
	opacity: 0.0;						/* IE以外 半透明 すぐに反映されない*/

}

.AltArea{
	z-index: 100;

    position: absolute;
    top: 500px;
    left: 20px;

	text-align:left;
	width: 600px;

    font-size: 20px;
    color: #FFFFFF;
    font-weight: bold;
    text-shadow: 3px 3px 2px #000000;

	/* 初期透明 */
	filter:alpha(opacity=0);			/* IE 半透明 すぐに反映されない*/
	opacity: 0;						/* IE以外 半透明 すぐに反映されない*/

}