@charset "utf-8";
/*
///
/// index.css ----- shirofotoのindex.html用のCSS[#v08060102]
///
/// Copyright (C) 2008, azan workshop
/// #v08052401  matt    New
/// #v08052501  matt    任意サイズ、アスペクト比の画像対応
/// #v08052502  matt    リンクボタンの対応
/// #v08053101  matt    構成のブラッシュアップ
/// #v08060101  matt    キャプション対応
/// #v08060102  matt    画像ロードの関数化と自動更新
///
/// ・このHTML構成では、ブラウザの互換モードでないと期待通り
/// 　にレイアウト表示されない。
/// 　　‐標準モードでは、コンテンツはブラウザの上下中央に
/// 　　　表示されない
/// 　　‐互換モードにするには、DOCTYPE宣言からURLを除く
///
/// ・#v08053101まではAboutなどのボタンの<a>タグに対して
/// 　position : absolute; と位置の指定をしていたが、
/// 　この方法ではIE 5.0でリンクが有効にならないことが判明。
/// 　#v08053101では外側を<div>で囲って、それに対して設定する
/// 　ことで対処
///
/// ・動作確認環境
/// 　　‐Windows版   IE 5.0、5.5、6.0、7.0
/// 　　‐Windows版   Firefox 2.0
/// 　　‐Macintosh版 Safari 3.1
/// 　　‐Macintosh版 Firefox 2.0
///
*/
@media all {
  
  body {
    margin              : 0;
    padding             : 0;
    background-color    : #ffffff;
      /*background-image    : url(../top/background.png); */
  }
  
  table.Background {
    margin              : 0;
    padding             : 0;
    width               : 100%;
    height              : 100%;
    border-collapse     : collapse; /* add #v09011301 */
  }
  
  table.Background td {
    text-align          : center;   /* IE用に必要 */
    vertical-align      : top;      /* add #v09011301 */
    padding-top         : 0;        /* add #v09011301 */
  }
  
  div.Content {
    position            : relative;
    margin              : auto;
    height           :  600px; 
    width               :  760px;
    /*
      ここでheightとwidthを指定しないと、Safariで写真フレーム
      の位置がずれてしまうことに注意
    */
  }
  
  div.Frame {
    position            : absolute;
    top                 : 300;
    left                : 100;
    /* 
      このtopとleftの設定を除くとSafariでちらつく。
      ただし、縦長の画像であれば、これを設定してもちらつく
    */
  }
  
  img.Frame {
    visibility          : hidden;
  }
  
  img.Photo {
    position            : absolute;
    visibility          : hidden;
    border              : none;
    /* 
      hiddenにしておくと、画像ファイルが存在しないときに
      エラーアイコンが表示されないというメリットもある。
      画像ファイルが存在しないときに、説明画像を表示する
      というアイデアもある
    */
  }
  
  img.Button {
    border              : none;
  }
  
  /*
  div.Foto {
    position            : absolute;
    top                 : 157px;
    left                : 708px;
  }
  */
  
/* -------------------------------------　OPEN　*/
    div.open {
    position            : absolute;
    top                 : 265px;
    left                : 355px;
    z-index: 11;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
  }

    div.school {
    position            : absolute;
    top                 : 335px;
    left                : 355px;
    z-index: 11;

  }



    div.map {
    position            : absolute;
    top                 : 245px;
    left                : 12px;
  }

    div.add {
    position            : absolute;
    top                 : 255px;
    left                : 20px;
    z-index: 11;
  }

    div.clover {
    position            : absolute;
    top                 : 385px;
    left                : 320px;
    z-index: 10;

  }

    div.clover2 {
    position            : absolute;
    top                 : 230px;
    left                : 480px;
    z-index: 10;
  }

    div.topics {
    position            : absolute;
    top                 : 350px;
    left                : 285px;
  }

/* -------------- */

    div.kiso {
    position            : absolute;
    top                 : 400px;
    left                : 20px;
    z-index: 10;
    filter: alpha(opacity=90);
    -moz-opacity: 0.9;
    opacity: 0.9;
  }

    div.english {
    position            : absolute;
    top                 : 460px;
    left                : 20px;
    z-index: 10;
    filter: alpha(opacity=90);
    -moz-opacity: 0.9;
    opacity: 0.9;
  }

    div.niwa {
    position            : absolute;
    top                 : 520px;
    left                : 20px;
    z-index: 10;
    filter: alpha(opacity=90);
    -moz-opacity: 0.9;
    opacity: 0.9;
  }

    div.tree {
    position            : absolute;
    top                 : 250px;
    left                : 170px;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
  }


    div.topics-title {
    position            : absolute;
    top                 : 430px;
    left                : 355px;
    text-align:left
  }

.topics-title  {
    font-size:16px;
    line-height:160%;
    width:360px;
    margin:0 auto;
	font-family: sans-serif;
  }

    div.topics-date {
    position            : absolute;
    top                 : 453px;
    left                : 357px;
    text-align:left
  }

.topics-date  {
    font-size:13px;
    line-height:160%;
	color:gray;
    width:360px;
    margin:0 auto;
	font-family: sans-serif;

  }

    div.topics-text {
    position            : absolute;
    top                 : 475px;
    left                : 355px;
    text-align:left
  }

.topics-text  {
    font-size:11px;
    line-height:150%;
	color:024f4f;
    width:350px;
    margin:0 auto;
    font-family: sans-serif;
  }


    div.tachikawa-text {
    position            : absolute;
    top                 : 585px;
    left                : 530px;
    text-align:left
  }

.tachikawa-text  {
    font-size:11px;
    line-height:160%;
    width:360px;
    margin:0 auto;
	font-family: sans-serif;

  }


    div.kichijoji-text {
    position            : absolute;
    top                 : 505px;
    left                : 150px;
    text-align:left
  }

.kichijoji-text  {
    font-size:11px;
    line-height:160%;
    width:360px;
    margin:0 auto;
	font-family: sans-serif;

  }

    div.catch-text {
    position            : absolute;
    top                 : 12px;
    left                : 10px;
    text-align:left
  }

.catch-text  {
    font-size:9px;
    line-height:120%;
    width:550px;
    margin:0 auto;
    color:green;
	font-family: sans-serif;

  }


    div.Footer {
    position            : absolute;
    top                 : 770px;
    left                : 5px;
    text-align:center
  }

.Footer  {
    font-size:11px;
    line-height:160%;
    width:660px;
    margin:0 auto;
	font-family: sans-serif;

  }

.text11         {
	 color: #222222; 
	font-size: 11px; 
	line-height: 16px; 
	text-decoration: none
 }

a        {
	color: #0000cc;
	font-size: 11px;
	border   : none;
}

a:hover   {
	color: #900;
	font-size: 11px;
	 /* line-height: 16px;
	text-decoration: none */
	border   : none;
}

  /* add #v08060101 */
  iframe.Caption {
    display             : none;
  }
  
  div.Caption {
    display             : none;
    margin              : 0 12px;
    /* 
    背景を白くするかどうかは好み
    background-color    : #ffffff;
    */
    text-align          : left;
    font-size           : 0.9em;
    line-height         : 1.4em;
  }
  /* end #v08060101 */
  
  /* add #v08060102 */
  div.Option {
    position            : absolute;
    top                 : 740px;
    left                : 2px;
    color               : gray;
    font-size           : 0.9em;
  }
  /* end #v08060102 */
}