@charset "UTF-8";

body  {margin: 0;
       font-family: ' メイリオ ',
      'Hiragino Kaku Gothic Pro', sans-serif}









/* ########## レイアウト（最初ここから下コピペする） ########## */
/* header-siteからheader-menuを横に並べる設定 */
.header:after   {content: "";
               display: block;
	       clear: both}
.header-site   {float: left;
         width: auto}
.header-menu   {float: right;
         width: auto}

/* boxの左右の空間 */
.header, .footer, .info-sub
  {padding-left: 15px;
   padding-right: 15px;}

/* ボックスの上下 */
.header  {padding-top: 15px;
        padding-bottom: 0px}
.info-main  {padding-top: 15px;
        padding-bottom: 15px}

/* ヘッダー画像 */
.toprogo {max-width: 100%;
          height: auto;
	  vertical-align: bottom}

.site    {width: 150px;
	  margin-left: auto;
	  margin-right: auto}

/* フッター横並び */
.info-main:after   {content: "";
               display: block;
	       clear: both}
.info-1   {float: left;
         width: 25%}
.info-2   {float: left;
         width: 25%}
.info-3   {float: left;
         width: 25%}
.info-4   {float: left;
         width: 25%}
/* ########## レイアウト（最初ここの上コピペする） ########## */

.sft-site
       {padding-top: 50px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box}









/* ########## 文字（最初ここから下コピペする） ########## */
/* ########## 文字のCSS ########## */
/* 普通の文字 */
.info-main li a  {display: block;
             padding: 3px 15px;
	     color: #000000;
	     font-size: 10px;
	     text-decoration: none}
.info-main li a:hover  {background-color: #eeeeee}

.info-sub  {padding: 3px 15px;
	 color: #ffffff;
         background-color: #c0c0c0;
	 font-size: 10px}

/* フッター */
/* 太字 */
.lic  {padding: 3px 15px;
       font-size: 13px;
       font-weight: bold}
.info-main  {background-color: #f0f0f0}
.info-main ul  {margin: 0;
           padding: 0;
	   list-style: none}

#mail {color: #111111}

/* コピーライト */
.copyright  {margin: 0;
             color: #666666;
	     font-size: 10px}
/* ########## 文字（最初ここの上コピペする） ########## */

.sft-site h1
          {text-align: center;
           line-height: 1.3;
           font-size: 30px;
           color: #666666;
           font-weight: 100;
	   margin: 15px;
	   padding: 0;
	   list-style: none;
	   text-decoration: none}
.sft-site p
         {text-align: center;
          line-height: 1.5;
          font-size: 15px;
          color: #666666;
          font-weight: 100;
          margin: 0;
          padding: 0;
	  list-style: none;
	  text-decoration: none}


















/* ########## レイアウト（最初ここから下コピペする） ########## */
/* mediaレスポンシブ */
/* ########## 599px以下 ########## */
@media (max-width: 599px){
/* ########## レイアウト（最初ここの上コピペする） ########## */

.mini {font-size:7px}

}



/* ########## レイアウト（最初ここから下コピペする） ########## */
/* ########## 600px以上~767px以上 ########## */
@media (min-width: 600px) and (max-width: 767px){
/* ########## レイアウト（最初ここの上コピペする） ########## */

.sft-site
    {width: 600px;
     margin-left: auto;
     margin-right: auto}


}









/* ########## レイアウト（最初ここから下コピペする） ########## */
/* ########## 767px以下 ########## */
@media (max-width: 767px){
/* トグルボタン */
/* トグルボタン */
#menubtn  {padding: 4px 7px;
           border: solid 1px #aaaaaa;
	   border-radius: 5px;
	   background-color: #ffffff;
	   position: absolute;
	   top: 7px;
	   right: 1px;
           cursor: pointer}
#menubtn:hover  {background-color: #dddddd}
#menubtn:focus  {outline: none}
#menubtn i  {color: #888888;
             font-size: 15px}
#menubtn span  {display: inline-block;
                text-indent: -9999px}

/* メニュー縦並び */
#menu  {display: none}
.menu ul  {margin: 0;
           padding: 0;
	   list-style: none}
.menu li a  {display: block;
             padding: 5px;
             color: #999999;
	     font-size: 14px;
	     text-decoration: none}
.menu li a:hover  {background-color: #eeeeee}
.menu ul:after  {content:  "";
                 display: block;
		 clear: both}

.booking a  {display: block;
             color: #999999;
	     text-decoration: none} 
.booking {top: 10px;
          left: 2px;
          position: fixed;
          z-index: 999;
          width: 100px;
          border: solid 1px #aaaaaa;
          padding: 5px;
          background: #ffffff;
          font-size: 14px;
          border-radius: 5px 5px 5px 5px;}

.site {margin-top: 25px}
/* ########## レイアウト（最初ここの上コピペする） ########## */

}











/* ########## レイアウト（最初ここから下コピペする） ########## */
/* ########## 768px以上 ########## */
@media (min-width: 768px){

/* トグルボタン非表示 */ 
#menubtn  {display: none}

/* くっついてくる、ご予約を消す */ 
#booking {display: none}

/* 右上のメニューを横並び＆表示 */ 
#menu  {display: block !important}
.menu ul  {margin: 0;
           padding: 0;
	   list-style: none}
.menu li a  {display: block;
             padding: 10px 15px;
	     color: #999999;
	     font-size: 14px;
	     text-decoration: none}
.menu li a:hover  {background-color: #eeeeee}
.menu ul:after  {content:  "";
                 display: block;
		 clear: both}
.menu li  {float: left;
           width: auto}
/* ########## レイアウト（最初ここの上コピペする） ########## */

.sft-site
    {width: 600px;
     margin-left: auto;
     margin-right: auto}



}










/* ########## レイアウト（最初ここから下コピペする） ########## */
/* ########## 1040px以上 ########## */
@media (min-width: 1040px){
/* ボックス横幅を固定 */
.header, .info-main, .footer, .flow
          {width: 1000px;
	  margin-left: auto;
	  margin-right: auto}

.info-sub, .copyright
         {width: 970px;
	  margin-left: auto;
	  margin-right: auto}
/* ########## レイアウト（最初ここの上コピペする） ########## */


}