@charset "Shift_JIS";

/* ====================================================== */
/* [各要素の標準スタイル定義]                             */
/* ====================================================== */

* {
    font-style: normal;
}

body {
    color: #444444;
    background: #D6EADF url("../images/bg_body2.gif");
    margin: 0;
    font: 100%/133.5% "ＭＳ Ｐゴシック", sans-serif;
}

a:link {
    color: #2849AE;
    text-decoration: underline;
}

a:visited {
    color: #800080;
    text-decoration: underline;
}

a:hover {
    color: #2849AE;
    text-decoration: underline;
}

a:active {
    color: #2849AE;
    text-decoration: underline;
}

a:focus {
    color: #2849AE;
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6, p, blockquote, div, form {
    margin: 0;
    font-weight: normal;
}

/* 見出し (lv1) */
h1 {
    background: url("../images/logo_header.jpg") no-repeat;
    height: 60px;
    margin-top: 20px;
}

/* 見出し (lv2) */

h2 {
    margin: 0;
    font-size: 100%;
}

/* 見出し (lv3) */

h3 {
    background: #fde9f4;
    margin: 0;
    padding: 5px 7px;
    border-top: 3px solid #fdd0e9;
    font-size: 100%;
    font-weight: bold;
}

h3.night {
    background: #CCDEE7;
    border-top: 3px solid #8BC1DC;
}

/* リスト */

ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 定義リスト */

dl {
    margin: 0;
    padding: 0;
}

dt {
    margin: 0;
    padding: 0;
}

dd {
    margin: 0;
    padding: 0;
}

/* テキストの装飾 */

strong {
    font-weight: bold;
}

em {
    color: #EE0022;
}

input, select {
    font-size: 100%;
    vertical-align: middle;
}

textarea {
    font-size: 100%;
    vertical-align: middle;
    font: 100%/133.5% "ＭＳ Ｐゴシック", sans-serif;
}

select.w220 {
    width: 220px;
    margin: 10px 0px 10px 0;
}

span.space400 {
    margin-left: 400px;
}

/* 画像 */

img {
    border: none;
}

/* ====================================================== */
/* [汎用クラスの定義]                                     */
/* ====================================================== */

/* 並列リスト */

ul.row {
    zoom: 100%;
}

ul.row:after {
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
    content: url("../images/clear.gif");
}

ul.row li {
    padding-right: 10px;
    width: auto;
    float: left;
    /* for Windows Internet Explorer 5.5 */
    voice-family: "\"}\"";
    voice-family: inherit;
    white-space: nowrap;
}

ul.row2 li {
    width: auto;
    float: right;
    /* for Windows Internet Explorer 5.5 */
    voice-family: "\"}\"";
    voice-family: inherit;
    white-space: nowrap;
}
ul.row li img {
    display: block;
}

ul.row li img.marker {
    display: inline;
}

/* 表 (レイアウト用) */

table.layout {
    background: none;
    border: none;
}

table.layout th {
    background: none;
    padding: 0;
    border: none;
}

table.layout td {
    background: none;
    padding: 0;
    border: none;
}

/* 並列カラム */

*.col-l {
    /* 横幅などは必要に応じて定義 */
    float: left;
}

*.col-r {
    /* 横幅などは必要に応じて定義 */
    float: right;
}


/* フロートに後続する流し込みを制御 */

*.clear {
    zoom: 100%;
}

*.clear:after {
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
    content: url("../images/clear.gif");
}

/* 画像マーカー */

img.marker {
    margin-right: 5px;
    vertical-align: middle;
}

/* submitボタン */

input.btn {
    /* 横幅は必要に応じて定義 */
    padding: 3px 7px;
    font: bold "MS UI Gothic", sans-serif;
}

input.btn.w80 {
    width: 80px;
}

input.btn.w100 {
    width: 100px;
}

input.btn.w130 {
    width: 130px;
}

input.btn.w150 {
    width: 150px;
}

input.btn.w175 {
    width: 175px;
}

input.btn.w220 {
    width: 220px;
}

input.btn.w250 {
    width: 250px;
}

input.btn.w300 {
    width: 300px;
}

input.btn.w350 {
    width: 350px;
}
/* hr */

hr.dotted {
    color: #BBBBBB;
    border-style: dotted;
}

.pageid {
    text-align: right;
    margin: 2px 28px 0px 0px;
}

/* 汎用特殊マージン (上) */

*.sp-t10 {
    margin-top: 10px !important;
}

/* 表 */

table caption {
    text-align: left;
}

table.table1 td.none {
    border-style: none none none none;
    background: #FFFFFF;
}

table.small th,
table.small td {
    font-size: 87.5%;
    line-height: 133.5%;
}

table td small {
    font-size: 85.75%;
}

table.small th.moreSmall {
    font-size: 75.75%;
    font-weight: normal;
}

table tr td.center {
    text-align: center;
}

table tr td.left {
    text-align: left;
}

/* [テーブル] マージン確保 */

div.part {
    margin-top: 4px;
}

/* 表 (汎用：装飾1) */

table.table1 {
    border-width: 1px;
    border-style: none solid solid none;
    border-color: #BBBBBB;
    font: 100%/133.5% "ＭＳ Ｐゴシック", sans-serif;
}

table.table1 th {
    padding: 3px 5px;
    border-width: 1px;
    border-style: solid none none solid;
    border-color: #BBBBBB;
    font-weight: normal;
}

table.table1 td {
    background: #FFFFFF;
    padding: 3px 5px;
    border-width: 1px;
    border-color: #BBBBBB;
    text-align: center;
    vertical-align: middle;
}

*/
table.table1 tr td.left{
    text-align: left;
}

table.table1.center tr td{
    text-align: center;
}


/* 部屋 */

table.table1 tr.room th {
    background: #D2F6A2 url("../images/bg_th.gif") no-repeat 100% 100%;
    font-weight: bold;
}

table.table1 tr.room th.sat {
    background: #BED3F0;
    font-weight: bold;
}

table.table1 tr.room th.sun {
    background: #FF6D5C;
    color: #FFFFFF;
    font-weight: bold;
}

table.table1 tr.room_delete th {
    background: #F1D6E4 url("../images/bg_th4.gif") no-repeat 100% 100%;
    font-weight: bold;
}

/* 日付 */
table.table1 td.day {
    background: #E4FBB8;
    font-weight: bold;
}

/* 土曜日 */
table.table1 tr td.sat {
    background: #BED3F0;
}

/* 日曜日 */
table.table1 tr td.sun {
    color: #FFFFFF;
    background: #FF6D5C;
}

/* 夜(濃いグレー) */
table.table1 tr.night td {
    background: #dcdcdc;
}

/* 太字 */
table.table1 tr td.bold{
    font-weight: bold;
}

/* 点線(border-top) */
table.table1 tr.dottop th,
table.table1 tr.dottop td {
    border-top: 1px dotted #BBBBBB;
}

/* 日曜日のbackgroundピンク */
table.table1 th.sundetail,
table.table1 td.sundetail {
    background: #F4CBC7;
}

/* ラジオ */
table.table1 tr td.radio {
    background: #E4FBA9;
}

/*変更コメント・操作履歴のテーブルの設定*/
table.table1 tr.light_green th {
    background: #D2F6A2;
    text-align: center;
}

/*変更コメント・操作履歴のテーブルの設定(取消詳細)*/
table.table1 tr.delete th {
    background: #F1D6E4;
    text-align: center;
}

table.table1 td.delete {
    background: #F1D6E4;
}

table.table1 td.td-calendar {
    border-color: #BBBBBB;
    border-style: solid;
    border-width: 1px;
    width : 60px;
}

table.table1 td.td-calendar div.calendar_date {
    padding: 2px 0 3px 0;
    height: 15px;
    text-align: left;
    font-weight: bold;
    font-size : 1.1em;
    width : 35px;
}

table.table1 td.td-calendar div.calendar_reserve {
    padding: 3px 0 0 0;
    height: 40px;
    font-weight: bold;
    font-size: 1.0em;
    width : 50px;
}

div.reserve-table-box {
    display : inline-block;
    width : 48%;
    margin-left: 5px;
    vertical-align: top;
}

/* 表 (汎用：装飾2) */

table.table2 {
    font: 87.5%/133.5% "ＭＳ Ｐゴシック", sans-serif;
}

table.table2 th {
    background: url("../images/bg_th3.gif") repeat-y;
    padding: 3px 5px 3px 8px;
    font-weight: bold;
    text-align: left;
    vertical-align: middle;
}

table.table2 th.room{
    background: #D2F6A2 url("../images/bg_th4.gif") no-repeat 100% 100%;
    font-weight: bold;
}

table.table2.delete_data th {
    background: #F1D6E4 url("../images/bg_th3.gif") repeat-y;
    padding: 3px 5px 3px 8px;
    font-weight: bold;
    text-align: left;
    vertical-align: middle;
}

table.table2 td {
    background: #FFFFFF;
    padding: 3px 5px;
    text-align: left;
    vertical-align: middle;
}

table.table2 td.edit {
    background-color: transparent;
    vertical-align: top;
}

table.table2 td.button {
    text-align: right;
    background-color: transparent;
}

table.table2 th p.reserve-note {
    font-weight:normal;
    font-size : 95%;
    color : #666;
}

/* 表 (汎用：装飾3) */

table.table3 {
    border-width: 1px;
    border-style: none solid solid none;
    border-color: #BBBBBB;
    font: 87.5%/133.5% "ＭＳ Ｐゴシック", sans-serif;
}

table.table3 th {
    background: #D2F6A2;
    padding: 3px 5px;
    border-width: 1px;
    border-style: solid none none solid;
    border-color: #BBBBBB;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}

table.table3 td {
    background: #FFFFFF;
    padding: 3px 5px;
    border-width: 1px;
    border-style: solid none none solid;
    border-color: #BBBBBB;
    text-align: center;
    vertical-align: middle;
}

table.table3 caption {
    font-size: 114.5%;
    padding: 10px 0;
}

table.table3 td.detail {
    font-size: 87.5%;
    text-align: left;
}

table.table3 tr.yellow td {
    background: #ffffcc;
}

table.table3 tr.reserved td {
    background: #FFF08D;
}

table.table3 tr.provisional td {
    background: #FAF5D5;
}

.table3 td.still{
    border-top: double;
    border-top-width: 3px;
    border-top-color: #BBBBBB;
    background-color: #FFFFFF
}

/* 表 (汎用：装飾4) */

table.table4 {
    border-width: 1px;
    border-style: none solid solid none;
    border-color: #BBBBBB;
    font: 87%/133% "ＭＳ Ｐゴシック", sans-serif;
}

table.table4 th {
    background: #fde9f4;
    padding: 2px;
    border-width: 1px;
    border-style: solid none none solid;
    border-color: #BBBBBB;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    line-height: 16px;
}

table.table4.search_table th {
    height: 30px;
}

table.table4 td {
    background: #FFFFFF;
    padding: 3px 5px;
    border-width: 1px;
    border-style: solid none none solid;
    border-color: #BBBBBB;
    text-align: center;
    vertical-align: middle;
    line-height: 11px;

}

table.table4 caption {
    font-size: 100%;
    text-align: right;
}

table.table4 td.detail {
    font-size: 87.5%;
    text-align: left;
}

table.table4 tr.noon.th {
    background: #D2F6A2;
}

table.table4 tr.night th {
    background: #CCDEE7;
}

table.table4 tr.dot td {
    border-top-color: #D8DFD8;
    border-top: dotted;
}

table.table4 tr.reserved td {
    background: #FFF08D;
}

table.table4 tr.provisional td {
    background: #FAF5D5;
}

.table4 td.still{
    border-top: double;
    border-top-width: 3px;
    border-top-color: #BBBBBB;
    background-color: #FFFFFF
}

/*行の濃淡(昼用・夜用)*/
table.table4.noon tr.light td {
    background-color: #FFFFEE;
}

table.table4.noon tr.heavy td {
    background-color: #FFFFCC;
}

table.table4.night tr.light td {
    background-color: #F5FFFA;
}

table.table4.night tr.heavy td {
    background-color: #E0FFFF;
}

table.table4.table tr.light td {
    background-color: #fff5ee;
}

table.table4.table tr.heavy td {
    background-color: #fffbcf;
}



/* ====================================================== */
/* [主要ブロックの定義]                                   */
/* ====================================================== */

#wrap {
    background: #FFFFFF;
    margin: 0 auto;
    width: 994px;
    border-right: 3px solid #B6C8CA;
    border-left: 3px solid #B6C8CA;
}

#wrap2 {
    background: #FFFFFF;
    margin: 0 auto;
    padding-bottom: 10px;
    width: 700px;
    border-right: 3px solid #B6C8CA;
    border-left: 3px solid #B6C8CA;
}

#head-box {
    padding: 2px 27px;
    border-bottom: 2px solid #f29ccb;
}

#main-box {
    margin: 10px 0;
    padding: 10px 27px 20px;
    border-bottom: 2px solid #f29ccb;
}

/* ログイン画面のブロック */
#wrap_login {
    background: #FFFFFF;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 40px;
    width: 600px;
    border: 3px solid #B6C8CA;
    text-align: center;
}

/* インデックス画面のブロック */
#main-box_index {
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 900px;;
    padding: 10px 27px 20px;
    border-bottom: 2px solid #23A1AC;

}
/* ====================================================== */
/* [head-box]                                             */
/* ====================================================== */

/* タイトル */

#head-box h1 {
    width: 470px;
    float: left;
}

/* サブナビゲーション */

#head-box #snav {
    width: 710px;
    float: right;
    padding-bottom: 10px;
}

#head-box ul.row li {
    padding-right: 0px;
    padding-left: 10px;
}

/* ====================================================== */
/* [main-box]                                             */
/* ====================================================== */

/* 見出し */

#main-box div.title {
    background: url("../images/bg_title_lower.gif") no-repeat 0 100%;
}

#main-box div.title div.inner {
    background: url("../images/bg_title_upper.gif") no-repeat;
    padding: 7px 10px;
}

#main-box div.title h2 {
    color: #FFFFFF;
    font-size: 100%;
    font-weight: bold;
    float: left;
}

#main-box div.title div.operator {
    color: #FFFFFF;
    font-size: 87.5%;
    float: right;
}

/* 導入文 */

#main-box div.intro {
    margin-top: 15px;
    font-size: 87.5%;
}

/* 予約状況確認表 */

#main-box div.schedule {
    margin-top: 15px;
}

/* control-box */

#main-box div.control-box {
    background: url("../images/bg_control.gif") no-repeat;
    margin-top: 15px;
    padding: 10px 10px;
    border-bottom: 1px solid #CCCCCC;
    font-size: 87.5%;
}

#main-box div.control-box.bold {
    font-weight: bold;
}

#main-box div.control-box.withdrawal {
    border-bottom: 2px solid #f29ccb;
}

/* 予約状況テーブル box */

#main-box div.table-box {
    margin-top: 15px;
}

/* 日付の追加をしないで予約内容を確認する */

#main-box div.confirmation {
    margin: 10px 0;
    font-size: 87.5%;
}

/* 入力テーブル box */

#main-box div.table-input-box {
    background: #F5F5F5;
    padding: 20px;
    border-width: 1px;
    border-style: none solid solid solid;
    border-color: #CCCCCC;
}

#main-box div.table-input-box div.headline {
    font-size: 115%;
    font-weight: bold;
    text-decoration: underline;
    margin-top: 20px;
}

/* 注釈 */

#main-box div.table-box p.note {
    text-align: right;
}

#main-box div.table-box table.table1 {
    margin-top: 10px;
}

/* 次へ前へ */

#main-box div.move {
    margin-top: 20px;
    text-align: center;
}

#main-box div.move a {
    margin:0 20px;
}

/* 予約完了 */

#main-box div.finish {
    margin: 150px 0;
    font-size: 150%;
    text-align: center;
}

/* システムエラー */

#main-box div.systemError {
    margin: 130px 0;
    font-size: 150%;
    text-align: center;
    color: red;
}

/* システムエラー内容 */

#main-box div.systemErrorDetail {
    margin: 25px 0;
    font-size: 80.25%;
    color: black;
    width: 700px;
    text-align: left;
}



/* フッタ */

#footer {
    background: #670001;
    padding: 9px;
    margin: 0 auto;
}

#footer h2 {
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    font: 100%/133.5% "ＭＳ Ｐ明朝", sans-serif;
}


.rogTable{
    text-align: center;
    margin: 20px;
}

.rogTable td.dark{
    background-color: #fff0f5;
}

.white{
    color: #FFFFFF;
}

.explanation{
    font-size: 90%;
}

.box{
    width: 700px;
    border-style: double;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFFFFF;
}

/* ログ画面のcontrol-box */

.control-box2 {
    background: #EBEBEB url("../images/bg_control.gif") no-repeat;
    margin-top: 10px;
    margin-left: 11px;
    padding: 10px 10px;
    border-bottom: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    font-size: 87.5%;
    width: 657px;
}

.positionRight{
    margin-top: 10px;
    margin-bottom: 3px;
    margin-right: 10px;
    text-align: right;
}

.select{
    color: #FFFFFF;
}

/* ログイン画面のcontrol-box */

.control-box_login {
    background: #EBEBEB url("../images/bg_control.gif") no-repeat;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 10px;
    border-bottom: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    font-size: 87.5%;
    text-align: center;
    width: 400px;
}

.position_bottom{
    position:static;
    bottom: 0px;
}

.index{
    margin: 20px 45px;
}
table.table7 {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.square_btn {
    display: inline-block;
    width: 170px;
    height: 34px;
    text-align: center;
    text-decoration: none;
    line-height: 34px;
    outline: none;
    border-left: 2px solid #96514d;
    border-right: 2px solid #96514d;
    position: relative;
    z-index: 2;
    background-color: #fff;
    color: #333;
}

.square_btn+ .square_btn {
    border-left: 0;
    border-right: 2px solid #96514d;
}

.square_btn::after {
    top: 0px;
    left: 4px;
    width: 158px;
    height: 34px;
    border: 2px solid #ffbcbc;
    opacity: 0;
}

.square_btn::before,
.square_btn::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}

.square_btn,
.square_btn::before,
.square_btn::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.square_btn:hover::after {
    background-color: #ffefef;
    opacity: 1;
}