@charset "utf-8";
/*+++++++++++++++++++++++++++++
 札幌えんじゅCSS
++++++++++++++++++++++++++++++*/

/* ▼全端末（PC・タブレット・スマホ）共通設定ここから▼
-------------------------------------------------------*/

/*全体の設定
-------------------------------------------------------*/
html {font-size: 62.5%;}
body,html {width: 100%; height: 100%;}
body {
    margin: 0px;
    padding: 0px;
    color: #666; /*全体の文字色*/
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; /*フォント種類*/
    font-size: 1.6rem; /*文字サイズ*/
    line-height: 1.5em; /*行間*/
    background: #FFFFFF; /*背景色*/
    background-image: url(/img/bgi.jpg); /* 背景画像 */
    background-repeat: repeat;
    background-attachment: fixed;
    -webkit-text-size-adjust: none;
    scroll-behavior: smooth;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form,strong {margin: 0px; padding: 0px; font-size: 1.6rem;}
ul {margin: 0px; list-style-type: none; list-style-position: outside;}
ul li {padding: 0px;}
ol { list-style-position: outside;}
ol li {padding: 0px 0px;}
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: #5036ed;        /*リンクテキストの色*/
  text-decoration: none;
  transition: 0.4s;    /*マウスオン時の移り変わるまでの時間設定。0.4秒。*/
}
a:hover {
  color: #c45308;            /*マウスオン時の文字色*/
  text-decoration: none;    /*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}

/*トップページ（※index.shtml）の設定
---------------------------------------------------------------------------*/
body.home {
  background: url(/img/mainimg.jpg) no-repeat center center;    /*背景画像の設定（古いブラウザ用）*/
  background: url(/img/mainimg.jpg) no-repeat center center / cover;    /*背景画像の設定*/
}
/*ロゴ*/
body.home .logo {
  /*background: ;    背景色 未設定で透明*/
  text-align: center;    /*ロゴ画像の配置を左右の中央に*/
  padding: 10px;        /*ブロック内の余白*/
  position: relative;    /*下の配置場所を指定する為に必要なスタイル*/
  top: 15%;            /*上から○%の場所に配置*/
  animation-name: home-logo;    /*下のアニメーションで指定しているkeyframesの名前（@keyframes home-logo）*/
  animation-duration: 0.2S;    /*アニメーションの実行時間。0.2秒。*/
  animation-fill-mode: both;
  animation-delay: 1s;    /*１秒遅れてアニメーションをスタートさせる*/
}

body.home .logo img {
  width: 400px;    /*ロゴ画像の幅*/
}
/*ロゴのアニメーション*/
@keyframes home-logo {
  0% {opacity: 0;transform: scaleY(0);}
  100% {opacity: 1;transform: scaleY(1)}
}

/*container。サイト全体を囲むブロック
---------------------------------------------------------------------------*/
#container {
  max-width: 1500px;    /*最大幅の制限。これ以上広がらない。*/
}

/*[PC用] mainブロック
---------------------------------------------------------------------------*/
#main {
  float: right;    /*右に回り込み*/
  width: 68%;        /*ブロックの幅*/
  margin-top: 30px;    /*上に空けるブロックの外側へのスペース*/
  margin-right: 3%;    /*右に空けるブロックの外側へのスペース*/
}
/*mainブロック内のh2(見出し)タグ*/
#main h2 {
  clear: both;
  margin: 2em 0em 1.5em 0em;    /*上右下左に空けるスペース*/
  text-align: center;        /*文字を中央に*/
  background: #927602;        /*背景色*/
  color: #fff;            /*文字色*/
  font-size: 1.6rem;
  border-radius: 30px;    /*角丸のサイズ*/
  line-height: 1.3;        /*行間*/
  padding: 10px 30px;        /*上下、左右へのブロック内の余白*/
}
#main h2.blue {
  background: #4a53ae;   /*背景色の変更*/
  margin: 2em 0.5em 1.5em 0.5em;    /*上右下左に空けるスペース*/
  padding: 8px 30px;        /*上下、左右へのブロック内の余白*/
}
#main h2.green {
  background: #4aae8b;   /*背景色の変更*/
  margin: 2em 0.5em 1.5em 0.5em;    /*上右下左に空けるスペース*/
  padding: 8px 30px;        /*上下、左右へのブロック内の余白*/
}
/*mainブロック内のh3(見出し)タグ*/
#main h3 {
  clear: both;
  margin: 1.5em 0.5em;    /*見出しの上下左右に空けるスペース*/
  background: #f6e08a;        /*背景色*/
  border-top: solid 2px #927602;
  border-bottom: solid 2px #927602;
  border-left: solid 18px #927602;
  border-right: solid 18px #927602;
  font-size: 1.6rem;
  text-indent: 0.5em;
  font-weight: bold;
}
/*h2タグとh3タグ内のspanタグ*/
#main h2 span, #main h3 span {
  display: block;
  font-weight: normal;    /*見出しのデフォルトの太字を標準にする設定*/
  font-size: 1.2rem;    /*文字サイズを少し小さめに*/
  letter-spacing: 0.2em;    /*文字間隔を少し広めに*/
}
/*mainブロック内のh4(見出し)タグ*/
#main h4 {
  margin: 1.5em 0.5em 0.5em 0.5em;    /*上右下左に空けるスペース*/
  line-height: 1.3;        /*行間*/
  text-indent: 0.5em;
  background: linear-gradient(transparent 50%, #f6e08a 50%); width: 90%;
}
#main h4:before {
  content: '■';
  font-size: 1.8rem;
  margin-right: 0.5em;
}
/*h4タグ内のspanタグ*/
#main h4 span {
    color: #F00;
}

/*mainブロック内のp(段落)タグ設定*/
#main p {
  padding: 1em 1em;    /*上下、左右への余白*/
}
#main h2 + p,
#main h3 + p,
#main h4 + p {
    padding-top: 0px;
}
/*mainブロック内のsection間のスペース*/
#main section {
    margin: 0em;
}
/*index2.shtmlトップのロゴ指定*/
#main .logo {
  width: 100%;
  margin-bottom: 0px;
}
#main .logo img {
  max-width: 200px;
}

/*[PC用] listブロック（works.shtml内で使用）
---------------------------------------------------------------------------*/
/*ブロック単位の設定*/
.list {
  position: relative;overflow: hidden;
  float: left;    /*左に回り込み*/
  width: 30%;        /*幅*/
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);    /*ボックスの影。右へ、下へ、広げる幅。0,0,0は黒の事で0.1は10%色がついた状態の事。*/
  line-height: 1.4;    /*行間を少し狭く。デフォルトの値は冒頭の「body」にあります。*/
  margin-left: 2.5%;    /*左に空けるボックスの外側へのスペース。左右間の余白になります。*/
  margin-bottom: 20px;    /*下に空けるボックスの外側へのスペース。上下間の余白になります。*/
  background: #fff;    /*背景色*/
  height: auto;    /*下の「.list a」のheightの数字と合わせる*/
}
.list figure img{
  width: 100%;        /*幅*/
  max-height: 150px;   /*高さ*/
}
.list a {
  position: relative;overflow: hidden;text-decoration: none;display: block;
  height: auto;    /*上の「.list」のheightの数字と合わせる*/
}
/*マウスオン時のlistブロック*/
.list a:hover {
  background: #000;    /*背景色*/
  color: #fff;        /*文字色*/
}
/*リンクを設定した際に出るボックス内の「→」マーク*/
.list a::after {
  content: "▶";    /*このテキストを表示させる。*/
  display: inline-block;
  text-align: center;
  width: 15px;    /*幅*/
  line-height: 15px;    /*高さ*/
  position: absolute;
  right: 10px;    /*listブロックに対して右から10pxの場所に配置*/
  bottom: 10px;    /*listブロックに対して下から10pxの場所に配置*/
  font-size: 10px;    /*文字サイズ*/
  background: #000;    /*背景色*/
  color: #fff;        /*文字色*/
}
/*「→」マークのマウスオン時*/
.list a:hover::after {
  background: #fff;    /*背景色*/
  color: #000;        /*文字色*/
}
/*listブロック内のh5タグとpタグ共通設定*/
.list h5, .list p {
  padding: 0 !important;
  margin: 0 !important;
}
/*listブロック内のh5タグ*/
.list h5 {
  font-size: 14px;
  color: #fff;/*文字色*/
  background: #927602; /*背景色*/
  margin: 10px 10px !important;
  padding: 2px 15px !important;/*文字周りの余白*/
  display: inline-block;/*おまじない*/
  line-height: 1.2;/*行高*/
  vertical-align: middle; /*上下中央*/
  border-radius: 25px 25px 25px 25px;/*左側の角を丸く*/
}
/*マウスオン時のh5タグ*/
.list a:hover h5 {
  color: #fff;    /*文字色*/
}
/*listブロック内のpタグ*/
.list p {
  font-size: 12px;    /*文字サイズ*/
  padding: 0 30px 10px 10px !important;    /*↑→↓←への余白*/
}

/*[PC用] subメニューブロック
---------------------------------------------------------------------------*/
#sub {
  float: left;    /*左に回り込み*/
  width: 25%;        /*ブロックの幅*/
  max-width: 320px;    /*最大幅の制限。これ以上広くならない。*/
  height: 100%;    /*高さ*/
  background: url(/img/shikisai.jpg) no-repeat center center;    /*背景画像の読み込み（古いブラウザ用）*/
  background: url(/img/shikisai.jpg) no-repeat center center / cover;    /*背景画像の読み込み*/
  text-align: center;    /*ブロック内を中央に*/
  position: fixed;    /*画面をスクロールしても固定させる指定*/
  box-shadow: 0px 0px 20px rgba(0,0,0,0.5);    /*ブロックの影。右に、下に、広げる幅、0,0,0は黒の事で0.5は50%色が出た状態。*/
}
/*subブロックのロゴ*/
#sub .logo {
  width: 80%;    /*ロゴ画像の幅*/
  margin: 40px auto;    /*上下、左右へとるスペース*/
}

/*[PC用] メインメニュー
---------------------------------------------------------------------------*/
/*メニューブロック*/
#menubar {
  border-top: 1px solid #fff;    /*上の線の幅、線種、色*/
}
/*メニュー１個あたりの設定*/
#menubar ul {
  margin-left: 0px;
  padding-left: 0px;
} 
#menubar li {
  border-bottom: 1px solid #fff;    /*下の線の幅、線種、色*/
  width: 100%;
}
#menubar li a {
  display:  block;text-decoration: none;
  font-size: 105%;    /*文字サイズ*/
  color: #fff;    /*文字色*/
  font-weight: bold;
  padding: 15px 5px;    /*上下、左右へのメニュー内の余白*/
  position: relative;    /*下の「■」を配置指定する為に必要なスタイル*/
}
/*説明表記（飾り文字）*/
#menubar li a span {
  display: block;
  font-weight: normal;
  font-size: small;    /*文字サイズ*/
}

/*現在表示中のメニューのカラーを指定*/
#menubar li.cur a {
  background-color :  transparent;    /*背景色を透明化*/
  color: #fff;     /*文字色*/
}
/*マウスオン時の設定*/
#menubar li.cur a:hover:after {
  color: #ddb71e;         /*文字色*/
  transition: 0.4s;    /*マウスオン時の移り変わるまでの時間設定。0.4秒。*/
}
#menubar li.cur a:hover {
  background: #ddb71e;    /*背景色*/
  color: #000;         /*文字色*/
}
/*現在表示中のメニューの右側に出る矢印マーク*/
/*htmlで「content: "■";」を指定しているところに表示 */
#menubar li.cur a::after {
  display: block;
  color: #927602;
  font-size: 30px;
  position: absolute;
  right: -10px;    /*上で「position:relative」を指定している「#menubar li a」ブロックに対して右から-10pxの場所に配置*/
  top: 18px;        /*上で「position:relative」を指定している「#menubar li a」ブロックに対して上から10pxの場所に配置*/
  transform: rotate(45deg);    /*45度回転させる*/
  transition: 0.4s;    /*マウスオン時の移り変わるまでの時間設定。0.4秒。*/
}

/*スマホ用メニューを表示させない*/
#menubar-s {display: none;}
/*３本バーアイコンを表示させない*/
#menubar_hdr {display: none;}

/*footerブロック
---------------------------------------------------------------------------*/
footer {
  clear: both;
  text-align: right;    /*右寄せ*/
  padding-top: 50px;    /*上に空ける余白*/
  padding-right: 3%;    /*右に空ける余白*/
  font-size: 12px;    /*文字サイズ*/
}
footer a {text-decoration: none;}
footer .pr {display: block;}

/*「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
/*見出しを含まないお知らせブロック*/
#new dl {
  padding: 0 30px;
}
/*日付設定*/
#new dt {
  float: left;
  width: 9em;        /*幅*/
  letter-spacing: 0.1em;
}
/*記事設定*/
#new dd {
  padding-left: 9em;
}

/*[PC用] テーブル（ta1）スマホ用は630行目あたり
（ta2）はスマホ用のレイアウト変更ナシで、divでスクロール対応
---------------------------------------------------------------------------*/
/*ta1設定*/
.ta1 {
  width: 100%;
  margin: 0 auto 0px;
}
.ta2 {
  width: 90%;
  margin: 0 auto 0px;
  table-layout: fixed;
}
.ta1 td,.ta2 td,th {
  border: 1px solid #999;    /*テーブルの枠線の幅、線種、色*/
  background: #fff;    /*背景色*/
  padding: 5px 5px;    /*ボックス内の余白*/
}
/*ta1の左側ボックス*/
.ta1 th,.ta2 th {
  width: auto;    /*幅*/
  font-weight: bold;    /*文字の太さ*/
  background: #eee;    /*背景色*/
  white-space: nowrap; /*文字折り返し禁止*/
}
/*テーブル１行目に入った見出し部分*/
.ta1 th.tamidashi,.ta2 th.tamidashi {
  width: auto;
  text-align: center;    /*左よせ*/
  background: #ddd;    /*背景色*/
}
/*左側ボックスに画像を入れた場合の設定*/
.ta1 th img,.ta2 th img {
  width: auto;
}
/*左側ボックスのspanの文字色*/
.ta1 th span,.ta2 th span {
  color: #ff0000;
}
/*左側ボックスを目立つ色にする場合のクラス*/
.ta1 th.cap,.ta2 th.cap {
  background-color: #008;
  color: #fff;
  white-space: normal; /*文字折り返し禁止*/
}
.ta1 th div,.ta2 th div {
  display: inline-block;
  line-height: 24px;
  padding: 0;
  margin: 0 2px;
  text-align: left;    /*文字位置*/
  vertical-align: middle;
  white-space: nowrap;
}

/*スマホスクロール用のクラス*/
.scroll{
  overflow: auto; /*tableをスクロールさせる*/
  white-space: nowrap; /*tableのセル内にある文字の折り返しを禁止*/
}
.scroll::-webkit-scrollbar{  /*tableにスクロールバーを追加*/
  height: 5px;
}
.scroll::-webkit-scrollbar-track{ /*tableにスクロールバーを追加*/
  background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb { /*tableにスクロールバーを追加*/
  background: #BCBCBC;
}

/*ページの上部に戻る「↑」ボタン
---------------------------------------------------------------------------*/
@keyframes scroll {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
/*通常時のボタンは非表示*/
body .nav-fix-pos-pagetop a {
  display: none;
}
/*fixmenu_pagetop.jsで設定している設定値になったら出現するボタンスタイル*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
  display: block;text-decoration: none;text-align: center;
  width: 50px;    /*ボタンの幅*/
  line-height: 50px;    /*ボタンの高さ*/
  position: fixed;z-index: 99;
  bottom: 20px;    /*ウィンドウの下から20pxの場所に配置*/
  right: 1%;        /*ウィンドウの右から1%の場所に配置*/
  background: #000;    /*背景色（古いブラウザ用）*/
  background: rgba(0,0,0,0.6);    /*背景色。0,0,0は黒の事で0.6は60%色がついた状態。*/
  color: #fff;    /*文字色*/
  border-radius: 50%;    /*角丸指定。50%にすると円形になる。四角形がいいならこの１行削除。*/
  animation-name: scroll;    /*上のアニメーションで指定しているkeyframesの名前（scroll）*/
  animation-duration: 1S;    /*アニメーションの実行時間*/
  animation-fill-mode: forwards;    /*アニメーションの完了後、最後のキーフレームを維持する*/
}
/*マウスオン時の背景色*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
  background: #999;
}

/*トップページのNEWアイコン
---------------------------------------------------------------------------*/
.newicon {
  background: #F00;    /*背景色*/
  color: #FFF;        /*文字色*/
  font-size: 70%;        /*文字サイズ*/
  line-height: 1.5;
  padding: 2px 5px;
  border-radius: 2px;
  margin: 0px 5px;
  vertical-align: text-top;
}

/*その他
---------------------------------------------------------------------------*/
.look {background: #c3b5a2;background: rgba(0,0,0,0.1);padding: 5px 10px;border-radius: 4px;}
#sp-sub {display: none;}


/*▲ 全端末（PC・タブレット・スマホ）共通設定　ここまで ▲
-----------------------------------------------------------------------------------------------*/


/*画面幅が801px以上、かつ、高さが650px以下の場合の設定。
左メニューが650px以下になると切れて見えなくなるので、固定からスクロール表示に切り替えます。
-----------------------------------------------------------------------------------------------*/
@media screen and (min-width:801px) and (max-height:650px){

/*subブロック
---------------------------------------------------------------------------*/
#sub {
  position: absolute;    /*固定からスクロール表示に変更*/
  height: auto;
}

}



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

/*[800px以下] メインメニュー
---------------------------------------------------------------------------*/
/*アニメーションのフレーム設定。全100コマアニメーションだと思って下さい。
透明(opacity: 0;)から色をつける(opacity: 1;)までの指定。*/
@keyframes menubar {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
/*スマホ用メニューブロック*/
#menubar-s {
  display: block;overflow: hidden;
  position: fixed;
  z-index: 99;
  top: 40px;
  width: 100%;
  background: rgba(0,0,0,0.8);    /*背景色*/
  border-top: 1px solid #fff;        /*上の線の幅、線種、色*/
  animation-name: menubar;        /*上のkeyframesの名前*/
  animation-duration: 0.5s;    /*アニメーションの実行時間。0.5秒。*/
  animation-fill-mode: both;    /*待機中は最初のキーフレームを、完了後は最後のキーフレームを維持*/
}
/*メニュー１個あたりの設定*/
#menubar-s ol,ul {
  margin-left: 0px;
  padding-left: 0px;
}
#menubar-s li a {
    display: block;text-decoration: none;
    padding: 4px 15px;    /*メニュー内の余白。上下、左右。*/
    border-bottom: 1px solid #fff;    /*下の線の幅、線種、色*/
    color: #fff;    /*文字色*/
    font-size: -0.5em;
    margin-left: 0px;
    }
/*説明表記（飾り文字）*/
#menubar-s li a span {
    display: block;
    font-size: -1em;    /*文字サイズ*/
    color: #999;    /*文字色*/
    }
/*PC用メニューを非表示にする*/
#menubar {display: none;}

/*[800px以下] ３本バーアイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr {
    display: block;
    position: fixed;
        z-index: 99;
    top: 5px;        /*上から5pxの場所に配置*/
    right: 5px;            /*右から5pxの場所に配置*/
    border: 1px solid #fff;    /*枠線の幅、線種、色*/
}
/*アイコン共通設定*/
#menubar_hdr.close,
#menubar_hdr.open {
    width: 30px;    /*幅*/
    height: 30px;    /*高さ*/
}
/*三本バーアイコン*/
#menubar_hdr.close {
    background: url(/img/icon-menu.png) no-repeat center top/30px;    /*背景画像の読み込み、画像の上半分（３本マーク）を表示。pxで幅指定。*/
}
/*閉じるアイコン*/
#menubar_hdr.open {
    background: url(/img/icon-menu.png) no-repeat center bottom/30px;    /*背景画像の読み込み、画像の下半分（×マーク）を表示。pxで幅指定。*/
}

/*[800px以下] mainブロック
---------------------------------------------------------------------------*/
/*左右の余白をゼロにする*/
#main {
    float: none;
    margin: 60px 0;
    width: auto;
}
/*sectionで囲まれたところのみ左右に余白ができる*/
#main section {
    margin: 0 3%;
}

/*[800px以下] subメニューブロック
---------------------------------------------------------------------------*/
#sub {
    display: none;
}

/*小さな端末用(800px以下)で表示させるメニューブロック
---------------------------------------------------------------------------*/
#sp-sub {
    display: block;    /*非表示から表示に切り替える*/
    position: fixed;
        z-index: 99;
    top: 0px;    /*上から0pxの場所に配置*/
    height: 40px;    /*スマホメニューのブロックの高さ*/
    width: 100%;    /*ブロックの幅*/
    background: #927602;    /*背景色*/
}
/*ロゴ画像*/
#sp-sub .logo img {
    width: 300px;
    margin: 0px 4%;
}

/*------------------------------------------------------------------------------------------
スクロールするとメニュー背景が透明になる処理
 Javascript「jquery-3.js」「jquery.js」を読み込む
include「back-top.shtml」と「sub-menu.shtml」にタグ追加
------------------------------------------------------------------------------------------*/
.site-header.hide{
    transition: .5s;
}

.site-header.hide{
    background: transparent;
        opacity: 0.0;
}


/*[800px以下] テーブル（ta1）PC用は300行目あたり
---------------------------------------------------------------------------*/
/*ta1設定*/
.ta1, .ta1 td, .ta1 th {
    padding: 5px 10px;    /*ボックス内の余白*/
    text-align: left;
}
/*ta1 th要素を上に持ってくる*/
.ta1 th, .ta1 td {
    display: block;
    border-left: none;
    border-right: none;
    border-top: none;
}
.ta1 th {
    width: auto;
}
.ta1 th div br {
    display: none;
    }


/*[800px以下] その他
---------------------------------------------------------------------------*/
body.s-n #sub,body.s-n #footermenu,.m-n {display: none;}

} /*@media screenの閉じ*/



/*画面を横向きにした場合の高さが500px以下の場合の設定。メニューを２列にします。
-----------------------------------------------------------------------------------------------*/
@media screen and (orientation: landscape) and (max-height:500px){

/*メインメニュー
---------------------------------------------------------------------------*/
/*メニュー１個あたりの設定*/
#menubar-s li a {
    float: left;        /*左に回り込み*/
    width: 40%;            /*幅*/
    margin-left: 4%;    /*メニューの左側に空けるスペース*/
    line-height: 1.2;    /*行間*/
}

/*[480px以下] listブロック（house.shtml内で使用）
---------------------------------------------------------------------------*/
.list figure img{
    width: 100%;        /*幅*/
        max-height: 110px;   /*高さ*/
}


}/* <==スマホ横向き高さ500px以下ここまで*/

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

    /*[480px以下] 全体の設定
    ---------------------------------------------------------------------------*/
    body {
        font-size: 14px;    /*文字サイズ*/
        line-height: 1.5;    /*行間*/
        background-attachment: fixed;
        scroll-behavior: smooth;
    }

    /*[480px以下] index.shtmlの背景画像の設定
    ---------------------------------------------------------------------------*/
    body.home {
        background: url(/img/mainimg-m.jpg) no-repeat center center;    /*背景画像の設定（古いブラウザ用）*/
        background: url(/img/mainimg-m.jpg) no-repeat center center / cover;    /*背景画像の設定*/
    }

    /*小さな端末用[480px以下]で表示させるブロック
    ---------------------------------------------------------------------------*/
    /*ロゴ画像*/
    #sp-sub .logo img {
        width: 200px;
        margin-top: 10px;
    }

    /*[480px以下] mainコンテンツ
    ---------------------------------------------------------------------------*/
    /*段落タグ設定*/
    #main p {
        padding: 0px 10px 15px;    /*上、左右、下への余白*/
    }
    /*mainブロック内のsectin間のスペース*/
    #main section {
        margin-bottom: 20px;
    }

    /*mainブロック内のh2のスペース*/
    #main h2 {
        margin-bottom: 20px;
    }
    #main h4 {
        margin-left: 0px;
        margin-right: 0px;
    }

    /*[480px以下] listブロック（house.shtml内で使用）
    ---------------------------------------------------------------------------*/
    /*ブロック単位の設定*/
    .list {
        float: none;
        width: auto;
        height: auto;
            max-height: auto;
    }
    .list a {
        height: auto;
    }
    /*画像の設定*/
    .list figure {
        /*-- float: left;    左に回り込み (無し)*/
        width: 100%;                /*幅*/
        height: 100%;                /*高さ*/
        margin-right: 10px;    /*画像の右側に空けるスペース*/
    }
    .list figure img{
        width: 100%;                /*幅*/
        height: auto;                /*高さ*/
        max-height: 250px;                /*高さ*/
    }


    /*[480px以下] トップページ内「更新情報・お知らせ」ブロック
    ---------------------------------------------------------------------------*/
    /*見出しを含まないお知らせブロック*/
    #new dl {
        padding: 0 10px;
    }

    /*[480px以下] テーブル（ta1）PC用は300行目あたり
    ---------------------------------------------------------------------------*/
    /*ta1設定*/
    .ta1, .ta1 td, .ta1 th {
        padding: 5px 10px;    /*ボックス内の余白*/
        font-size: -1;
        text-align: left;
    }
    /*ta1 th要素を上に持ってくる*/
    .ta1 th, .ta1 td {
        display: block;
        border-left: none;
        border-right: none; 
        border-top: none;
    }
    .ta1 th {
        width: auto;
    }


    /*スマホやタブレットではbackgroundのfixidが効かないので工夫*/
    #container::before {
    background:url('/img/bgi.jpg') left top;
    background-repeat: repeat;
    background-size: 540px auto;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 108px;
    content: "";
    z-index: -1;
    }

/*-------[480px以下]ここまで------ */
}