@charset "UTF-8";
body {
  background-color: #ffeeee;
  color: #550000;
  font-family: sans-serif;
  width: 310px;
}

a {
  font-size: 0.75rem;
}

h1, h2, h3, h4, h5 {
  margin-top: 0;
  margin-bottom: 0;
}

h3, h4 {
  text-align: center;
  color: #aa0000;
}

input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"] {
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

/* Information */
.info_box {
  padding: 0px 10px 10px 10px;
  width: 280px;
  min-height: 40px;
  border-radius: 5px;
  border-style: solid;
  border-width: 2px;
  border-color: #ffaaaa;
  background-color: #ffffff;
  font-size: 0.8rem;
  overflow: hidden;
  text-align: left;
}

.info_box legend {
  color: #ff6666;
  font-size: 1.2rem;
  text-shadow: 2px 2px 2px #aaaaaa;
  font-weight: bold;
}

.info_box div {
  overflow-y: auto;
  word-break: break-all;
  overflow-wrap: break-word;
}

/* ボタン */
button {
  background-color: #cc66cc;
  color: #ffffff;
  border-width: 0;
  border-radius: 20px;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  vertical-align: middle;
}

button:hover {
  background-color: #ff6666;
}

.button_large {
  height: 60px;
  width: 300px;
  border-radius: 30px;
  font-size: 1rem;
  line-height: 1;
  margin: 5px 0 0 0;
}

.button_middle {
  height: 30px;
  min-width: 80px;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 1rem;
}

.button_small {
  height: 20px;
  padding: 0 5px 0 5px;
}

/* 色違いのボタン：top確認・キャンセル */
.button_another_color {
  background-color: #cc6666;
}

/* 色違いのボタン：「閉じる」など */
.button_cautious {
  background-color: #ff6666;
}

.button_cautious:hover {
  background-color: #ff3333;
}

/* 自動入力の選択肢 */
.button_person, .button_person_delete, .button_person_other {
  border-radius: 4px;
  background-color: #3366ee;
  margin: 2px;
}

.button_person {
  width: 140px;
}

.button_person_delete {
  width: 90px;
  font-size: 0.7rem;
}

.button_person_other {
  width: 115px;
  font-size: 0.7rem;
  margin-top: 8px;
}

/* 診療内容の選択ボタン*/
.button_item {
  border-radius: 10px;
  background-color: #009999;
}

/* 予約実行ボタン */
.button_reserve {
  font-size: 0.75rem;
  line-height: 1;
}

/* 文字サイズ、装飾 */
.font_large {
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
}

.font_large * {
  vertical-align: text-bottom;
}

.font_small {
  font-size: 0.8rem;
}

.font_smaller {
  font-size: 0.7rem;
}

.font_bold {
  font-weight: bold;
}

.font_underlined {
  text-decoration: underline;
}

/* 入力アラート */
.input_alert {
  background-color: #ff99cc;
}

/* ダイアログの引用部分 */
.cite {
  margin: 2px;
  padding: 2px;
  border: 1px solid #666666;
  background-color: #ffffff;
  color: #333333;
}

/* 幅指定のある枠 */
.full_width_center {
  text-align: center;
  width: 310px;
}

.full_width_right {
  text-align: right;
  width: 310px;
}

.x_full_width_left {
  text-align: left;
  width: 310px;
}

.full_width_indent {
  width: 310px;
  padding-left: 20px;
}

.full_width_align_top {
  width: 310px;
}

.full_width_align_top div {
  vertical-align: top;
}

.add_margin_bottom {
  margin-bottom: 8px;
}

.item1a {
  width: 30%;
  display: inline-block;
}

.item1b, .item1b_r {
  width: 68%;
  display: inline-block;
}

.item1b_r {
  text-align: right;
}

/* 入力欄 */
#input_items input::-webkit-input-placeholder {
  font-size: 0.7rem;
}
#input_items input:-ms-input-placeholder {
  font-size: 0.7rem;
}
#input_items input::-ms-input-placeholder {
  font-size: 0.7rem;
}
#input_items input::placeholder {
  font-size: 0.7rem;
}

#input_items input[type="number"] {
  -moz-appearance: textfield;
}

#input_items input[type="number"]::-webkit-outer-spin-button,
#input_items input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input_full {
  width: 190px;
}

#paddress1, #paddress2 {
  font-size: 0.75rem;
}

#div_pbirthday input::-webkit-input-placeholder {
  font-size: 0.7rem;
  -webkit-transform: scale(0.9) translateX(-0.2rem);
          transform: scale(0.9) translateX(-0.2rem);
}

#div_pbirthday input:-ms-input-placeholder {
  font-size: 0.7rem;
  transform: scale(0.9) translateX(-0.2rem);
}

#div_pbirthday input::-ms-input-placeholder {
  font-size: 0.7rem;
  transform: scale(0.9) translateX(-0.2rem);
}

#div_pbirthday input::placeholder {
  font-size: 0.7rem;
  -webkit-transform: scale(0.9) translateX(-0.2rem);
          transform: scale(0.9) translateX(-0.2rem);
}

#div_pbirthday div:nth-child(2) {
  font-size: 0.65rem;
}

#div_pbirthday div:nth-child(4) {
  font-size: 0.8rem;
}

#div_pbirthday input:nth-child(1) {
  width: 50px;
}

#div_pbirthday input:nth-child(2) {
  width: 36px;
}

#div_pbirthday input:nth-child(3) {
  width: 36px;
}

/* パスワード確認ダイアログの入力欄 */
.show_password_input input {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.show_password_input input[type="number"] {
  -moz-appearance: textfield;
}

.show_password_input input[type="number"]::-webkit-outer-spin-button,
.show_password_input input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.show_password_input div {
  display: inline-block;
  width: 65px;
  font-size: 0.75rem;
}

.show_password_input div:nth-of-type(4) {
  font-size: 0.7rem;
}

.show_password_input input:nth-of-type(1),
.show_password_input input:nth-of-type(2) {
  width: 170px;
}

.show_password_input input:nth-of-type(3) {
  width: 80px;
  margin-right: 5px;
}

.show_password_input input:nth-of-type(4) {
  width: 40px;
  margin-right: 5px;
}

.show_password_input input:nth-of-type(5) {
  width: 40px;
}

.show_password_input input:nth-of-type(6) {
  width: 170px;
}

/* Step3：日付の枠のみ */
.rsv_days {
  max-height: 300px;
  overflow-x: auto;
}

/* 上部のsteps */
#navi_pagetop {
  width: 310px;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
}

#navi_pagetop span {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  text-align: center;
  /*
		vertical-align: middle;
		*/
  line-height: 2;
}

.step_normal {
  background-color: #ffcccc;
  color: #ffcccc;
}

.step_hilite {
  background-color: #ff9999;
  color: #aa0000;
  font-weight: bold;
}

/* 予約の確認取り消し：病院様用と共通なので、先々、切り出す */
/* 共通部分のインポート */
/* Step3, 4 の表示色 */
/* Step3の表 */
.table_select_td_header tr td,
.table_select_td_body tr td {
  text-align: center;
  width: 55px;
}

.table_select_td_header tr td:nth-child(1),
.table_select_td_body tr td:nth-child(1) {
  width: 90px;
}

/* Step4の表 */
.table_select_tsd_header,
.table_select_tsd_body {
  margin-left: 15px;
  border-collapse: separate;
  border-spacing: 0;
  border: solid 1px #cccccc;
}

.table_select_tsd_header td,
.table_select_tsd_body td {
  text-align: center;
  border: solid 1px #cccccc;
}

.table_select_tsd_header tr,
.table_select_tsd_body tr {
  border: solid 1px #cccccc;
}

.table_select_tsd_header tr td:nth-child(1),
.table_select_tsd_body tr td:nth-child(1) {
  width: 120px;
}

.table_select_tsd_header tr td:nth-child(2),
.table_select_tsd_body tr td:nth-child(2) {
  width: 120px;
}

/*
.table_select_tsd_header{
    border-bottom: solid 0 $color_gray;
    td{
        border-bottom: solid 0 $color_gray;
    }
}
*/
.table_select_tsd_body {
  border-top: solid 0 #cccccc;
}

.table_select_tsd_body tr:nth-of-type(1) td {
  border-top: solid 0 #cccccc;
}

.table_select_tsd_body tr:hover td {
  border: solid 1px #333333;
  cursor: pointer;
}

/* 予約可能状況の色表示 */
.cell_bg_gray, .cell_bg_gray2 {
  background-color: #cccccc;
}

.cell_bg_gray2 {
  text-align: center;
  border-style: solid;
  border-width: 1px;
  border-color: #ffffff;
}

.cell_bg_green {
  background-color: #99ff99;
}

.cell_bg_green:hover {
  background-color: #00ff00;
  cursor: pointer;
}

.cell_next_bg_green:hover + td {
  background-color: #00ff00;
}

.cell_bg_yellow {
  background-color: #ffff99;
}

.cell_bg_yellow:hover {
  background-color: #ffff00;
  cursor: pointer;
}

.cell_next_bg_yellow:hover + td {
  background-color: #ffff00;
}

.cell_bg_red {
  background-color: #ff7777;
}

/*
.cell_bg_red:hover{
	background-color: #ff5555;
	cursor: pointer;
}
*/
/* colored square：下部の説明表示 */
.color_expl {
  font-size: 0.6rem;
}

.color_expl div {
  display: inline-block;
  margin: 0 3px 0 0;
}

.color_expl div:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
}

.color_expl div:nth-child(1):before {
  background-color: #99ff99;
}

.color_expl div:nth-child(2):before {
  background-color: #ffff99;
}

.color_expl div:nth-child(3):before {
  background-color: #ff7777;
}

.color_expl div:nth-child(4):before {
  background-color: #cccccc;
}

/* 予約の確認・取り消し */
.cancel_item, .cancel_item_alert, .canceled_item {
  font-size: 0.8rem;
  margin-bottom: 5px;
  color: #000000;
}

.cancel_item {
  background-color: #66ff66;
}

.cancel_item div {
  background-color: #ccffcc;
  padding-left: 5px;
}

.cancel_item_alert {
  background-color: #ff6600;
}

.cancel_item_alert div {
  background-color: #ff9933;
  padding-left: 5px;
}

.canceled_item {
  background-color: #999999;
}

.canceled_item div {
  background-color: #cccccc;
  padding-left: 5px;
}

.cancel_alert {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 4px;
  border-style: solid;
  border-width: 2px;
  border-color: #ff0000;
  color: #aa0000;
  background-color: #ff9933;
}

/*
.cancel_item, .cancel_item_alert, .canceled_item{
	font-size: 0.8rem;
    margin-bottom: 5px;
    color: #000000;
}
.cancel_item{
	background-color: #66ff66;
    div{
	    background-color: #ccffcc;
        padding-left: 5px;
    }
}
.cancel_item_alert{
	background-color: #ff6600;
    div{
        background-color: #ff9933;
        padding-left: 5px;
    }
}

.canceled_item{
	background-color: #999999;
    div{
        background-color: #cccccc;
        padding-left: 5px;
    }
}

.cancel_alert{
	display: inline-block;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 4px;
	border-style: solid;
	border-width: 2px;
	border-color: #ff0000;
	color: #aa0000;
	background-color: #ff9933;
}
*/