@charset "utf-8";

/*page1:おすすめ設定のテーブル設定*/
table.defaultContents{
    border: solid 1px;
    border-collapse: collapse;
    margin: 10px auto;
    width: 900px;
}

/*page1:おすすめ設定の見出し設定*/
th.defaultItem, th.defaultContents{
    color: #fff;
    background-color: #9fbbe4;
    border: solid 1px #869198;
    padding: 5px;
    text-align: center;
    font-weight: bold;
}

/*page1:おすすめ設定の見出し以外の設定*/
td.defaultItem, td.defaultContents{
    color: #433E53;
    border: solid 1px #869198;
    padding: 5px;
    vertical-align: middle;
}

/*page1:おすすめ設定の項目列の設定*/
th.defaultItem{
    width: 300px;
}

/*page1:おすすめ設定内容列の設定*/
th.defaultContents{
    width: 600px;
}

/*おすすめ設定テーブルの見出し文字装飾*/
p.defaultTable{
    font-size: 20px;
    padding: 10px 0px 0px 20px;
    color: #869198;
}

/*page4:営業時間全体の設定*/
table.shopTime{
    border: solid 1px;
    border-collapse: collapse;
    margin: 15px auto 0px auto;
    width: 900px;
}

.shopTime input[type=checkbox]{
    transform: scale(1.5);
}

/*page4:営業時間の見出し全体設定*/
th.shopTime{
    color: #fff;
    background-color: #9fbbe4;
    border: solid 1px #869198;
    padding: 5px;
    text-align: center;
    font-weight: bold;
}

/*page4:営業時間の見出し以外の設定*/
td.shopTime{
    color: #433E53;
    border: solid 1px #869198;
    padding: 5px;
    text-align: center;
}

/*page4:営業時間の見出し以外の設定*/
.shopTime label{
    cursor: pointer;
}

/*page4:営業時間の配置*/
td.businessHours{
    border: solid 1px #869198;
    padding: 5px;
    text-align: center;
    width: 300px;
}

/*page4:営業時間の月、水、金、日列の設定*/
tr.dayWeek{
    background-color: #fff;
}

/*page4:スタッフのテーブル全体の設定*/
table.staff{
    border: solid 1px #869198;
    border-collapse: collapse;
    margin: 10px auto;
    width: 900px;
}

/*page4:スタッフの見出し全体の設定*/
.staffTable th{
    color: #fff;
    background-color: #9fbbe4;
    border: solid 1px #869198;
    padding: 5px;
    text-align: center;
    font-weight: bold;
}

/*page4:スタッフの入力欄の設定*/
.staffTable td{
    border: solid 1px #869198;
    padding: 3px;
    text-align: center;
}

/*page4:スタッフ入力欄全体の設定*/
.staffName input[type="text"]{
    width: 200px;
    padding: 5px;
    font-size: 15px;
    border-radius: 5px;
    margin: 3px;
}

.treatmentTime input[type="text"]{
    width: 100px;
    padding: 5px;
    font-size: 15px;
    border-radius: 5px;
    margin: 3px;
}

.staffComment input[type="text"]{
    width: 500px;
    padding: 5px;
    font-size: 15px;
    border-radius: 5px;
    margin: 3px;
}

/*page4:メニュー入力欄全体の設定*/
.treatmentMenu input[type="text"]{
    width: 400px;
    padding: 5px;
    font-size: 15px;
    border-radius: 5px;
}

.actuallyTime input[type="text"]{
    width: 100px;
    padding: 5px;
    font-size: 15px;
    border-radius: 5px;
}

.visibleTime input[type="text"]{
    width: 100px;
    padding: 5px;
    font-size: 15px;
    border-radius: 5px;
}

.menuPrice input[type="text"]{
    width: 100px;
    padding: 5px;
    font-size: 15px;
    border-radius: 5px;
}

.menu table{
    border: solid 1px #869198;
    border-collapse: collapse;
    margin: 10px auto;
    width: 900px;
}

.menu th{
    color: #fff;
    background-color: #9fbbe4;
    border: solid 1px #869198;
    padding: 5px;
    text-align: center;
    font-weight: bold;
}

.menu td{
    border: solid 1px #869198;
    padding: 3px;
    text-align: center;
}

/*アンケート機能の例示テーブル*/
ul.customerQuestion{
  padding: 0;
  position: relative;
  margin: 10px auto;
  width: 97%;
}

li.customerQuestion {
  color: white;
  background: #81d0cb;
  line-height: 1.5;
  padding: 0.5em 0.5em 0.5em 0.5em;
  border-bottom: 2px solid white;
  font-weight: bold;
  list-style-type: none;
}

li.customerQuestion2 {
  color: white;
  background: #789c9a;
  line-height: 1.5;
  padding: 0.5em 0.5em 0.5em 2em;
  border-bottom: 2px solid white;
  font-weight: bold;
  list-style-type: none;
  text-align: center;
}

/*詳細のホバー設定*/
.text{
  position: relative;
}

.description{
  position: absolute;
  bottom: 3.5em;
  left: 3px;
  padding: 6px;
  background-color: #1456ca;
  color:#FFF;
  border-radius:6px;
  opacity:0;
  display: none;
}

.description2 {
    bottom: 3.5em;
}

.description3{
    position: absolute;
    bottom: 344px;
    left: unset;
}

.description:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 10px;
  border: 0.4em solid transparent;
  border-top: 1em solid #1456ca;
}

.detail:hover + .description{
  animation: popup 1s forwards;
  display: block;
  position: absolute;
  z-index: 2;
}

.detail2:hover + .description{
  animation: popup 1s forwards;
  display: block;
}

.detail3:hover + .description3{
  animation: popup 1s forwards;
  display: block;
}

@keyframes popup {
  100% {
  opacity:1;
  }
}

/*「詳細」の装飾（h4）*/
span.detail, span.detail3{
    padding: 0 6px;
    margin: 0 5px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border: 2px solid #fefefe;
    border-radius: 5px;
    background: #f9b955;
    color: #fefefe;
}

/*「詳細」の装飾（h5）*/
span.detail2{
    display: inline-block;
    padding: .11111rem .5rem;
    margin-right: 10px;
    font-size: .8rem;
    white-space: nowrap;
    cursor: default;
    border: 2px solid #fefefe;
    border-radius: 10px;
    background: #f9b955;
    color: #fefefe;
}