@charset "utf-8"; /*スタイルシートのエンコーディングをUTF-8に指定 */
body {
  font-family: "Yu Mincho", YuMincho, serif; /* サイト全体のフォント指定　Windows、Mac、総称（セリフ体、明朝系）　 */
}
/* ======================= ヘッダー */
header {
  border-top: 10px solid #511717; /* 上ボーダーに10px、実線、茶色（#511717）を指定 */
}
header h1 {
  margin: 0; /* 上0px、右0px、下0px、左0px のマージンを指定 */
  text-align: center; /* 内容を中央揃えに */
}
header h3 {
  margin: 0; /* 上0px、右0px、下0px、左0px のマージンを指定 */
  text-align: center; /* 内容を中央揃えに */
  color: red;
}
header nav ul { /* リスト */
  width: 940px; /* 幅を940pxに指定 */
  padding-left: 0; /* デフォルトスタイルをリセット */
  margin: 0 auto 30px auto; /* 上 0px、右 auto、下 30px、左 auto */
  list-style-type: none; /* リストマーカーを消す */
}
header nav ul li { /* リスト項目 */
  width: 155px; /* 幅を155pxに指定 */
  margin-right: 2px; /* リスト項目と右隣りのリスト項目の間を2px空ける */
  float: left; /* 左フロート */
  text-align: center; /* テキストを中央揃え */
}
header nav ul li:last-child {/* 最後のリスト項目 */
  margin-right: 0; /* 右マージン0 */
}
.clearfix:after { /* clearfixというクラス名を付けた要素の直後(::after)に */
  content:""; /* contentプロパティで任意の文字などを挿入 */
  display: block; /* それをブロック要素にして */
  clear: both; /* ここでfloatを解除 */
}
header nav ul li a {
  text-decoration: none; /* 下線を消す */
  background-color: #511717; /* 背景色を茶色（#511717）に */
  color: #fff; /* 文字色を白（#fff） */
  padding: 10px 0; /* パディング 上下10px 左右0px */
  display: block; /* ブロックレベル表示 */
}
header nav ul li a:hover, /* カーソルを乗せた時 */
header nav ul li a:active, /* クリックした時 */
header nav ul li.current a { /* 現在ページの時 */
  background-color: #000;
}
/* ======================= フッター */
footer {
  background-color: #511717;  /* 背景色を茶色（#511717）に */
  color: #fff;  /* 文字色を白（#fff） */
  padding: 30px 0; /* パディング 上下30px 左右0px */
  text-align: center; /* 中央揃え */
}
footer ul {
  padding: 0;  /* パディングのデフォルトスタイルを修正 */ 
  margin-bottom: 30px; /* 下マージン30px */
}
footer ul li {
  display: inline; /* インライン表示にして横並びに配置 */
  margin: 0 10px; /* 上下マージン 0 左右マージン 10px */
}
footer ul li a {
  color: #fff; /* 文字色を白（#fff） */
}
footer ul li a:link, /* 未訪問リンクのセレクタ */
footer ul li a:visited {   /* 訪問済リンクのセレクタ */
  text-decoration: none;  /* リンクテキストの下線を消す */
}
footer ul li a:hover,  /* カーソルを乗せた時のセレクタ */
footer ul li a:active {    /* クリックした時のセレクタ */
  text-decoration: underline; /* リンクテキストの下線を表示する */
}
/* ======================= メイン */
main {
  width: 940px;  /* メインを940pxの固定幅に */
  margin: 0 auto; /* 上下マージン 0 左右マージン auto 中央に配置 */
}
/* パンくずリスト */
#topic_path {
  padding-left: 0;  /* ol要素　デフォルトスタイルの左パディングを0に */
}
#topic_path li {
  display: inline; /* インライン表示にして横並びに配置 */
  font-size: 80%;  /* 親要素のフォントサイズから80% */
}
#topic_path li:after {
  padding: 0 10px;  /* パディング 上下0px 左右10px */
  content: "\003E"; /* 大なり記号を挿入（数値文字参照） */
}
#topic_path li:last-child:after { /* 最後のli要素の後ろ */
  content: none;  /* 大なり記号を挿入しない */
}
main a:link,  /* 未訪問リンクのセレクタ */
main a:visited {   /* 訪問済リンクのセレクタ */
  color: #511717;  /* 茶色に */
}
/* 大見出し */
main h1 {
  border-left: 10px solid #511717; /* 左ボーダーを茶色（#511717）の10px幅の実線で */
  border-bottom: 1px solid #511717;/* 下ボーダーを茶色（#511717）の1px幅の実線で */
  padding: 5px 10px; /* 上下5px 左右10pxのパディング */
  margin-bottom: 30px; /* 30pxの下マージン */
  font-size: 1.8em;  /* 既定 1em=16px  1.8em×16=28.8px */
}
/* 中見出し */
main h2 {
  font-size: 1.5em;  /* 既定 1em=16px  1.5em×16=24px */
  text-align: center;  /* 中央揃え */
  position: relative; /* 基準位置 */
  margin-bottom: 50px; /* 50pxの下マージン */
}
main h2:before,
main h2:after {
  position: absolute; /* 絶対配置 */
  content: ""; /* 空の内容挿入 */
  border-top: 1px dotted #511717;  /* 上ボーダー 1px 茶色の点線  */
  width: 300px;  /* 300pxの幅  */
  top: 50%; /* 上から50%の位置  */
}
main h2:before {
  left: 0; /* 左から0の位置  */
}
main h2:after {
  right: 0; /* 右から0の位置  */
}
#h3 {
  font-size: 1.5em;  /* 既定 1em=16px  1.5em×16=24px */
  text-align: center;  /* 中央揃え */
  position: relative; /* 基準位置 */
  margin-bottom: 50px; /* 50pxの下マージン */
  color: red;
}
#h4 {
  font-size: 1.2em;  /* 既定 1em=16px  1.2em×16=19.2px */
  text-align: center;  /* 中央揃え */
  position: relative; /* 基準位置 */
  margin-bottom: 50px; /* 50pxの下マージン */
  color: red;
}
/* ページトップ */
.page_top {
  text-align: center; /* テキスト　中央位置  */
  margin-top: 100px; /* 上マージン 100px  */
  margin-bottom: 10px; /* 下マージン 10px  */
}
.page_top a {
  padding-top: 4px; /* 上パディング 4px  */
  border-top: 4px solid #511717; /* 上ボーダー 4px 茶色の実線 */
}
.page_top a:before {
  content: "↑"; /* 上向きの矢印 */
}
.page_top a:link, /* 未訪問リンクのセレクタ */
.page_top a:visited {  /* 訪問済リンクのセレクタ */
  color: #511717;   /* 茶色に */
  text-decoration: none;   /* リンクテキストの下線を消す */
}
/* リード文 */
.lead {
  line-height: 1.8em;  /* 行の高さ font-size×1.8  */
  margin-bottom: 3em;  /* 下マージン font-size×3  */
  font-size: 110%;  /* 既定 16px110%=17.6px */
}
/* ====================== HOME(index.html) */
#main_content {
  width: 600px; /* 幅を600pxに指定 */
  float: left; /* 左フロート */
}
#banner {
  width: 300px; /* 幅を300pxに指定 */
  float: right; /* 右フロート */
}
#home h2 {
  text-align: left;  /* テキストを左揃えに  */
  border-left: 10px solid #511717;   /* 左ボーダーに10px、実線、茶色（#511717）を指定 */
  border-bottom: 1px solid #511717;   /* 下ボーダーに1px、実線、茶色（#511717）を指定 */
  padding: 5px 10px; /* 上下5px 左右10pxのパディング */
  margin-top: 0px; /* 上マージン 0px  */
  margin-bottom: 0px; /* 下マージン 0px  */
  font-size: 1.5em;  /* 既定 16px1.5=24px */
}
#home main h2:before,
#home main h2:after {
  border-top: none; /* トップページでは挿入したボーダーを消す */
}
/* バナーエリア */
#banner ul {
  margin: 0; /* 上0px、右0px、下0px、左0px のマージンを指定 */
  padding: 0;/* 上下左右　0pxのパディング */
  list-style-type: none; /* リストマーカーを消す */
}
#banner ul li {
  margin-bottom: 20px; /* 下マージン 20px  */
}
/* テーブル */
table {
  border-collapse: collapse; /* 隣接するセルのボーダーを重ねて表示  */
  margin: 0 auto 30px; /* マージン上 0px  左右 auto 下 30px  */
  border: 1px solid #813737; /* ボーダーはすべて薄茶色の実線  */
}
table th, table td {
  padding: 10px 20px; /* th td 共に上下10px 左右20pxのパディング */
}
table th {
  border-right: 1px solid #813737; /* thの右ボーダー 1px 薄茶色の実線  */
}
table.ta1 tr:nth-child(odd) { /* 奇数行毎に */
  background-color: #E1CFBA; /* 背景色を薄茶色に */
}

/* ====================== gugan(tusin.html input.html user_nin.html user_nin_2.html user_nin_3.html user_nin_4.html  user_nin_5.html user_nin_6.html seiseki.html ) */
#gugan form {
  width: 820px;  /* フォームの幅 820px  */
  margin: 0 auto; /* 上下マージン 0 左右マージン auto 中央に配置 */
}
#gugan dl dt, #gugan dl dd {
  line-height: 2em;  /* 行の高さ font-size×2  */
  margin-left: 0;  /* 左マージン0  */
}
#gugan dl dt {
  width: 380px; /* 幅 380px*/
  float: left; /* 左フロート */
  text-align: right; /* テキストを右揃え */
  padding: 10px;  /* 上下左右のパディング 10px  */
}
#gugan dl dd {
  width: 400px; /* 幅 400px*/
  float: right; /* 右フロート */
  padding: 10px;  /* 上下左右のパディング 10px  */
}
#gugan input[type="number"] {
  padding: 5px;  /* 上下左右のパディング 5px  */
  width: 100px; /* 幅 100px*/
}
#gugan input[type="text"],
#gugan input[type="tel"],
#gugan input[type="email"],
#gugan input[type="password"],
#gugan textarea {
  padding: 5px;  /* 上下左右のパディング 5px  */
  width: 320px; /* 幅 300px*/
}
#gugan textarea {
  height: 5em;  /* テキストエリアの高さ font-size×5  */
}
#gugan .button {
  text-align: center; /* テキストを中央揃え */
}
#gugan input[type="submit"] {
  background-color: #511717;  /* 背景色 茶色  */
  color: #fff;  /* 文字は白色  */
  padding: 10px 30px; /* 上下10px 左右30pxのパディング */
  font-family: "Yu Gothic",YuGothic, sans-rerif;  /* フォント指定  */
  border: 1px solid #511717; /* ボーダーに1px、実線、茶色（#511717）を指定 */
  cursor: pointer; /* カーソルをポインターに */
}

/* ====================== スマートフォン */
@media screen and (max-width: 650px){    
  img {
    max-width: 100%;  /* 最大の幅が画面サイズ （画面サイズに合わせて幅が変化） */
    height: auto;  /* 縦横比を保持  */
  }
  header, main, #main_content, #banner, header nav ul {
    width: 100%;   /* 固定サイズを指定している箇所 幅を100%で指定  */
  }
  header nav ul li {
    margin-right: 0;  /* 右マージン0  */
    width: 50%; /* 幅を50%に指定 */
    box-sizing: border-box; /* ボックスサイズの算出方法を指定　ボーダーの幅を50%に含める */
    border:1px solid #fff; /* ボーダーに1px、実線、白色を指定 */
  }
  main {
    padding: 0 15px;  /* 上下0px、左右15px */
    box-sizing: border-box; /* ボックスサイズの算出方法を指定　パディングを幅に含める */
  }
  #banner {
    float: none;  /* フロートを解除  */
    text-align: center;  /* テキストを中央揃え  */
  }
  footer ul {
    display: none; /* フッターのナビゲーション非表示に */
  }  
  /* ====================== gugan(tusin.html input.html user_nin.html user_nin_2.html user_nin_3.html user_nin_4.html  user_nin_5.html user_nin_6.html seiseki.html ) */
  #gugan form {
    width: 100%; /* 幅を100%に指定 */
  }
  #gugan dl dt {
    width: 100%; /* 幅を100%に指定 */
    box-sizing: border-box; /* ボックスサイズの算出方法を指定　ボーダーの幅を100%に含める */
    text-align: left;  /* テキストを左揃え  */
    float: none;  /* フロートを解除  */
    background-color: #E1CFBA;  /* 背景色を指定  */
    padding: 5px;  /* 上下左右のパディング 5px  */
  }
  #gugan dl dd {
    width: 100%; /* 幅を100%に指定 */
    box-sizing: border-box; /* ボックスサイズの算出方法を指定　ボーダーの幅を100%に含める */
    float: none;  /* フロートを解除  */
    margin-bottom: 20px;  /* 下マージン 20px  */
  }
  #gugan input[type="text"],
  #gugan input[type="email"],
  #gugan textarea {
    padding: 5px;  /* 上下左右のパディング 5px  */
    width: 100%; /* 幅を100%に指定 */
    box-sizing: border-box; /* ボックスサイズの算出方法を指定　ボーダーの幅を100%に含める */
  }
}
/* アニメーション  */
@keyframes amida {
  0% {opacity:0;}
  100% {opacity:1;}
}
.blinking{
  animation:amida 1s ease-in-out infinite alternate;
}