@charset "utf-8";

*, *:before, *:after {
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }


/* 各種カラー初期値 */
:root {
  --base-bgcolor: #ffeff7;
  --base-color: black;
  --section-bordercolor: #e0e0e0;
  --section-bgcolor: white;
  --menu-bgcolor: #cc3399;
  --menu-hovercolor: #993366;
  --menu-color: white;
  --menu-color-hidden: #cc6699;
  --menu-hrcolor: white;
  --menu-btncolor: #ff7fbf;
  --menu-width: 208px;
  --h1-color: #cc6699;
  --h3-bgcolor: #ffc6e2;
  --h3-color: black;
  --table-bordercolor: #ffa8d3;
  --table-thbgcolor: #ffeff7;
  --table-thcolor: #cc6699;
  --table-hovercolor: #ffc6e2;
  --form-label-color: #cc6699;
  --form-bordercolor: #CCCCCC;
  --form-bgcolor: white;
  --form-color: black;
  --form-checkedcolor: #CC0000;
  --form-nodatacolor: #d3ccd6;
  --form-placeholdercolor: #d3ccd6;
  --form-submit1-bgcolor: #ff3399;
  --form-submit1-color: white;
  --form-submit2-bgcolor: #666666;
  --form-submit2-color: white;
}
.tc_new { color: red; }
.tc_free { color: chocolate; } 
.tc_member { color: forestgreen; } 
.tc_ss { color: darkturquoise; } 
.tc_staff { color: dodgerblue; } 
.tc_ambassador { color: mediumslateblue; } 
.tc_stakeholder { color: dimgray; }
.tc_other { color: darkgray; }
.bc_operationfollow { background: #f2e5ff; }
.bc_operationrequest { background: cornsilk; }
.tc_none_introset { color:goldenrod; font-style: italic; }
.tc_check { color: red; }


html{
  font-size: 14px;
  line-height: 1;
}
body {
  -webkit-text-size-adjust: 100%;
  font-family: sans-serif;
  background: var(--base-bgcolor);
  color: var(--base-color);
}


/* ヘッダー */
header {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 40px;
  background: var(--menu-bgcolor);
  color: var(--menu-color);
  display: flex;
	flex-direction: row;
}
.header-area {
  width: 100%;
  margin-top: 13px;
  margin-right: 8px;
  text-align: right;
}
.salon_name {
  font-size: 12px;
  padding-right: 6px;
}
.staff_name > span{
  font-size: 12px;
  padding-left: 4px;
}


/* ページメニュー */
#nav-drawer {
  position: relative;
}
#nav-drawer input[type=checkbox] + label::before {
  display: none;
}
.nav-unshown {
  display: none;
}
#nav-open {
  display: block;
  margin-top: 11px;
  margin-left: -8px;
}
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  z-index: 99999;
  height: 3px;
  width: 24px;
  border-radius: 3px;
  background: var(--menu-btncolor);
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -7px;
}
#nav-open span:after {
  bottom: -14px;
}
#nav-close {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
}
#nav-content {
  overflow: auto;
  position: fixed;
  z-index: 999999;
  top: 0;
  left: 0;
  width: var(--menu-width);
  max-width: var(--menu-width);
  height: 100%;
  background: var(--menu-bgcolor);
  color: var(--menu-color);
  font-size: 16px;
}
#nav-content > ul {
  padding: 16px 0;
}
#nav-content > ul > li > a:hover {
  background: var(--menu-hovercolor);
}
#nav-content > ul > li > hr {
  display: block;
  height: 2px;
  background-color: var(--menu-hrcolor);
  border: 0;
  margin-top: 12px;
  opacity: 0.2;
}
#nav-content > ul > li > a {
  display: block;
  padding: 12px;
  text-decoration: none;
  color: var(--menu-color);
}
#nav-content > ul > li > a.hidden {
  color: var(--menu-color-hidden);
}
#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .5;
}
#nav-input:not(:checked) ~ #nav-content {
  transition: none;
}
#nav-input:checked ~ #nav-content {
  transition: .2s ease-in-out;
  transform: translateX(0%);
  box-shadow: 24px 0 24px rgba(0,0,0,.15);
}
@media screen and ( max-width: 735px ) {  /* スマホ縦の場合 */
  #nav-content {
    transform: translateX(-105%);
  }
  #wrap {
    padding-top: 40px;
    margin-left: 0;
  }
}
@media screen and ( min-width: 736px ) {  /* スマホ横以上の場合 */
  #nav-open {
    display: none;
  }
  #nav-content {
    z-index: 0;
    transform: translateX(0%);
  }
  #wrap {
    padding-top: 40px;
    margin-left: var(--menu-width);
  }
}


/* 共通 */
section {
  border: 1px var(--section-bordercolor) solid;
  background: var(--section-bgcolor);
  margin: 16px 0;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
@media screen and ( max-width: 735px ) {  /* スマホ縦の場合 */
  main {
    padding: 16px 8px;
  }
  section {
    padding: 8px;
  }
}
@media screen and ( min-width: 736px ) {  /* スマホ横以上の場合 */
  main {
    padding: 24px;
  }
  section {
    padding: 16px;
  }
}

h1 {
  color: var(--h1-color);
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 16px;
}
h2 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px var(--section-bordercolor) solid;
}
h3 {
  color: var(--h3-color);
  background: var(--h3-bgcolor);
  font-size: 16px;
  font-weight: normal;
  margin: 16px 0;
  padding: 8px;
}

table {
  width: 100%;
  text-align:center;
  border: 1px var(--table-bordercolor) solid;
  border-collapse: collapse;
  margin-bottom: 8px;
}
th {
  border: 1px var(--table-bordercolor) solid;
  background: var(--table-thbgcolor);
  color: var(--table-thcolor);
  font-weight: normal;
  padding: 6px 4px;
}
td {
  border: 1px var(--table-bordercolor) solid;
  padding: 8px 4px;
}
table.link tr {
  cursor: pointer;
}
table.link tr:hover {
  background: var(--table-hovercolor);
}
table .nowrap {
  white-space: nowrap;
}

label {
  color: var(--form-label-color);
  font-weight: bold;
  white-space: nowrap;
  margin-right: 8px;
  margin-bottom: 4px;
}
input, select, textarea {
  font-family: sans-serif;
  background: var(--form-bgcolor);
  color: var(--form-color);
  font-size: 14px;
  border: 2px var(--form-bordercolor) solid;
  padding: 4px;
  margin-bottom: 16px;
}
textarea {
  width: 100%;
}
input::placeholder,
textarea::placeholder {
  color: var(--form-placeholdercolor);
}
.fiw_kno { width: 96px; }
.fiw_name { width: 112px; }
.fiw_sex { width: 48px; }
.fiw_date { width: 112px; }
.fiw_datetime { width: 160px; }
.fiw_searchword { width: 160px; }
.fiw_zip { width: 112px; }
.fiw_tel { width: 160px; }
.fiw_col3 { width: 64px; }
.fiw_max { width: 100%; }
input:disabled {
  border: none;
}
input[type=radio],
input[type=checkbox] {
  display: none;
}
.radio,
.checkbox {
  padding-top: 6px;
  display: block!important;
}
.radio > label,
.checkbox > label {
  display: inline-block;
  font-weight: normal;
  color: var(--base-color);
  cursor: pointer;
  margin-top: 1px;
  margin-bottom: 8px;
}
.radio > label:last-child,
.checkbox > label:last-child {
  margin-bottom: 16px;
}
input[type=radio] + label,
input[type=checkbox] + label {
  padding-left: 16px;
  position:relative;
}
input[type=radio] + label::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  top: -1px;
  left: 0;
  width: 16px;
  height: 16px;
  border: 2px var(--form-bordercolor) solid;
  border-radius: 50%;
}
input[type=radio]:checked + label {
  color: var(--form-checkedcolor);
}
input[type=radio]:checked + label::after{
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  top: 3px;
  left: 4px;
  width: 8px;
  height: 8px;
  background: var(--form-checkedcolor);
  border-radius: 50%;
}
input[type=radio].nodata:checked + label {
  color: var(--form-nodatacolor);
}
input[type=radio].nodata:checked + label::after{
  background: var(--form-nodatacolor);
}
input[type=checkbox] + label::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  top: -1px;
  left: 0;
  width: 16px;
  height: 16px;
  border: 2px var(--form-bordercolor) solid;
  border-radius: 30%;
}
input[type=checkbox]:checked + label {
  color: var(--form-checkedcolor);
}
input[type=checkbox]:checked + label::after{
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  top: -2px;
  left: 6px;
  width: 6px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid var(--form-checkedcolor);
  border-right: 3px solid var(--form-checkedcolor);
}
button {
  font-family: sans-serif;
  background: var(--form-submit1-bgcolor);
  color: var(--form-submit1-color);
  font-size: 14px;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
}
@media screen and ( max-width: 735px ) {  /* スマホ縦の場合 */
  form div.flex {
    display: flex;
    align-items: baseline;
  }
  label {
    display: block;
  }
  form .r-spc {
    margin-right: 12px;
  }
}
@media screen and ( min-width: 736px ) {  /* スマホ横以上の場合 */
  form div:not(.flex-large) {
    display: flex;
    align-items: baseline;
  }
  @media screen and ( min-width: 960px ) {  /* タブレット横以上の場合 */
    form div.flex-large {
      display: flex;
      align-items: baseline;
    }
  }
  form .r-spc {
    margin-right: 16px;
  }
  form .r-spc2 {
    margin-right: 32px;
  }
}

.contents {
  padding: 8px 4px 16px;
}
.contents p {
  padding-bottom: 8px;
}
.contents p:last-child {
  padding-bottom: 0;
}

.unit {
  font-size: 12px;
}


/* 共通モーダルウィンドウ */
#mw {
  display: none;
}
.mwcheclist dt {
  color: var(--form-label-color);
  font-weight: bold;
  margin-bottom: 4px;
}
.mwcheclist dd {
  margin-bottom: 16px;
}
.mwbtn {
  margin-top: 24px;
  text-align: center;
}
.mwbtn p {
  padding: 8px 0 16px;
}
.mwbtn .mw_ok {
  margin: 0 8px;
}
.mwbtn .mw_cancel {
  background: var(--form-submit2-bgcolor);
  color: var(--form-submit2-color);
  margin: 0 8px;
}
.modaal-container {
  width: auto;
}
@media screen and ( max-width: 735px ) {  /* スマホ縦の場合 */
  .btncolumn {
    display: inline-flex;
    flex-direction: column;
  }
  .btncolumn .order1 {
    order: 0;
  }
  .btncolumn .order2 {
    order: 1;
    margin-top: 16px; 
  }
  .btncolumn .order3 {
    order: 2;
    margin-top: 16px; 
  }
  .btncolumn .order4 {
    order: 3;
    margin-top: 16px; 
  }
  .btncolumn .order5 {
    order: 4;
    margin-top: 16px; 
  }
}


/* ログイン */
#login {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and ( max-width: 735px ) {  /* スマホ縦の場合 */
  #login{
    flex-direction: column;
  }
  #login .logo {
    width: 100%;
    margin-bottom: 32px;
  }
  #login .form {
    width: 100%;
    text-align: center;
    margin-bottom: 32px;
  }
}
@media screen and ( min-width: 736px ) {  /* スマホ横以上の場合 */
  #login{
    flex-direction: row;
  }
  #login .logo {
    width: 360px;
  }
  #login .form {
    width: 360px;
    text-align: center;
  }
}

#login img {
  max-width: 100%;
}
#login p{
  margin-bottom: 16px;
}
#login input {
  width: 50%;
}
#login button {
  width: 50%;
  margin-top: 16px;
}


/* ダッシュボード */
@media screen and ( max-width: 735px ) {  /* スマホ縦の場合 */
  #dashboard .incomplete .colspc {
    padding: 4px 4px;
  }
}
@media screen and ( min-width: 736px ) {  /* スマホ横以上の場合 */
  #dashboard .incomplete .datetime > br {
    display: none;
  }
}


/* 来店予約状況 */
@media screen and ( max-width: 735px ) {  /* スマホ縦の場合 */
  #reserve .colspc {
    padding: 4px 4px;
  }
}
@media screen and ( min-width: 736px ) {  /* スマホ横以上の場合 */
  #reserve .datetime > br {
    display: none;
  }
}


/* カルテ(問診票)  */
#form-karte-add .mwbtn {
  margin-top: 0;
}
@media screen and ( max-width: 959px ) {  /* タブレット縦以下の場合 */
  #form-karte-add .mwbtn {
    margin: 0;
  }
  #form-karte-add .mw-open {
    margin: 0 auto;
  }
}
@media screen and ( min-width: 960px ) {  /* タブレット横以上の場合 */
  #form-karte-add input,
  #form-karte-add select {
    margin-bottom: 0;
  }  
}

/* カルテ(問診票)内容の修正 */
#karte-edit .experience_yes {
  display: none;
}
@media screen and ( min-width: 736px ) {  /* スマホ横以上の場合 */
  #karte-edit br.nosmp {
    display: none;
  }
}






/* ゲスト情報 */
@media screen and ( max-width: 735px ) {  /* スマホ縦の場合 */
  #guest table .sub {
    font-size: 12px;
  }
}
#ajax-guest-detail td {
  padding-left: 16px;
  padding-right: 16px;
}

/* ゲスト情報の修正 */
#form-guest-edit .caption {
  color: var(--form-label-color);
  margin-top: 8px;
}
@media screen and ( max-width: 735px ) {  /* スマホ縦の場合 */
  #form-guest-edit .caption {
    text-align: center;
  }
}
@media screen and ( min-width: 736px ) {  /* スマホ横以上の場合 */
  #form-guest-edit .caption br {
    display: none;
  }
}


/* アンバサダー・関係者 */
#form-intro-new + .mwbtn {
  margin-top: 0;
}