/*
*  スマートフォンでの使用 CSSコーディングベースwidth iPhone13ProMax:429px, Android:Xperia:360px
*/
/* --- CSS リセット --- */
/* 1.より直感的なボックスサイズのモデルを使用 */
*, *::before, *::after { box-sizing: border-box; }
/* 2. デフォルトのマージンを削除 */
* { margin: 0; }
/* 3. 高さは%ベースを使用 */
html, body { height: 100%; }
/* タイポグラフィの微調整
   4. アクセシブルなline-heightを追加
   5. テキストのレンダリングを改善    */
body { line-height: 1.5;  -webkit-font-smoothing: antialiased; }
/* 6. メディア要素のデフォルトを改善 */
img, picture, video, canvas, svg {  display: block;  max-width: 100%; }
ul { padding: 0; }  /* mx2 */
li { list-style: none; }  /* mx2 */
/* 7. フォームのfontに関するデフォルトを削除 
input, button, textarea, select { font: inherit; }*/
/* 8. テキストのオーバーフローを回避 */
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
/* 9. ルートのスタックコンテキストを作成 */
#root, #__next { isolation: isolate; }

/* --- 定義 ---*/
:root {
  --mx-color-red: rgb(191, 34, 34);
  --mx-color-blue: rgb(30, 135, 240);
  --mx-color-green: rgb(97, 191, 87);
  --mx-color-gray: rgb(223, 222, 222);
  --mx-color-darkgray: rgb(76, 76, 76);
  --mx-color-lightgray: rgb(187, 187, 187);
  --mx-color-beforeyr: rgb(133, 99, 35);
  --mx-color-thisyr: rgb(17, 72, 127);
  --mx-color-nextyr: rgb(115, 28, 74);
}

/* --- 共通 --- */
/* 綺麗にゴシックをMacヒラギノ,Winメイリオ > 明朝をMacヒラギノ,Win Yu とした > 標準sans-sefif,MSP
    削除>"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ 明朝", */
html {
  font-family: -apple-system, BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "游明朝", YuMincho, "Hiragino Mincho ProN W3", sans-serif;
}
body {
  letter-spacing: calc(1px - .0625em); /* フォントの文字間隔 相対値指定, 絶対値指定なら1.5px など */
  font-feature-settings: "palt" 1; /* OpenType フォントのプロポーショナルメトリクスの機能の有効化 */
  font-kerning: auto; /* OpenTypeフォントのメトリクスカーニング機能の有効化 auto:UAが判断 */
  line-height: 1.75; /* 単位は付けない */
  /*font-size: 16px;*/
  /* UIkit 標準
  font-size: 16px; 
  color: #666;  Headingは#333*/
}
/* UIkit.modal でモーダルを表示するとページトップにスクロールする。
// html にclass="uk-modal-page" が付き overflow:hidden (fixedでも同じ)のため発生する.
// → CSS でuk-modal-page の overflow を unset した */
.uk-modal-page { overflow: unset !important; }
/*.uk-open .uk-modal-dialog { bottom: -60%; } / * 画面上部の表示を画面下部の表示に変更 */
.uk-table { margin-bottom: unset !important;} /* Table 下部の20pxを削除 */
/* UIkit.modal ではなく Notificationで画面上部に一定時間表示し非表示になる*/
.uk-notification-message { background-color: rgb(187, 207, 201); border: 1px solid rgb(54, 84, 74); color: rgb(64, 64, 64);}

/* 簡易設定 UIkit標準のものは余計なものが付きすぎる*/
.mx-block {position: fixed; top: 40px; width: 100%; max-width: 428px;background: #fff;padding-top: 20px; z-index:2;}
.mx-block_inner{margin: 0 auto;}
.mx-align-left { text-align: left;}
.mx-align-center { text-align: center;}
.mx-align-right { text-align: right;}
.mx-color-blue { color: var(--mx-color-blue); }
.mx-color-red { color: var(--mx-color-red); }
.mx-color-gray { color: var(--mx-color-gray); }
.mx-color-white { color: white; }
.mx-text-vw { font-size: clamp(14px, 6vw, 26px); }
.mx-text-middle { font-size: 120%; }
.mx-text-small { font-size: 80%; }
.mx-text-smaller { font-size: 90%; }

.mx-input2 { padding: 1px; width: clamp(36px, 10vw, 42px);}
.mx-input3 { padding: 1px; width: clamp(40px, 14vw, 56px);}
.mx-input4 { padding: 1px; width: clamp(56px, 18vw, 78px);}
.mx-input6 { padding: 1px; width: clamp(76px, 20vw, 114px);}
.mx-input-name { padding: 1px; width: clamp(80px, 38vw, 144px);}
.mx-input-tel { padding: 1px; width: clamp(110px, 50vw, 200px);}
.mx-input-email { padding: 1px; width: clamp(200px, 84vw, 320px);}

/* ヘッダー右上のバッジ. 交換依頼の回答メッセージ*/
.mx-badge-msg { position: fixed; right: 10px; top: 8px; z-index: 11; background: red !important; cursor: pointer; }
/*#badgemsg-flip { width: 350px; padding-top:60px; }*/
#badgemsg-flip .uk-offcanvas-bar { width: 370px; padding-top:50px; }
#badgemsg-list button.mx-blue { background-color: #fff; border: 1px solid #1e87f0; margin-right: 4px; margin-top: 4px;}
#badgemsg-list button.mx-red { background-color: #fff; border: 1px solid red; margin-right: 4px; margin-top: 4px;}
.mx-badgemsg-box { margin-top: 10px; }
/* 交換依頼の取消・回答. 週に表示するバッジと操作ボックス. */
.mx-badge-red { margin-left: 1em; background: red !important; cursor: pointer;}
.mx-badge-blue { margin-left: 1em; cursor: pointer; } /* uk-badge の青のまま */
.mx-modal .uk-modal-body { padding-left: 10px !important; padding-right: 10px !important; }
.mx-modal button { margin-top: 6px; }
/* 下方.mx-1item > span でspanに幅指定あり、打ち消し */
span.mx-nowidth { width:unset !important; }

hr { border-top: 2px solid var(--mx-color-blue); }
.mx-head-border { position: relative; display: inline-block; padding: 0 55px; }
.mx-head-border:before, .mx-head-border:after {
  content: '';
  position: absolute;
  top: 45%;
  display: inline-block;
  width: 70px;
  height: 2px;
  background-color: var(--mx-color-gray);
}
.mx-head-border:before { left: -2em; }
.mx-head-border:after { right: -2em; }

main.mx-container-smaphone {
  max-width: 428px !important;
  padding: 0 4px 40px;
/*  border: 1px solid skyblue;*/
}
/* 1行1項目*/
.mx-1line { display: table; width: 100%; padding:4px; }
.mx-1line .mx-1item, .mx-1line .mx-2item, .mx-1line .mx-2item-left { display: table-cell; padding-left: 1em; padding-right: 1em;}
.mx-1item > span {display: inline-block; width:5em; }
.mx-1item > span#username {display: inline-block; width:unset; } /* ページタイトル */
/* 1行2項目*/
.mx-1line .mx-2item:first-child { width: 50%; }
.mx-1line .mx-2item:last-child { width: 50%; }
.mx-1line .mx-2item-left:first-child { width: 80%; }
.mx-1line .mx-2item-left:last-child { width: 30%; }
/* 表示・非表示 */
[data-type="disp"] { display: "" !important; }
[data-type="none"] { display: none !important; }


/* タップできるセルをポインター表示、枠線色 */
.tap_detail_me, .tap_detail_other, .tap_changework { cursor: pointer; }
.tap_detail_me { border: 3px solid #FF0000 !important }
.tap_detail_other { border: 3px solid #1CAE1C !important }
/* タップできないセルをグレー背景 */
.nottap_bgcolor { background-color: var(--mx-color-gray) !important;}

/* ヘッダ */
header {
  line-height: 18px;
  height: 40px;
  width: 100%;
  border-bottom: 1px solid rgb(206, 206, 206);
  position: fixed;
  background-color: rgb(255, 255, 255);
  z-index: 10;
}
/* HTMLに文字 必要 */
div.header-space { margin-bottom: 20px !important; }
header div.title { /*タイトルだけを中央*/
  position: absolute;
  font-size: clamp(15px, 6vw, 24px);
  top: 12px;
  left:50%;
  transform: translate(-50%, 0);
}
/* フッタ */
footer {
  line-height: 20px;
  height: 40px;
  width: 100%;
  border-top: 1px solid rgb(206, 206, 206);
  padding: 4px 4px 0px 4px;
  position: fixed;
  background-color: #fff;
  z-index: 10;
  bottom: 0;
}
/* HTMLに文字 必要 */
div.mx-footer-space { line-height: 20px; }
/*footer div.title { display: inline-block; text-align: center;}  Humメニューとタイトルを同じ行 */
footer div.tel {/*タイトルだけを中央*/
  position: absolute;
  font-size: 14px;
  top: 10px;
  left:30%;
  transform: translate(-10%, 0);
}
/* ボトムメニュー 初期非表示 */
.bottom-fixmenu {
  display: none;
  position: fixed;
  bottom: 40px;
  z-index: 11;
  box-sizing: border-box;
  width: 200px;
  padding: 20px 20px;
  background: #ffffff;
  border: 1px solid #1E87F0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.bottom-fixmenu ul { font-size: 120% !important ; }

/* ハンバーガーメニュー*/
.menu-btn {
  position: fixed;
  bottom: 4px;
  left: 4px;
  display: flex;
  height: 34px;
  width: 34px;
  justify-content: center;
  align-items: center;
  z-index: 10;
  background-color: white;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background-color: #1E87F0;
  position: absolute;
}
.menu-btn span:before { bottom: 8px; }
.menu-btn span:after { top: 8px; }
#menu-btn-check { display: none; }
#menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
  transition: all 0.5s;/*アニメーション設定*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
  bottom: 0;
  transform: rotate(45deg);
  transition: all 0.5s;/*アニメーション設定*/
}
#menu-btn-check:checked ~ .menu-btn span::after {
  top: 0;
  transform: rotate(-45deg);
  transition: all 0.5s;/*アニメーション設定*/
}


/*
* ログイン, ログイン認証
*/
.mx-login { text-align: center; }
.mx-login select { width: max(160px, 60%); }
.mx-login button { width: max(160px, 60%); }
.mx-login .mx-width-fix {width: max(160px, 60%); display: inline-block; } /* ボタン等と等幅にしてセンタリングや左寄せやで端を揃える */
.grecaptcha-badge { bottom: 44px !important; } /* reCAPTCHAマークがフッタに隠れるので*/

/*
* あなたの予定/すべての予定
*/
.mx-schedule .table { display: block;margin-top: 174px;}
.mx-schedule table { width: 100%; border-collapse: collapse;/* table-layout: fixed;*/ } /* 予定表最上部「予約 | 備考」「A棟 | B棟」は.tableの外 */
.mx-schedule .table table { table-layout: fixed; }
.mx-schedule .table table tr td { border: 1px solid rgba(179 179 179); text-align: left; vertical-align: top; word-wrap: break-word;}
.mx2-week {
  background-color: #2151a2;
  text-align: center;
  color: #fff;
  padding: 5px;
}
.mx2-week_text-em {
  font-size: 20px;
  font-weight: bold;
}
.mx2-form {
  font-size: 14px;
}

.table table tbody tr td div {
  padding: 5px;
}

.mx-schedule .table table tbody tr td:nth-child(3) > div:first-child,
.mx-schedule .table table tbody tr td:nth-child(4) > div:first-child { font-size: 130%; } /* a/b棟 メンバー名 */
.villaA-bgc {background-color: #FFEBEB;}
td[data-ownerid="me"] > div.villaA-bgc {background-color: #fe9292; }
.villaB-bgc {background-color: #DCF0FF;} 
td[data-ownerid="me"] > div.villaB-bgc {background-color: #0091ff; }
.villa-bbq, .mx-bbq {border-top: 1px solid rgb(216, 216, 216); border-bottom: 1px solid rgb(216, 216, 216);}
.mx-schedule .table table tbody tr td:nth-child(3) > div:nth-child(2),
.mx-schedule .table table tbody tr td:nth-child(4) > div:nth-child(2) { font-size: 85%; } /* a/b棟 利用曜日 */
.mx-schedule .table table tbody tr td:nth-child(3) > div:nth-child(3),
.mx-schedule .table table tbody tr td:nth-child(4) > div:nth-child(3) { font-size: 85%; } /* a/b棟 BBQ曜日 */
.disp_width-zero {width: 0;}
.mx-schedule .table table tbody tr.sche-month { height: 30px; } /* 月ヘッダの高さ */
.mx-schedule .table table tbody tr.sche-month td { font-weight: bold; text-align: center; background-color: rgba(17, 72, 127, 0.2);} /* 月ヘッダ */
.mx-schedule .table table tbody tr.sche-week { height: 30px; } /* 月ヘッダの高さ */
.mx-schedule .table table tbody tr.sche-week td {
  text-align: center;
  color: #fff;
  padding-left: 0.5em;
} /* 週ヘッダ */
.mx-schedule .table table tbody#tbody1 tr.sche-week td {background-color: #2151A2;}/* 週ヘッダ 当年*/
.mx-schedule .table table tbody#tbody2 tr.sche-week td {background-color: var(--mx-color-nextyr);}/* 週ヘッダ 当年*/

/*不要? */          .mx-schedule .table table tbody tr.sche-week td span[name="swpmsg"] { display: inline-block; padding-left: 1em;} /* 週ヘッダに依頼中メッセージ表示 */

.mx-schedule .table table tbody .mx-space-request,
.mx-schedule .table table tbody .mx-space-receive { color: rgb(215, 40, 40); font-size: 0.9em; }  /*交換依頼 検討中,打診中 */

.mx-finger { background-image: url('../img/finger32.png'); background-repeat: no-repeat; background-position: bottom right;}
.uk-notification-message { background-color: rgb(187, 207, 201); border: 1px solid rgb(54, 84, 74); color: rgb(64, 64, 64);}
/* A/B棟に「利用」「交換」文字を2行目に表示する */
.mx-usage-text { display: inline-block; }
.mx-usage-text[data-usage="1"]::before { content: "利用 "; color: var(--mx-color-blue); }
.mx-usage-text[data-usage="0"]::before { content: "交換可"; color: var(--mx-color-green); }
.mx-usage-text[data-usage="2"]::before { content: "打診中"; color: var(--mx-color-red); }
.mx-usage-text[data-usage="3"]::before { content: "検討中"; color: var(--mx-color-red); }
.mx-usage-text[data-usage="2"], .mx-usage-text[data-usage="3"] { color:rgb(215, 40, 40); }

.mx-bbq::before { content: url(../img/bbq.png); padding-right: 1.4em;}
.mx-car-no1, .mx-car-no2 { display: inline-block; width:98px; }
.mx-car-no1::before { content: url(../img/car.png); padding-right: 0.6em;}
.mx-car-no2::before { content: url(../img/car.png); padding-right: 0.6em;}
.icon_dog::after { content: "("url('../img/dog.png')"可)";} /* B棟犬アイコン*/

span[data-caruser="me"]::after { content: "予約済み"; color: var(--mx-color-blue);}
span[data-caruser=""]::after { content: "";}
span[data-caruser="2"]::after { content: "他棟予約"; color: var(--mx-color-darkgray);}
/*span[data-caruser="3"]::after { content: "2台不可"; color: var(--mx-color-darkgray);}*/
span[data-caruser="X"]::after { content: "制限中"; color: var(--mx-color-lightgray);}
span[data-caruser="Y"]::after { content: "予約-制限"; color: var(--mx-color-red);}
span[data-carstatus=""]::after { content: ""; }
span[data-carstatus="1"]::after { content: "予約済み"; color: var(--mx-color-blue);}
/*span[data-carstatus="2"]::after { content: "他棟予約"; color: var(--mx-color-darkgray);}*/
span[data-carstatus="X"]::after { content: "制限中"; color: var(--mx-color-lightgray);}
span[data-carstatus="Y"]::after { content: "予約-制限"; color: var(--mx-color-red);}

.mx2-text-area {
  color: #5b5b5b;
  border: 1px solid rgb(179, 179, 179);
  padding: 5px;
  margin: 0 5px;
  height: 110px;
}
.mx2-text-area:hover,
.mx2-text-area:active {
  background: rgb(231, 231, 231);
  cursor: pointer;
}
.mx2-btn-inner {
  text-align: center;
  padding: 10px;
}

.mx2-btn {
  display: inline-block;
  color: #fff;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #47a1f9;
  box-shadow: 0 5px 0 #797a7b;
  border-radius: 10px;
  margin: 10px auto 4px;
  padding: 1px 20px;
  user-select: none;
  cursor: pointer;
  text-decoration: none;
}

.mx2-reserve-btn {
  max-width: 450px;
}

.mx2-btn:active {
  margin-top: 14px;
  margin-bottom: 11px;
  box-shadow: 0 1px 0 #112c47;
}


/* お盆、年末年始など未設定 */
td[data-ownerid=""] { background-color: var(--mx-color-gray);}

.mx-schedule table#sche1_tbl caption { background-color: #2151A2; color: white;} /* 表1 年ヘッダ表示 */
.mx-schedule table#sche2_tbl caption { background-color: var(--mx-color-nextyr); color: white;} /* 表2 年ヘッダ表示 */
.mx-schedule  table caption { cursor: pointer;}
.mx-schedule table#sche1_tbl #sche1_ttl td { text-align: center; }
.mx-schedule  table tbody tr td.bg-yellow { background-color: #fcf5d4; } /* 「あなた」予約・備考ヘッダ */
.mx-schedule  table tbody tr td.bg-red { background-color: #FCD4D4; } /* 「すべて」A棟ヘッダ */
.mx-schedule  table tbody tr td.bg-blue { background-color: #C8E7FF; } /* 「すべて」B棟ヘッダ */
.mx-schedule  table tbody tr td.td {
  width: 50%;
  text-align: center;
  padding: 0;
}
.sche1_ttl_txt-big { font-size: 20px; font-weight: bold;}    /* 項目名 */
.mx-schedule table#sche1_tbl #sche1_ttl td:nth-child(3),
.mx-schedule table#sche1_tbl #sche1_ttl td:nth-child(4) { width: 50%; } /* 項目名セルでA棟B棟列の幅指定 */


/* トグルスイッチ: 「あなた」「すべて」の切り替え、権利の「利用」「交換可」切り替え、車の「利用する」「利用しない」切り替え 共通 */
.mx-toggle-area { display: table; width: 100%; height: 60px; }
.mx-toggle-area > div { display: table-cell; text-align: center; vertical-align: middle; font-size: large; }
.mx-toggle-area > div:first-child { width: 33%; text-align: right;}
.mx-toggle-area > div:nth-child(2) { width: 34%; text-align: center;}
.mx-toggle-area > div:last-child { width: 33%; text-align: left;}
.mx-toggle-area .toggle-switch { /* ボタンと左右文字幅含む全体 */
  position: relative;
  width: 45px;
  height: 24px;
  margin: 0;
  text-align: center; /* スイッチを中央 */
}
/* 「あなた」「すべて」の切り替え */
.mx-block .toggle-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0px; /*100%; Android でタップすると全体が一瞬フラッシュするので 高さゼロで見えないようにする  */
  z-index: 3;
  opacity: 0;
  cursor: pointer;
}
.mx-block .toggle-label { /*ボタン自体*/
  width: 45px;
  height: 22px;
  background: rgb(234, 106, 55);
  position: relative;
  display: inline-block;
  border-radius: 46px;
  transition: 0.4s;
  box-sizing: border-box;
  margin-top: 8px;
}
.mx-block .toggle-label:after { /* 丸いボタン */
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 100%;
  left: 0;
  top: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: 0.4s;
}
.mx-block .toggle-input:checked + .toggle-label { background-color: rgb(75, 216, 101); }
.mx-block .toggle-input:checked + .toggle-label:after { left: 24px; }
.mx-block .toggle-label[disabled] { background-color:rgb(183, 183, 183) !important; }

/* 権利の「利用」「交換可」切り替え */
.mx2-stay .mx-toggle-area { height: 1px; }
.mx2-stay .toggle-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0px; /*100%; Android でタップすると全体が一瞬フラッシュするので 高さゼロで見えないようにする  */
  z-index: 3;
  opacity: 0;
  cursor: pointer;
}
.mx2-stay .toggle-label-stay { /*ボタン自体*/
  width: 45px;
  height: 22px;
  background: rgb(75, 216, 101);
  position: relative;
  display: inline-block;
  border-radius: 46px;
  transition: 0.4s;
  box-sizing: border-box;
  margin-top: 8px;
}
.mx2-stay .toggle-label-stay:after { /* 丸いボタン */
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 100%;
  left: 0;
  top: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: 0.4s;
}
.mx2-stay .toggle-input:checked + .toggle-label-stay { background-color: rgb(30, 135, 240); }
.mx2-stay .toggle-input:checked + .toggle-label-stay:after { left: 24px; }
.mx2-stay .toggle-label-stay[disabled] { background-color:rgb(183, 183, 183) !important; }

/* 車の「利用する」「利用しない」切り替え */
.mx2-car .mx-toggle-area { height: 1px; }
.mx2-car .toggle-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0px; /*100%; Android でタップすると全体が一瞬フラッシュするので 高さゼロで見えないようにする  */
  z-index: 3;
  opacity: 0;
  cursor: pointer;
}
.mx2-car .toggle-label-car1,
.mx2-car .toggle-label-car2 { /*ボタン自体*/
  width: 45px;
  height: 22px;
  background: rgb(135, 205, 148);
  position: relative;
  display: inline-block;
  border-radius: 46px;
  transition: 0.4s;
  box-sizing: border-box;
  margin-top: 8px;
}
.mx2-car .toggle-label-car1:after,
.mx2-car .toggle-label-car2:after { /* 丸いボタン */
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 100%;
  left: 0;
  top: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: 0.4s;
}
.mx2-car .toggle-input:checked + .toggle-label-car1,
.mx2-car .toggle-input:checked + .toggle-label-car2 { background-color: rgb(0, 90, 179); }
.mx2-car .toggle-input:checked + .toggle-label-car1:after,
.mx2-car .toggle-input:checked + .toggle-label-car2:after { left: 24px; }
.mx2-car .toggle-label-car1[disabled],
.mx2-car .toggle-label-car2[disabled] { background-color:rgb(81, 81, 81) !important; }

/* 共有スペース 編集のラジオ表 */
.mx2-space table tr td { border:none !important;}
.mx2-space .mx-table-small tr td:not(:nth-child(1)) { border-left: 1px solid lightgray !important; padding: 1px 0 1px 3px;}
.mx2-space .mx-table-small tr:first-child td { border-bottom: 1px solid lightgray !important;}

/* 編集中バー */
.mx-edittingbar {
  display: inline-block;
  text-align: center;
  background-color: var(--mx-color-red);
  width: 100%;
  color: white;
  letter-spacing:1em;
}
/* 編集中備考 */
.mx-you-edittingmsg, .mx-all-edittingmsg {
  width: 100%;
/*  padding-left: 10%;
  padding-right: 10%;*/
  font-size: small;
}
.mx-all-edittingmsg { position: relative;}
/*.mx-all-edittingmsg input[type="radio"] { margin: 10px 4px 10px 20px; }*/

/* 編集/交換するボタン */
.mx-schedule a { border: 2px solid var(--mx-color-red) ; color: var(--mx-color-red); border-radius:5px; }
.mx-schedule a.mx-note { border: none; color: darkgray; } /* ↑のaリンクを上書き*/
.mx-cbxbutton { position: relative; text-align: center;}
.mx-cbxbutton input { opacity: 0; position: absolute; left: 0; }
.mx-cbxbutton label{
  padding: 7px 10px;
  border-radius: 5px;
  border: 2px solid var(--mx-color-red);
  background: white;
  display: inline-block;
  cursor: pointer;
  transition: .5s;
  color: var(--mx-color-red);
}
.mx-cbxbutton input:checked + label{ background: rgb(255, 224, 224); }
.mx-cbxbutton input:disabled + label {
  border: 2px solid var(--mx-color-gray);
  color: var(--mx-color-gray);
}
/* 「すべて」で今週へのリンクアイコン */
.mx-thisweek { position: absolute; left: 10px; top:40px; border:none !important; }

/* 利用指定、備考入力エリア 画面下部固定 */
.bottom-fixarea {
  position: fixed !important;
  width: min(100%, 428px);
  bottom: 0;
  background-color: rgb(54, 139, 139); /* rgb(47, 98, 153);*/
  z-index: 11;
  color: #fff;
}
#week-box { height: 120px;} /* 週 指定枠の高さ */
#order-box { height: 650px;} /* 予約 指定枠の高さ*/
#note-box { height: 300px;} /* 備考 指定枠の高さ */
#note-box textarea {
  display: inline-block;
  bottom: 0;
  font-size: 100%;
}
.mx-note-maxlen { margin-top: -10px; margin-right: 1em; text-align: right; }

.mx2-remarks-textarea,
.mx2-btn-block { text-align: center; }
.mx2-remarks textarea {
  width: 95%;
  border-radius: 5px;
  padding: 5px;
}
.mx2-form-title {
  color: #fff;
  text-align: center;
  padding: 5px;
}
.mx2-form-title-block { position: relative; }
.mx2-close {
    width: 1.3rem;
    height: 1.3rem;
    position: absolute;
    top: 15%;
    right: 1%;
    margin-top: 0; /* UIkit *+p に上下margin 20px あり、削除*/
}
.mx2-close:active { opacity: 0.5; }
.mx2-close:hover{
    opacity: 0.5;
    cursor: pointer;
}


.mx2-uikit-p-ul-marginb-zero { margin: 0 !important; } /* UIkit ul、p に bargin 0 0 20px 0 あり、削除*/

.mx2-btn-block {
  display: flex;
  justify-content: center;
  padding:0 10px 10px;
}

.mx2-reserve { border: 3px solid rgb(54, 139, 139); }

.mx2-stay,
.mx2-space {
  background: #fff;
}

.mx2-day,
.mx2-space,
.mx2-car {
  padding-top: 5px;
}

.mx2-day-list {
  padding-bottom: 5px;
}

.mx2-form-title_color-blue {
  color: #2151a2;
}

.mx2-change-btn {
  background: #6AC284;
  margin-left: 10px;
  /*width: 64px;*/
}

.mx2-update-btn,
.mx2-car-btn-l {
  margin-right: 10px;
}
/* */
.mx2-uk-flex {
  display: flex;
  justify-content: space-evenly;
  color: #fff;
}

.mx2-uk-flex-li-wrap {
  padding: 0 10px;
}

.mx2-uk-flex-li {
  display: flex;
  justify-content: space-around;
  color: #2151a2;
  padding-bottom: 15px;
}
/* */
.mx2-car-btn::before {
  content: url(../img/car.png);
  padding-right: .4em;
}

.mx2-car-btn-r {
  background: #6AC284;
  margin-left: 10px;
  /*width: 113px;*/
}

.mx2-btn[data-status="NO"],
.mx2-btn[data-status="NG"],
.mx2-btn[data-status="NO"],
.mx2-btn[data-status="NG"] { background: #515151;}


.mx-button-order{
  padding: 2px 2px;
  border-radius: 4px;
  border: 1px solid rgb(5, 38, 74);
  cursor: pointer;
  width: 5em;
}
.mx-button-order.close { background-color: rgb(202, 202, 202); height:40px; }
.mx-button-order.use,.mx-button-order.update { background-color: rgb(154, 196, 254); height:40px; }
.mx-button-order.unset { background-color: rgb(255, 255, 255); height:40px; }
.mx-button-order.changable { background-color: rgb(226, 253, 211); height:40px; }
.mx-button-order.request { background-color: rgb(232, 225, 135); height:40px; }
/* 2つのボタン位置調整 */
.mx-button-two { display: table; width: 100%; }
.mx-button-two > div { display: table-cell; }
.mx-button-two > div:first-child { width: 33%; text-align: left;}
.mx-button-two > div:nth-child(2) { width: 34%; text-align: center;}
.mx-button-two > div:last-child { width: 33%; text-align: right;}
/* 依頼リスト */
.bottom-fixarea ul { list-style-type: none; }
.mx-divider-vertical { border-left: 1px solid white;}
/* 来るの利用制限期間 */
.mx-table2cell{ display: table; width: 100%; }
.mx-table2cell > span { display: table-cell; }
.mx-table2cell > span:first-child { width: 35%; text-align: left; }

/* ページ下部「利用ルール」「割り当て」「システムの動作」など説明 */
.uk-list-hyphen > div { margin-top: 2.5em !important;}
.uk-list-hyphen > div::before { content: "【" !important; }
.uk-list-hyphen > div::after { content: "】" !important; }
.uk-list-hyphen > span::before { content: "※ " !important; }

/*
* 管理(メンバー)
*/
.mx-info .mx-cbxbutton label { padding: 2px 4px; } /* 上の.mx-cbxbuttonに変更 */
.mx-infotable .tbl_point_ttl {width: max(200px, 90%); margin-left: 5%; } /* width90% と left 5% でセンタリング */
.mx-infotable .tbl_point_ttl tr.height { height: 70px; vertical-align: bottom; }
.mx-infotable .tbl_point_ttl td:first-child { text-align: left; }
.mx-infotable .tbl_point_ttl td:last-child { text-align: right; }
.mx-infotable .tbl_point_ttl td.mx-line { border-bottom: 1px solid var(--mx-color-gray); }

.mx-infotable .tbl_point_detail {width: max(200px, 95%); margin-left: 5%; box-shadow: 5px 5px 10px rgba(106, 106, 106, 0.8); } /* width95% と left 5% で右寄せ */
.mx-infotable .tbl_point_detail td:first-child { width: 6em; text-align: left;  font-size: 85%;} /* 明細の利用日*/
.mx-infotable .tbl_point_detail tr:nth-child(odd) td:last-child { width: 4em; text-align: right; font-size: 85%; } /* 明細のポイント */
.mx-infotable .tbl_point_detail tr:nth-child(even) td:last-child { /* 明細の名目 */
  text-align: left;
  padding-left: 2em;
  font-size: 70%;
  line-height: 10px;
  padding-bottom: 1em;
  border-bottom: 1px solid var(--mx-color-gray);
}
.mx-infotable .tbl_point_detail td.nodata { padding-top: 0.8em;} /* 明細が空*/

.mx-cbxlink { position: relative; }
.mx-cbxlink input { opacity: 0; position: absolute; left: 0; }
.mx-cbxlink label{
  cursor: pointer;
  color: var(--mx-color-blue);
}

/*
* 管理(管理者)
*/
/* 定期清掃,注文清掃,清掃実績 */
.mx-infotable .tbl_work_detail, .mx-infotable .tbl_work_point { table-layout: fixed; }
.mx-infotable .tbl_work_detail > tbody > tr.tbl-head td,
.mx-infotable .tbl_work_point > tbody > tr.tbl-head td { border-bottom: 3px solid var(--mx-color-gray);}
.mx-infotable .tbl_work_detail > tbody > tr td,
.mx-infotable .tbl_work_point > tbody > tr td { padding-bottom: 10px; }

.mx-infotable .tbl_work_detail > tbody > tr > td:nth-child(1) { width: 20px; }
.mx-infotable .tbl_work_detail > tbody > tr > td:nth-child(2) { width: 50px; }
.mx-infotable .tbl_work_detail > tbody > tr > td:nth-child(3) { width: 10px; }
.mx-infotable .tbl_work_detail > tbody > tr > td:nth-child(4) { width: 30px;}
.mx-infotable .tbl_work_detail > tbody > tr > td:nth-child(5) { width: 40px; }
.mx-infotable .tbl_work_detail > tbody > tr > td:nth-child(6) { width: 30px; }
.mx-infotable .tbl_work_point > tbody > tr > td:nth-child(1) { width: 50px; }
.mx-infotable .tbl_work_point > tbody > tr > td:nth-child(2) { width: 40px; }
.mx-infotable .tbl_work_point > tbody > tr > td:nth-child(3) { width: 40px;}
.mx-infotable .tbl_work_point > tbody > tr > td:nth-child(4) { width: 40px; }
.mx-infotable .tbl_work_point > tbody > tr > td:nth-child(5) { width: 30px; }

.mx-infotable .tbl_work_detail > tfoot, .mx-infotable .tbl_work_point > tfoot { font-size: 100%; } /* uk-table tfoot 上書き */
.mx-infotable .tbl_work_detail > tfoot > tr, .mx-infotable .tbl_work_point > tfoot > tr { border-top: 3px solid var(--mx-color-gray); }
.mx-infotable .tbl_work_point .tbl_use_point {width: max(200px, 95%); margin-left: 5%; border: 1px lightsteelblue solid; /*box-shadow: 5px 5px 10px rgba(106, 106, 106, 0.8);*/ } /* width95% と left 5% で右寄せ */
.mx-infotable .tbl_work_point .tbl_use_point td:first-child { width: 6em; text-align: left; padding: 2px; } /* 明細の利用日*/
.mx-infotable .tbl_work_point .tbl_use_point td:nth-child(2){ width: 5em; text-align: right; padding: 2px; } /* 明細のポイント */
.mx-infotable .tbl_work_point .tbl_use_point td:nth-child(3){ width: 5em; text-align: right; padding: 2px; } /* 明細のポイント */
.mx-infotable .tbl_work_point .tbl_use_point td:nth-child(4){ width: 20em; text-align: left; padding: 2px 2px 2px 1em; } /* 明細の名目 */

#pointbase_area input { text-align: right ; }
#pointbase_area .mx-cbx-onoffarea {
  margin-left: 3em;
  margin-right: 1em;
  padding: 1em 0 1em 0;
  border: 1px solid var(--mx-color-gray);
}

/* 利用ポイント,権利の割当,利用ポイント明細 */
.mx-point .table, .mx-assign .table { display: block;}
.mx-point table, .mx-assign table {border: 1px solid var(--mx-color-gray); border-collapse: collapse; width:100%; table-layout: fixed; }
.mx-point table tr td, .mx-assign table tr td { border: 1px solid var(--mx-color-gray); text-align: center; word-wrap: break-word;}
/*.mx-point  table thead tr td:first-child { width:20px; }*/  /* メンバー名 */
.mx-point  table thead tr th:nth-child(2) { width:80px; } /* 獲得 */
.mx-point  table thead tr th:nth-child(3) { width:80px; } /* 利用 */
.mx-point  table thead tr th:nth-child(4) { width:80px; } /* 合計 */
.mx-assign table thead tr th:first-child { width:40px; }  /* 月 */
.mx-assign table thead tr th:nth-child(2) { width:130px; } /* 週(木～水) , 列3,4 は自動*/
.mx-point table tbody tr, .mx-assign table tbody tr { height: 3em; }
.mx-point  table tbody tr td:not(:first-child), .mx-point  table tfoot tr td:not(:first-child) { text-align: right; padding-right: 10px; }

.mx-point  table#point1_tbl thead th { background-color: var(--mx-color-beforeyr); color: white; } /*表 ヘッダ色 */
.mx-point  table#point2_tbl thead th { background-color: var(--mx-color-thisyr); color: white; }
.mx-point  table#point1_tbl tfoot td { background-color: var(--mx-color-gray); }
.mx-point  table#point2_tbl tfoot td { background-color: var(--mx-color-gray); }
.mx-assign table#sche1_tbl  thead th { background-color: var(--mx-color-thisyr); color: white; }
.mx-assign table#sche2_tbl  thead th { background-color: var(--mx-color-nextyr); color: white; }