@charset "utf-8";
/* ページ表示用基本CSS*/

body{ 
  -webkit-text-size-adjust: 100%; 
 margin-top:0px;
 font-size:14px;
 line-height:130%;
 color:#333333;
 background-color:#ffffff;
 font-family:"ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "Hiragino Kaku Gothic Pro", Verdana, "ＭＳ Ｐゴシック", "MS PGothic", Arial, sans-serif;
}
table{margin:0;border-spacing:0;}
tr,td,th{ font-size:14px; line-height:130%;}
div{box-sizing:border-box;}
big{font-size:130%;line-height:140%;}
small { font-size:12px;}
a{text-decoration:none;}
a:link{ color:#0000ff; }
a:visited{ color:#0000ff; }
a:active{ color:#ff0000; }
a:hover { color:#f7657b;text-decoration: underline; }
select,input,textarea,option{
 color: #333333; 
 font-size:14px;
 margin:1px;padding:3px;line-height:130%; border:1px solid #949494;
 font-family:"ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "Hiragino Kaku Gothic Pro", Verdana, "ＭＳ Ｐゴシック", "MS PGothic", Arial, sans-serif;
}
input,textarea,select{ border-radius: 4px;box-shadow: 1px 1px 2px 1px rgba(150,150,150,0.1);}
select{ padding:1px; }

.kiyaku{font-size:15px;text-align:center;}
.right{text-align:right;}
.left{text-align:left;}
.center{text-align:center;}
.b{font-weight:bold;}
.n{font-weight:normal;}
.nobr{white-space:nowrap;}


/* ページ枠 */
.colorset1{ width:820px;height:100%; margin:0 auto 10px;}
/* ヘッダ */
.colorset2{
 height:60px;width:100%;
 background-image:url(bbglue100.gif);
 margin-bottom:8px; border-radius: 5px;
}
.colorset2 td{ font-size:22px; text-align:center; vertical-align:middle; }
/* メニュー部 */
.colorset25{ vertical-align:top; text-align:left;width:250px;padding:0;float:right;}
/* コンテンツ部 */
.colorset3{ vertical-align:top; text-align:left;width:555px;padding:0 ;float:left;}
/* お知らせ */
.colorset4{ vertical-align:top; text-align:left;width:250px;padding:8px;float:right;  border:1px solid #d7d7d7;}
/* フッタ */
.colorset5{ 
 height:50px;width:100%; border-radius: 5px;
 text-align:center;vertical-align:middle; 
 background-image:url(bbglue100.gif);
}



/* 予約フォーム送信完了後メッセージ */
.endmsg{
 border:1px solid #0000ff; margin:10px 0 150px; width:100%;
 padding:7px; box-sizing:border-box;font-weight:bold; 
 text-align:left;
}
/* エラーメッセージ*/
.errormsg{
 border:1px solid #ff0000;width:100%;
 padding:7px; margin:5px 0 5px;  text-align:left;font-weight:bold;
}


/* 角丸 */
.round, .errormsg, .pagelink a, .colorset4, .endmsg, #OpenMenu{
 border-radius: 4px;
}



/* 予約フォーム  */
.form_outline{margin:15px auto 10px;padding:0; width:501px;border-top:1px solid #d7d7d7; border-right:1px solid #d7d7d7; }
.formtable{ clear:both;margin:0; }
/* 項目名 */
.formtd1{
 display:table-cell; text-align:center; width:150px;
 font-weight:bold;padding:6px 5px 6px; vertical-align:middle;
 background-color:#eaf4f7; border-left:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7; 
 word-break: break-all; 
} 
/* 入力 */
.formtd2{
 display:table-cell; text-align:left; width:350px;
 padding:3px 0 3px 5px; 
 background-color:#ffffff;border-left:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7; 
 word-break: break-all; 
} 
/* フォームサイズ */
 .form1{width:150px;} /* 番号 */
 .form2{width:220px;} /* 名前 Mail*/
 .form2_1{width:220px;} /* Mail 確認1 */
 .form4{width:320px;height:80px;line-height:130%;}
  .form5{width:400px;}
 .postsrch{font-size:11px;padding:2px;} /* 郵便番号住所検索 */

.welcome{/* 「こんにちは○○様」*/
 width:100%;padding-left:10px;
 background-color:#ffeef2; border-radius: 4px;
 font-weight:bold; line-height:200%; text-align:left;
}

/* 送信ボタン */
.submit{ padding:5px; }
/* リセットボタン */
.reset{ padding:5px; }

input[type=submit]:hover { background-color: #d1ddf0;}
input[type=button]:hover { background-color: #d1ddf0;}
/* iPhone特有フォームデザイン解除 */
input[type=text],input[type=tel],input[type=email],input[type=button],input[type=submit],input[type=password],textarea{ -webkit-appearance: none; }
input[type=submit]{background-color: #e9e9ed;}

/* メニュー アコーディオン */
#OpenMenu{
  display:none; 
  border:1px solid #9db3be; padding:4px 0 1px 10px;box-sizing:border-box; 
}
.menutxt{font-size:120%;color: #0000ff; vertical-align:middle;padding-left:10px;}
/* 3本線 */
#humberger {
  position: relative;
  height: 22px; width: 24px;
  display: inline-block;
  box-sizing: border-box;
}
#humberger div {
  position: absolute;
  left: 0;height: 4px;width: 24px;
  background-color: #444;
  border-radius: 2px;
  display: inline-block;
  box-sizing: border-box; 
}
#humberger div:nth-of-type(1) {top: 0;}
#humberger div:nth-of-type(2) {top: 9px;}
#humberger div:nth-of-type(3) {bottom: 0;}

/*** メニュー  リンクリスト <li> ***********************/
.pagelink{ display: block; margin:0;}
.pagelink ul{
 list-style:none;
 padding:0; margin:0;
}
.pagelink li>a{
 /*display:table-cell;*/
 vertical-align:middle;
 /*font-weight:bold;*/
 line-height:32px;
 font-size:120%;
 width:100%;  float:left;
 text-align:left;
 margin:0 0 7px; 
 border:1px solid #9db3be; padding-left:15px;box-sizing:border-box; 
 background-color:#f2f4f6;
}
.pagelink li>a:hover{ background-color:#849ece; color:#ffffff;text-decoration:none;}
#selid >a{background-color:#849ece; color:#ffffff;}

/* ご予約方法 */
.yoyaku{ 
 clear:both; 
 padding:8px;margin:10px 0 10px;
 background-color:#fffbe6;
 border-radius: 10px;
 border: 1px solid #f8d69a;
}
.yoyaku ol{ margin:5px 0 0 23px;padding:0}

/* お知らせ */
.messageList ul{ 
 margin:0 0 0 18px;padding:0;
 list-style-type:none; 
 list-style-image: url(dot.gif);
 padding:8px 0 8px;
}

/* 予約日時の変更 */
.dthange1{text-align:left;font-weight:bold;padding:4px 10px 4px;font-size:14px;background-color:#849ece;color:#ffffff;}
/* 変更前の予約 */
.dthange2{text-align:left;font-weight:bold;margin:7px 0 7px;}
/* 変更時の説明文 */
.dthange3{text-align:left;margin:0 0 10px}

/* 郵便番号検索用 削除不可 */
.seltable{
background-color: #eeeeee;
border:1px solid #6f6f6f;
padding:5px;
margin:2px 0 0;
}
.addframe{position:static;}


/* ページトップに戻る ボタン */
#pageTop{ position:fixed;bottom:10px;right:10px; 
    opacity:0.8;
}
a#pageTop:hover img{
    cursor:pointer;
    opacity:0.6;
}



/***********  レスポンシブ  ************/
@media screen and (max-width:830px){ 
 .colorset1, .colorset3, .colorset4, .colorset25{ width:100%;}
 .pagelink li>a{width:49%; margin:0 3px 7px; }
 .endmsg{ margin:10px 0 10px; } 
.yoyaku{ margin:2px 0 10px; }
#OpenMenu{ width:99%; display: block; margin:0 auto 10px;}
#OpenMenu:hover {cursor: pointer;color: #f7657b;  background-color: #f2f4ff;}
.pagelink{display:none;}
}

@media screen and (max-width:650px){ 
 #OpenMenu{ width:100%; }
 .pagelink li>a{width:100%; margin:0 0 7px; }
}

@media screen and (max-width:550px){ 
 .form_outline, .formtd1, .formtd2{ width:100%;display:block;border:0;}
 .form_outline{margin:15px auto 0;}
 .formtd1{border:1px solid #d7d7d7;text-align:left;padding:4px 10px 4px;}
 .formtd2{padding:4px 0 10px;}
}
@media screen and (max-width:400px){ 
 .form4{width:97%;}
}