@charset "utf-8";
html,body {
   width: 100%;height: 100%;
}
body {
   margin: 0px;
   padding: 0px;
   color: #5d5e4c;   /*全体の文字色*/
   font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;   /*フォント種類*/
   font-size: 16px;  /*文字サイズ*/
   line-height: 2;      /*行間*/
   -webkit-text-size-adjust: none;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}

a {
   color: #5d5e4c;
   -webkit-transition: 0.5s;
   transition: 0.5s;
}
a:hover {
   color: #d50f26;
}

h2 {
   clear: both;
   margin-bottom: 20px;
   color: #fff;         
   padding: 10px 30px;  
   background: #5d5e4c; 
   border-radius: 30px; 
}

h3 {
   clear: both;
   margin-bottom: 20px;
   padding: 8px 30px 4px;      
   border-radius: 30px;    
   border: 2px solid #5d5e4c;
}

p {
   padding: 0px 30px 20px; 
}

header {
   text-align: center;  /*ヘッダーブロックの内容をセンタリングする設定*/
   height: 840px;       /*ヘッダーブロックの高さ。画面の高さに合わせる為に100%で指定。*/
}
/*ロゴ画像設定*/
#logo img {
   width: 100%;   /*幅*/
   opacity: 0.7;  /*透明度30%の事*/
}

/*メニュー
---------------------------------------------------------------------------*/
/*メニュー全体を囲むブロック*/
#menubar {
   text-align: center;  /*メニューブロックの内容をセンタリングする設定*/
   position: absolute;
   top: 45%;      /*ヘッダーブロックに対して上から50%の場所に配置*/
   width: 100%;   /*幅*/
}
/*メニュー１個あたりの設定*/
#menubar li {
   display: inline;  
}
#menubar li a {
   display: inline-block;  
   text-decoration: none;  
   color: #fff;            
   font-weight:bold;
   font-size: 20px;        
   letter-spacing: 0.2em;  
   width: 160px;           
   line-height: 160px;     
   border-radius: 20%;     
   border: 3px solid #fff; 
   margin: 10px;           
   text-shadow: 0px 0px 3px rgba(0,0,0,0.6);
   background:#888;opacity:0.8;-moz-opacity:0.7;filter:alpha(opacity=80);
}

#menubar li a:hover {
   background: #E1DCD5;
   border: 5px solid #fff;
   color:#000;
}

#news dl {
   padding: 0px 10px 20px;
}
#news dt {
   font-weight: bold;
   float: left;
}
#news dd {
   padding-left: 8em;
}

section {
   overflow: hidden;
   background: #fff; /*背景色（古いブラウザ用）*/
   background: rgba(255,255,255,0.8); 
   padding: 100px 4% 4%;;   /*ボックス内の余白*/
   margin-bottom: 80%;  /*ボックスの下にとる余白。背景の写真を見せる為にウィンドウの高さの80%の余白をあけていますがお好みにあわせて変更してもらってOK。*/
}

.hf{
   width:48%;
   display:inline-block;
}

/*Gallery
---------------------------------------------------------------------------*/
/*画像の設定*/
.figure img {
   float: left;   /*左に回り込みさせる設定*/
   width: 18%;    /*画像の幅*/
   margin: 0px 1% 15px; /*画像の外側に空けるスペース。左から、上(0px)、左右(1%)、下(15px)への設定。*/
   border-radius: 50%;     /*角丸のサイズ。50%にすると円形になる。正方形がいいなら、この１行削除する。*/
}

/*フッター(ページ最下部のcopyrightのパーツ)設定
---------------------------------------------------------------------------*/
footer {
   font-size:13px;
   clear: both;
   text-align: center;  /*文字をセンタリング*/
   padding: 10px 0px;   /*左から、上下、左右への余白*/
   color: #fff;      /*文字色*/
   text-shadow: 1px 1px rgba(0,0,0,0.8);  /*テキストの影。右へ、下へ、色(rgba)の設定。rgba値は左３つが色指定(この場合は黒)で最後の小数点が透明度。*/
   margin-top: -70%;
}
footer a {
   text-decoration: none;
   border: none;
   color: #fff;   /*文字色*/
}
footer .pr {
   display: block;
}

/*テーブル
---------------------------------------------------------------------------*/
/*tテーブルブロック設定*/
.ta1 {
   width: 96%;
   margin: 0px auto 15px;
}
.ta1, .ta1 td, .ta1 th {
   border: 2px solid #5d5e4c; /*テーブルの枠線の幅、線種、色*/
   padding: 10px;       /*テーブル内の余白*/
   word-break: break-all;
}
/*テーブル１行目に入った見出し部分*/
.ta1 th.tamidashi {
   width: auto;
   text-align: left; /*左よせ*/
   background: #eee; /*背景色*/
}
/*テーブルの左側ボックス*/
.ta1 th {
   width: 30%; /*幅*/
   text-align: center;  /*センタリング*/
}

/*ページの上部へ（↑）ボタン
---------------------------------------------------------------------------*/
.pagetop {
   text-align: right;
}
.pagetop a {
   display: inline-block;
   text-decoration: none;
   text-align: center;
   background: #5d5e4c; /*背景色*/
   color: #fff;         /*文字色*/
   border-radius: 50%;     /*角丸のサイズ*/
   width: 40px;         /*幅*/
   line-height: 40px;      /*高さ*/
}

/*背景用画像の設定（※実際にはcss背景画像でなく、画像としてhtml側の一番下に配置しています）
---------------------------------------------------------------------------*/
#bg img {
   position: fixed;
   left: 0px;
   top: 0px;
   z-index: -1;
   width: 100%;
   height: 100%;
}

/*その他
---------------------------------------------------------------------------*/
.look {background: #333; color: #fff;padding: 5px 10px;border-radius: 4px;}
.mb15,.mb1em {margin-bottom: 15px;}
.color1 {color:#d50f26;}
.pr {font-size: 10px;}

body{
  background-image: url("../img/bg.jpg"); /* 全体の背景画像 */
  background-repeat: no-repeat;            /* 背景を繰り返さない */
  background-position: 50% 50%;            /* 背景画像の位置は画面中央 */
  background-attachment:fixed;             /* 背景画像を固定する */
  background-size:cover; /*contain
}




@media screen and (max-width:1200px){

#menubar {
   top: 40%;      /*ヘッダーブロックに対して上から50%の場所に配置*/
}
}

/*画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:900px){

#menubar {
   top: 35%;      /*ヘッダーブロックに対して上から50%の場所に配置*/
}
}


/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){

   #menubar {
      top: 30%; 
   }
   p {
      padding: 0px 10px 20px; /*上、左右、下への余白*/
   }

   #menubar li a {
      font-size: 16px;           /*文字サイズ。*/
      letter-spacing: normal;
      width: 140px;     /*幅。下のline-heightと数字を合わせる。*/
      line-height: 140px;  /*高さ。上のwidthと数字を合わせる。*/
   }

   .list figure img {
      width: 12%;    /*画像の幅*/
   }

   .ta1, .ta1 td, .ta1 th {
      padding: 5px;        /*テーブル内の余白*/
   }
   .hf{ width:100%; }
}
@media screen and (max-width:450px){
   header{ height:700px;}
   #menubar {
      top: 25%;      /*ヘッダーブロックに対して上から50%の場所に配置*/
   }
   #menubar li a {
      font-size: 16px;  /*文字サイズ。*/
      width: 100px;     /*幅。下のline-heightと数字を合わせる。*/
      line-height: 100px;  /*高さ。上のwidthと数字を合わせる。*/
   }
   
}