/* ----------- 初期設定 ----------- */
* {
  padding: 0px;
  margin: 0px;
}
body {
  text-align:justify;
  line-height: 1.1;
  letter-spacing: -0.1px;
  font-size: 15px;
  font-family: HiraKakuProN-W3, Helvetica, Arial, sans-serif;
  -webkit-user-select: none;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color:rgba(0,0,255,0.2);
  background-color: #fbf6db;

}
/* ----------- 初期設定 ----------- */



/* ----------- clearfixの設定 ----------- */
/* For modern browsers */
.clearfix:before,
.clearfix:after {
  content:"";
  display:table;
}
.clearfix:after {
  clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
  zoom:1;
}
/* ----------
/* ---------- /clearfixの設定 ----------- */

a{
  text-decoration: none;
  border: 0;
}
#outline{
  margin: 0 auto;
  padding: 0;
}
 
/* 幅を制御する
-------------------------------------------------- */
.width-keeper{
  /* 中央寄せ */
  margin-left:auto;
  margin-right:auto;
   
  /* 最大幅をつけて PC でも見やすくする（無くても良い） */
  max-width: 640px;
}
 
/* ヘッダーにメニューを置くときに使用
-------------------------------------------------- */
.header{
  /* ここでヘッダーの背景の設定や高さ設定を行う */
  /* background や height */
  padding: 0 5px 0 5px;
}
  .header h1{
    font-size: 140%;
    background-color: #48321c;
    color: #ffffff;
    margin: 10px 0 5px 0;
    text-align: center;
  }
  .header img{
     max-width: 100%;
}
  .header p{
    font-size: 13px;
    max-width: 98%;
    margin: 5px 0;
  }
  .header .container{
  /* ヘッダーの中身の余白や背景などを設定 */
  /* ex. margin padding background border */
}
/* 中央、メインコンテンツ
-------------------------------------------------- */
.contents{
  margin: 0 auto;
}
  .contents .container{
  /* メインコンテンツの余白や背景などを設定 */
  /* ex. margin padding background border */
  margin: 5px auto;
  padding: 5px;
  max-width: 90%;
}
  .contents .container2{
  margin: 10px auto;
  max-width: 90%;
}
  .contents .container2 img{
  max-width: 100%;
}
  .contents .container a{
  font-size: 150%;
  line-height: 1.5;
  color: #400000;
}
  .container_sub{
  font-size: 120%;
  line-height: 1.4;
  margin: 10px auto;
  max-width: 90%;
}
  .container_sub img{
  max-width: 100%;
}
  .container_back{
  margin: 10px auto;
  max-width: 220px;
}
dt{
  color: #800000;
}
dd{
  margin: 0 0 25px 20px;  
}
/* フッター
-------------------------------------------------- */
.container3{
  margin: 10px auto;
  max-width: 90%;
}
.container3 a{
  font-size: 150%;
  line-height: 1.8;
  color: #400000;
}
.footer{
  font-size: 83%;
  margin: 5px auto;
}
  .footer .container{
  /* ヘッダーの中身の余白や背景などを設定 */
  /* ex. margin padding background border */
  margin: 0 auto;
  max-width: 95%;
}
  .footer .container span{
    font-size: 16px;
    font-weight: bold;
}
  /* コピーライト */
.footer .container .copyright{
  /* text-align:center; */
}



/* 画像を美しく表示するヒント
■ 画像は PC 上で想定する２倍のサイズで作成する
　Retina や HD 解像度でもきれいに表示したいからです。
　自動で拡大縮小されるため、低解像度向けを作成する必要はありません。
 
■ background-image を設定したときは、
background-size:contain; または background-size:cover;
を設定する。
参考 : http://www.htmq.com/css3/background-size.shtml
 
※ 追記 2012-2/2
Android 2.1 では
-webkit-background-size:auto 160px;
のように高さだけでも指定してやらないと反応しませんでした。
幅は auto で OK です。
 
■ img に指定するサイズは、画像のサイズじゃなくても良い。
例 : 幅高さ 128 px でも 64px の大きさで表示させる。 Retina ではとてもきれいに表示される。
幅だけ指定しておけば、アスペクト比は維持される。
<img alt="" src="http://blog.fenrir-inc.com/wp/wp-content/uploads/2012/02/default_128.png" width="64">
-------------------------------------------------- */