@charset "utf-8";
/* ------------------------------------------------------------  */

ul.direction { padding: 0 0 35px;}
ul.direction li { font-size: 20px; display: inline-block; *display: inline; *zoom: 1; width: 325px;}

/* ------------------------------------------------------------  */

#fv { padding: 126px 0 0; background: url(../images/reservation/fv.jpg) center center no-repeat; background-size: cover;}

.intro { background: url(../images/index/bg_03.gif); text-align: center; padding: 0 0 75px; font-family: Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; letter-spacing: 2px;}
.intro h3 { font-size: 24px; background: url(../images/reservation/border.png) left bottom repeat-x; width: 400px; margin: 50px auto 20px; }
.intro p { font-size: 30px; line-height: 130%;}
.intro p a { font-size: 50px; line-height: 130%;}
.intro p span { font-size: 14px; font-family: "ヒラギノ角ゴ Pro w3","Hiragino Kaku Gothic Pro","Meiryo","メイリオ","Osaka","ＭＳ Ｐゴシック","MS P Gothic","Arial",sans-serif; display: block; line-height: 150%;}
.intro.thanks { background: none; padding: 0;}

#reserve .box { width: 990px; margin: 0 auto; font-family: Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;}
#reserve ul.direction { background: url(../images/reservation/bg_01.gif) center bottom no-repeat; }
#reserve .box .bnr { text-align: center; padding: 70px 0 0; }

#contact { text-align: center; padding: 75px 0 120px;}
#contents { padding: 70px 0 100px;}
#contents table { width: 100%;}
#contents table th { text-align: left; padding: 30px 0; width: 255px; vertical-align: middle; border-bottom: 1px solid #e5e5e5; font-size: 18px;}
#contents table td { padding: 30px 0; text-align: left; border-bottom: 1px solid #e5e5e5; font-family: "ヒラギノ角ゴ Pro w3","Hiragino Kaku Gothic Pro","Meiryo","メイリオ","Osaka","ＭＳ Ｐゴシック","MS P Gothic","Arial",sans-serif;}
#contents table th span { color: #b81c22; font-size: 12px; padding: 2px 8px; margin: 0 0 0 20px; border: 1px solid #b81c22; font-family: "ヒラギノ角ゴ Pro w3","Hiragino Kaku Gothic Pro","Meiryo","メイリオ","Osaka","ＭＳ Ｐゴシック","MS P Gothic","Arial",sans-serif;}
#contents table tr td select { width: 100px; padding: 20px 10px; background: url(../images/reservation/arw.svg) 80% center no-repeat; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; -webkit-box-sizing: border-box; color: #aaaaaa; border: 1px solid #dcdcdc; margin: 0 10px 0 0; color: #000; background-size: 20px; }
.no-svg #contents table tr td select { background: url(../images/reservation/arw.png) 80% center no-repeat; }
#contents table tr td select.time { width: 130px;}
#contents table tr td span { margin: 0 40px 0 0;}
#contents table textarea,
#contents table input[type="text"] { width: 715px; padding: 20px 0 20px 20px; border: 1px solid #dcdcdc;}
#contents input[type="submit"] { background: #000; border: none; color: #fff; width: 250px; height: 60px; line-height: 60px; cursor: pointer; }
#contents ::-webkit-input-placeholder,
::-moz-placeholder,
:-moz-placeholder { color: #aaaaaa; font-size: 14px;}
#contents table tr.text th { vertical-align: text-top; padding: 60px 0 0;}
#contents table tr.text th,
#contents table tr.text td { border: none;}
#contents p.btn { margin: 60px 0 0;}

/* ------------------------------------------------------------ check */

.note { text-align: center; padding: 50px 3% 60px;}
.note ul.direction { background: url(../images/reservation/border_02.gif) center bottom no-repeat;}
.note.step_02 h3 { padding: 40px 0 20px; }
.note h3 { font-size: 24px; padding: 0 0 15px; }
.note table { width: 100%; margin: 15px 40px;}
.note table tr th { width: 200px;}
.note p { padding: 0 0 15px; font-size: 16px; }
.note p.caution { color: #d20000; }
.note p.alert span { display: block;}
.note p.btn { padding: 30px 0 0;}
.note p.btn a,
.note p.btn input[type="submit"] { border: none; color: #fff; width: 260px; height: 50px; line-height: 50px; cursor: pointer; font-size: 16px; display: inline-block; *display: inline; *zoom: 1; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.note p.btn a { background: #b4b5b8; }
.note p.btn input[type="submit"] { background: #a42424; margin: 0 0 5px;}
#thanks { padding: 70px 0 150px; }
.note table th { text-align: left; padding: 5px 15px;}
.note table td { text-align: left; padding: 5px 15px;}
#thanks p.btn a { background: #000;}

/* ------------------------------------------------------------ mobile */
@media screen and (max-width:640px){
	
	
/* ------------------------------------------------------------  */

ul.direction { padding: 0 0 35px; border-bottom: 1px solid #eee;}
ul.direction li { font-size: 17px; display: block; width: 80%; padding: 10px 0; text-align: left; margin: 0 auto;}

/* ------------------------------------------------------------  */

#fv { padding: 38px 0 0; background: url(../images/reservation/fv.jpg) center top no-repeat; background-size: cover;}

.intro { background: url(../images/index/bg_03.gif); text-align: center; padding: 0 0 35px; letter-spacing: 2px;}
.intro h3 { font-size: 20px; background: url(../images/reservation/border.png) left bottom repeat-x; width: 85%; margin: 50px auto 20px; padding: 0 0 10px; }
.intro p { font-size: 20px; line-height: 130%;}
.intro p a { font-size: 35px; line-height: 130%;}
.intro p span { font-size: 12px; line-height: 150%;}
.intro.thanks { background: none; padding: 0;}

#reserve .box { width: 100%; margin: 0 auto; }
#reserve ul.direction { background: none;}

#reserve .box .bnr { text-align: center; padding: 70px 0 0; }
#reserve .box .bnr img { width: 94%; height: auto; }

#contact { padding: 40px 0 50px;}
#contact h3 { font-size: 19px; padding: 0 0 15px; letter-spacing: 2px;}
#contents { padding: 30px 3% 40px;}
#contents table { width: 100%;}
#contents table th { text-align: left; padding: 15px 0 10px; width: 100%; vertical-align: middle; display: block; font-size: 16px;}
#contents table td { padding: 15px 0; display: block; text-align: left;}
#contents table th span { font-size: 11px; padding: 5px 10px; margin: 0 0 0 10px; }
#contents table tr td select { width: 90px; padding: 10px 10px; background: url(../images/reservation/arw.svg) 90% center no-repeat; border: 1px solid #dcdcdc; margin: 0 10px 15px 0; background-size: 10px; }
.no-svg #contents table tr td select { background: url(../images/reservation/arw.png) 90% center no-repeat; }
#contents table tr td select.time { width: 140px;}
#contents table tr td span { margin: 0 20px 0 0;}
#contents table textarea,
#contents table input[type="text"] { width: 97%; padding: 10px 0 10px 3%;  -webkit-appearance: none;-moz-appearance: none; appearance: none; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; border: 1px solid #dcdcdc;}
#contents table tr td input[type="text"].code { width: 25%;}
#contents table tr.text th { vertical-align: text-top; padding: 30px 0 0;}
#contents table textarea { border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 1px solid #dcdcdc;}

#contents input[type="submit"] { background: #284e6d; border: none; color: #fff; width: 200px; height: 40px; line-height: 40px; cursor: pointer; }



/* ------------------------------------------------------------ check */
.note { text-align: center; padding: 25px 3% 30px;}
.note h3 { font-size: 20px; padding: 0 0 15px; }
.note p { padding: 0 0 15px; font-size: 14px; }
.note p.caution { color: #d20000; }
.note p.small { text-align: left;}
.note p.btn { padding: 30px 0 0;}
.note p.btn a,
.note p.btn input[type="submit"] { border: none; color: #fff; width: 260px; height: 50px; line-height: 50px; cursor: pointer; font-size: 16px; display: inline-block; *display: inline; *zoom: 1; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.note p.btn a { background: #b4b5b8; margin: 0 0 5px;}
.note p.btn input[type="submit"] { background: #a42424; margin: 0 0 5px;}
#thanks { padding: 70px 0; }
.note table th { text-align: left; padding: 5px 15px;}
.note table td { text-align: left; padding: 5px 15px;}

}