@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500);
#contents #footer .inner>.user-menu{padding:0 16px 10px;width:100%}
#contents #footer .inner>.user-menu>.title{float:left;color:#666;font-size:12px}
#contents #footer .inner>.user-menu>.user{float:right;font-weight:700;text-align:right;word-break:break-all}
#contents .article>.title>span,.contents-title>span{display:inline-block;padding-bottom:2px;border-bottom:3px solid #23b8c5;font-weight:700}
body.color-type-01 #contents .article>.title>span,body.color-type-01 #contents .contents-title>span{border-bottom:3px solid #cc2495;font-weight: bold;}
body.color-type-02 #contents .article>.title>span,body.color-type-02 #contents .contents-title>span{border-bottom:3px solid #a0c81f;font-weight: bold;}
body.color-type-03 #contents .article>.title>span,body.color-type-03 #contents .contents-title>span{border-bottom:3px solid #bd9a22;font-weight: bold;}
body.color-type-04 #contents .article>.title>span,body.color-type-04 #contents .contents-title>span{border-bottom:3px solid #cc2495;font-weight: bold;}
body.color-type-05 #contents .article>.title>span,body.color-type-05 #contents .contents-title>span{border-bottom:3px solid #ec6d2a;font-weight: bold;}
body.color-type-06 #contents .article>.title>span,body.color-type-06 #contents .contents-title>span,body.color-type-07 #contents .article .title>span,body.color-type-07 #contents .contents-title>span{border-bottom:3px solid #000;font-weight: bold;}
body.color-type-08 #contents .article>.title>span,body.color-type-08 #contents .contents-title>span{border-bottom:3px solid #a36e00;font-weight: bold;}
body.color-type-09 #contents .article>.title>span,body.color-type-09 #contents .contents-title>span{border-bottom:3px solid #8d62db;font-weight: bold;}
#footer .inner>.user-menu{padding:0 16px 10px;width:100%}
#footer .inner>.user-menu>.title{float:left;color:#666;font-size:12px}
#footer .inner>.user-menu>.user{float:right;font-weight:700;text-align:right;word-break:break-all}
#contents .page-nav>a.arrow-prev{padding-left:24px;float:left;}
#appointment .foot ul li a.arrow-prev,#appointment .head ul li a.arrow-prev,{padding-right:16px}
#contents .page-nav>a.arrow-prev:before{content:"";display:inline-block;position:absolute;left:0;top:50%;width:24px;font-size:18px;text-align:center;line-height:24px;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%)}
.information_url{
  font-size:14px;
  position:relative;
  padding-left: 20px;
  top:2px;
  left:8px;
}
.info_area {
  position: relative;
  display: inline-block;
  border: 2px solid #23b8c5;
  border-radius: 4px;
  padding: 5px 20px 10px 0;
  width: 100%;
  cursor: pointer;
}
.info_date {
  position: relative;
  padding: 3px 20px;
  border-right: 2px solid #23b8c5;
  top:2px;
  left:8px;
}
.info_tab {
  font-size:12px;
  position :relative;
  padding: 5px 10px;
  background-color: #23b8c5;
  color: #ffffff;
  top: 2px;
  left: 24px;
  border-radius: 4px;
}
.info_date::before {
  position: absolute;
  top: 3px;
  left: 0;
  display: block;
  content: "";
  width: 15px;
  height: 15px;
  background: url('/images/info1.png') center/contain no-repeat;
  border-bottom: none!important;
}
.arrow-right {
  position: absolute;
  border-top: solid 2px #23b8c5;
  border-right: solid 2px #23b8c5;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  top: 40%;
  right: 2%;
}
.color-type-01.information_url{color:#cc2495;}
.color-type-02.information_url{color:#a0c81f;}
.color-type-03.information_url{color:#bd9a22;}
.color-type-04.information_url{color:#cc2495;}
.color-type-05.information_url{color:#ec6d2a;}
.color-type-06.information_url,.color-type-07.information_url{color:#000;}
.color-type-08.information_url{color:#a36e00;}
.color-type-09.information_url{color:#8d62db;}
.color-type-01 .info_area,.color-type-01 .info_date,.color-type-01 .arrow-right{border-color: #cc2495;}
.color-type-02 .info_area,.color-type-02 .info_date,.color-type-02 .arrow-right{border-color: #a0c81f;}
.color-type-03 .info_area,.color-type-03 .info_date,.color-type-03 .arrow-right{border-color: #bd9a22;}
.color-type-04 .info_area,.color-type-04 .info_date,.color-type-04 .arrow-right{border-color: #cc2495;}
.color-type-05 .info_area,.color-type-05 .info_date,.color-type-05 .arrow-right{border-color: #ec6d2a;}
.color-type-06 .info_area,.color-type-07 .info_area,
.color-type-06 .info_date,.color-type-07 .info_date,.color-type-06 .arrow-right,.color-type-07 .arrow-right{border-color: #000;}
.color-type-08 .info_area,.color-type-08 .info_date,.color-type-08 .arrow-right{border-color: #a36e00;}
.color-type-09 .info_area,.color-type-09 .info_date,.color-type-09 .arrow-right{border-color: #8d62db;}
.color-type-01 .info_tab{background-color:#cc2495;}
.color-type-02 .info_tab{background-color:#a0c81f;}
.color-type-03 .info_tab{background-color:#ecc02a;}
.color-type-04 .info_tab{background-color:#ffaff8;}
.color-type-05 .info_tab{background-color:#ec6d2a;}
.color-type-06 .info_tab,.color-type-07 .info_tab{background-color:#000;}
.color-type-08 .info_tab{background-color:#a36e00;}
.color-type-09 .info_tab{background-color:#8d62db;}
.color-type-01 .info_date::before{background: url('/images/info2.png') center/contain no-repeat;}
.color-type-02 .info_date::before{background: url('/images/info3.png') center/contain no-repeat;}
.color-type-03 .info_date::before{background: url('/images/info4.png') center/contain no-repeat;}
.color-type-04 .info_date::before{background: url('/images/info2.png') center/contain no-repeat;}
.color-type-05 .info_date::before{background: url('/images/info5.png') center/contain no-repeat;}
.color-type-06 .info_date::before,.color-type-07 .info_date::before{background: url('/images/info6.png') center/contain no-repeat;}
.color-type-08 .info_date::before{background: url('/images/info7.png') center/contain no-repeat;}
.color-type-09 .info_date::before{background: url('/images/info8.png') center/contain no-repeat;}

.pt_10{
  padding-top:10px;
}

.salon_image {
  display:inline-block !important;
  vertical-align: middle;
}
.salon_name {
  display: inline !important;
  vertical-align: middle;
}

/*最前面に*/
.slick-prev, .slick-next, .foreground {
  z-index: 100;
}

/*スタイリスト名前枠*/
.stylist-name {
  text-align: center;
  font-weight: 700;
  border-bottom: solid 1px #ddd;
  border-left: solid 1px #ddd;
  border-right: solid 1px #ddd;
  margin: 0 5px 0 5px;
}

/*スタイリスト大枠*/
.stylist-thumb {

}
/*スタイリスト写真枠*/
.stylist-pic {
  border-top:solid 1px #ddd;
  border-right:solid 1px #ddd;
  border-left:solid 1px #ddd;
  margin: 5px 5px 0 5px;
  height: 113px;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
/*スタイリスト詳細*/
.more-staff-new {
  border:solid 1px #ddd;
  margin: 10px 5px 5px 5px;
  text-align: center;
  display: inline-block;
  width: 93%;
  color: black !important;
}
/*画像縮尺*/
img {
  max-width: 100%;
  max-height: 100%;
  height: 100vh;
  width: auto\9; /* ie8 */
  margin: 0 auto;
}
.stylist-thumb.checked {background:#91dde3;}
.color-type-01 .stylist-thumb.checked {background:#f1a2d8;}
.color-type-02 .stylist-thumb.checked {background:#d4ee7c;}
.color-type-03 .stylist-thumb.checked {background:#ecdba2;}
.color-type-04 .stylist-thumb.checked {background:#f1a7da;}
.color-type-05 .stylist-thumb.checked {background:#f7bfa1;}
.color-type-06 .stylist-thumb.checked,.color-type-07 .stylist-thumb.checked {background:#b1b0af;}
.color-type-08 .stylist-thumb.checked {background:#f7d188;}
.color-type-09 .stylist-thumb.checked {background:#cdbaed;}


.stylist-thumb .stylist-pic .disabled_checkbox {
  /* チェックボックスの位置は絶対位置にします。 */
  position: absolute;
  /* チェックボックスは、親要素の右上から12pxの位置に配置します。 */
  top: 12px;
  right: 12px;
  /* チェック前は非表示にしておきます。 */
  display: none;
  /* チェックボックスを大きくします。 */
  transform: scale(2);
  /* チェックボックスにカーソルを合わせたときに、
  カーソルが指のマークになるようにします。 */
  cursor: pointer;
}
/*デフォで設定された枠線を消す*/
.slick-slide {
  outline:none;
}

#header .inner {
  display: flex;
}

#header .inner h1.title {
  display: flex;
  width: 100%;
  flex-direction: column;
}

#header .inner h1.title.fix {
  display: block;
}

/* ヘッダーにユーザー名が入る場合 */
#header .inner>.title.in_user {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

#header .inner>.title.in_user .user_info {
  display: inline-block;
  flex-direction: column;
  text-align: center;
}

.salon_info {
  display: flex;
  align-items: center;
}
.user_info {
  display: flex;
  flex-direction: column;
  text-align: right;
}

.user_name {
  text-align: center;
  margin-right: 10px;
  color: white;
}

#page-top #contents .asides .box {
  margin-top: -1px;
  padding: 22px 24px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
}

#page-top #contents .asides .box .navi {
  text-align: center;
}

#contents .asides .box a[class*=btn-] {
  width: 212px;
}

/*モーダルスタイリスト*/
.modal-stylist-pic, .modal-technique-pic {
  height: 200px;
  display: flex;
  align-items: center;
  background: #a9a9a9;
  text-align: center;
}
.modal-stylist-name, .modal-technique-name {
  text-align: center;
  font-weight: 700;
  font-size: 20px;
}
.modal-stylist-type, .modal-technique-time-price {
  text-align: center;
}
.modal-stylist-btn {
  padding: 5px 5px 5px 5px;
  width: 60%;
  border:solid 1.5px #ddd;
  text-align: center;
  margin: 10px auto;
  font-weight: 800 !important;
}
.modal-technique-btn {
  padding: 5px 5px 5px 5px;
  width: 70%;
  border:solid 1.5px #ddd;
  text-align: center;
  margin: 10px auto;
}
.msb, .mtb {
  font-weight: 800 !important;
}

/*ステップ*/
.stepBar {
  display: flex;
  max-width: 400px;
  position: relative;
  margin: 20px auto;
  text-align: center;
}
.stepBar li {
  font-size: 12px;
  list-style: none;
  position: relative;
  width: 33.333%;
}
.stepBar li:after {
  background: #D0E1F9;
  content: "";
  width: calc(100% - 24px);
  height: 4px;
  position: absolute;
  left: calc(-50% + 12px);
  top: 10px;
}
.stepBar li:first-child:after {
  display: none;
}
.stepBar li span {
  background: #D0E1F9;
  color: #ffffff;
  display: inline-block;
  height: 24px;
  margin-bottom: 5px;
  line-height: 24px;
  width: 24px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.stepBar .visited:after {
  background: #4D648D;
}
.stepBar .visited span {
  background: #4D648D;
}

#appointment .foot,#appointment .head ul{margin-top:-1px;padding:50px 0 0 0;background-color:#f5f5f5;border-top:1px solid #ddd;border-bottom:1px solid #ddd}
#appointment .foot ul li,#appointment .head ul li{display:inline-block}
#appointment .foot ul li:first-child,#appointment .head ul li:first-child{float:left}
#appointment .foot ul li:last-child,#appointment .head ul li:last-child{float:right}
#appointment .foot ul li a,#appointment .head ul li a{position:relative;display:inline-block;padding:0 34px;height:36px;font-size:13px;line-height:36px;background-color:#fff;border:1px solid #ddd}
#appointment .foot ul li a.arrow-prev,#appointment .head ul li a.arrow-prev{padding-right:16px}
#appointment .foot ul li a.arrow-prev:before,#appointment .head ul li a.arrow-prev:before{content:"";display:inline-block;position:absolute;left:0;top:50%;width:34px;font-size:20px;text-align:center;line-height:34px;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%)}
#appointment .foot ul li a.arrow-next,#appointment .head ul li a.arrow-next{padding-left:16px}
#appointment .foot ul li a.arrow-next:before,#appointment .head ul li a.arrow-next:before{content:"";display:inline-block;position:absolute;right:0;top:50%;width:34px;font-size:20px;text-align:center;line-height:34px;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%)}
#appointment .table-day{position:relative;margin-top:-1px;border-top:1px solid #ddd;border-bottom:1px solid #ddd}
#appointment .calendar-table .calendar-table-thead{z-index:2;position:relative}
#appointment .table-day{width:100%;background-color:#fff;border-bottom:1px solid #ddd}
#appointment .table-day th:nth-child(1){border-right:1px solid #ddd}
#appointment .table-day th{width: 12.5%; padding:12px 0;line-height:1.2;font-weight:700;text-align:center;border-left:1px solid #ddd;border-right:1px solid #ddd;}
#appointment .table-day th span{font-size:10px;font-weight:400}
#appointment .table-day th.saturday{color:#529fc5}
#appointment .table-day th.sunday{color:#c54344}
#appointment .calendar-table .calendar-table-tbody{z-index:0;position:relative}
#appointment .calendar-table .calendar-table-tbody table{width:100%;background-color:#f5f5f5; border-bottom: 1px solid #ddd;}
#appointment .calendar-table .calendar-table-tbody table tr:not(:first-child){border-top:1px solid #ddd}
#appointment .calendar-table .calendar-table-tbody table tr:not(:first-child):nth-child(even){border-top:1px dotted #ddd}
#appointment .calendar-table .calendar-table-tbody table th{padding:0 8px 0 0;font-size:12px;text-align:right;background-color:#fff;border-right:1px solid #ddd;border-left:1px solid #ddd;width:12.5%}
#appointment .calendar-table .calendar-table-tbody table td{padding:0;height:44px;border-left:1px solid #ddd;width:12.5%}
#appointment .calendar-table .calendar-table-tbody table .col-th,#appointment .calendar-table .calendar-table-thead table .col-th{width:47px}
#appointment .calendar-table .calendar-table-tbody table .col-td,#appointment .calendar-table .calendar-table-thead table .col-td{width:38px}
#appointment input[type=radio]+label{position:relative;display:inline-block;width:100%;height:36px;padding:0;cursor:pointer}
#appointment input[type=radio]+label:after,#contents .main #appointment input[type=radio]+label:before{position:absolute;content:'';top:0;border-radius:0;-webkit-transition:all .2s;transition:all .2s;-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
#appointment input[type=radio]+label:before{left:0;width:100%;height:44px;background-color:#fff;border:1px solid #ddd}
#appointment input[type=radio]+label:before{left:0;width:100%;height:44px;background-color:#fff;}
#appointment input[type=radio]+label:hover:before{border-color:#23b8c5}
#appointment input[type=radio]+label:after{content:'○';top:50%;left:50%;margin-top:4px;width:auto;height:auto;color:#23b8c5;font-weight:700;border-left:none;border-bottom:none;-webkit-transform:none;-ms-transform:none;transform:none;border-radius:0;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
#appointment .box-btn a,#page-reserve_top_login #contents .inner>.aside,#page-reserve_top_login #contents .inner>.main{width:100%}
#appointment input[type=radio]+label.disabled{color:#ccc!important;cursor:default}
#appointment input[type=radio]+label.disabled:after{content:'×';top:50%;left:50%;color:#999!important;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
#appointment input[type=radio]+label.disabled:before{background-color:#f5f5f5;border-color:#ddd!important}
#appointment input[type=radio]:checked+label:before{background-color:#23b8c5;border:1px solid #23b8c5}
#appointment input[type=radio]:checked+label:after{opacity:1;color:#fff!important}
#appointment .box-btn{margin-top:24px;padding:0 16px}
@media screen and (max-width: 480px) {
  .more-staff-new {
    width: 89%;
  }
}
@media screen and (max-width: 639px) {
  /*スタイリスト名前枠*/
  .stylist-name {
    font-size: 13px;
  }
  /*矢印の位置内側へ*/
  .slick-prev {
    left: 15px !important;
  }
  .slick-next {
    right: 15px !important;
  }
  .tbl-style-01 {display: none;}
  #appointment .table-day th:nth-child(1){width: 12.5%;}
}
@media screen and (min-width: 640px) {
  /*矢印*/
  .slick-prev,.slick-next {
    height: 95%;
    width: auto;
    margin: 0;
    background-color: #666 !important;
  }
  .tbl-style-02 {display: none;}
  #appointment .table-day th:nth-child(1){width: 15.5%;}
}
@media screen and (min-width: 640px) and (max-width: 767px) {
  .more-staff-new {
    width: 95%;
  }
}
@media screen and (min-width: 767px) and (max-width: 950px) {
  .more-staff-new {
    width: 91%;
  }
}
@media screen and (min-width: 1100px) {
    /*スタイリスト名前枠*/
  .stylist-name {
    margin: 0 15px 0 15px;
  }

  /*スタイリスト写真枠*/
  .stylist-pic {
    margin: 5px 15px 0 15px;
  }
  /*スタイリスト詳細*/
  .more-staff-new {
    margin: 10px 15px 5px 15px;
  }
  .more-staff-new {
    width: 80.5%;
  }
}
.color-type-01 #contents .main #appointment input[type=radio]+label:hover:before{border-color:#cc2495}
.color-type-01 #contents .main #appointment input[type=radio]+label:after{color:#cc2495}
.color-type-01 #contents .main #appointment input[type=radio]:checked+label:before{background-color:#cc2495;border:1px solid #cc2495}
.color-type-02 #contents .main #appointment input[type=radio]+label:hover:before{border-color:#a0c81f}
.color-type-02 #contents .main #appointment input[type=radio]+label:after{color:#a0c81f}
.color-type-02 #contents .main #appointment input[type=radio]:checked+label:before{background-color:#a0c81f;border:1px solid #a0c81f}
.color-type-03 #contents .main #appointment input[type=radio]+label:hover:before{border-color:#ecc02a}
.color-type-03 #contents .main #appointment input[type=radio]+label:after{color:#ecc02a}
.color-type-03 #contents .main #appointment input[type=radio]:checked+label:before{background-color:#ecc02a;border:1px solid #ecc02a}
.color-type-04 #contents .main #appointment input[type=radio]+label:hover:before{border-color:#cc2495}
.color-type-04 #contents .main #appointment input[type=radio]+label:after{color:#cc2495}
.color-type-04 #contents .main #appointment input[type=radio]:checked+label:before{background-color:#ffaff8;border:1px solid #ffaff8}
.color-type-05 #contents .main #appointment input[type=radio]+label:hover:before{border-color:#ec6d2a}
.color-type-05 #contents .main #appointment input[type=radio]+label:after{color:#ec6d2a}
.color-type-06 #contents .main #appointment input[type=radio]+label:after,.color-type-07 #contents .main #appointment input[type=radio]+label:after{color:#36c}
.color-type-05 #contents .main #appointment input[type=radio]:checked+label:before{background-color:#ec6d2a;border:1px solid #ec6d2a}
.color-type-06 #contents .main #appointment input[type=radio]+label:hover:before{border-color:#36c}
.color-type-06 #contents .main #appointment input[type=radio]:checked+label:before{background-color:#36c;border:1px solid #36c}
.color-type-07 #contents .main #appointment input[type=radio]+label:hover:before{border-color:#36c}
.color-type-07 #contents .main #appointment input[type=radio]:checked+label:before{background-color:#36c;border:1px solid #36c}
.color-type-08 #contents .main #appointment input[type=radio]+label:hover:before{border-color:#a36e00}
.color-type-08 #contents .main #appointment input[type=radio]+label:after{color:#a36e00}
.color-type-08 #contents .main #appointment input[type=radio]:checked+label:before{background-color:#a36e00;border:1px solid #a36e00}
.color-type-09 #contents .main #appointment input[type=radio]+label:hover:before{border-color:#8d62db}
.color-type-09 #contents .main #appointment input[type=radio]+label:after{color:#8d62db}
.color-type-09 #contents .main #appointment input[type=radio]:checked+label:before{background-color:#8d62db;border:1px solid #8d62db}
#contents .aside .box-gray{margin-top:-1px;padding:22px 24px;background-color:#f5f5f5;border-top:1px solid #ddd}
#contents .aside .box-gray dl.status dt{margin-bottom:2px;color:#666;font-size:12px;line-height:1.4}
#contents .aside .box-gray dl.status dd{margin-bottom:12px;line-height:1.6;font-weight:700;word-wrap:break-word}
#contents .aside .box-gray dl.status dd:last-child{margin-bottom:0}
#contents .main .article .desc dl{margin-top:32px;margin-bottom:24px;text-align:center}
#contents .main .article .desc dl dt{font-size:16px;font-weight:700}
#contents .main .article .desc dl dd{color:#666;font-size:12px}
#contents .main .article .desc .photo{margin:24px 32px 16px}
#contents .main .article .desc .photo img{vertical-align:bottom}
#contents .main .article .desc>p{margin:24px 32px}
#footer .inner>.user-menu{padding:0 16px 10px;width:100%}
#footer .inner>.user-menu>.title{float:left;color:#666;font-size:12px}
#footer .inner>.user-menu>.user{float:right;font-weight:700;text-align:right;word-break:break-all}
ul p.baseDateHeader{padding-left:8px;font-size:16px;font-weight:700; padding-bottom:10px;}

.stylist-list-pic {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  background: #a9a9a9;
  text-align: center;
}
.right-side {
  display: table-cell;
  padding: 0 15px;
}
.stylist-list-pic-parent {
  width:70px;
  position: relative;
}
.stylist-glass {
  position: absolute;/*絶対配置*/
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  display: block;
}
.stylist-last-medal {
  position: absolute;/*絶対配置*/
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  display: block;
}

.price-txt {
  display: flex;
  justify-content: flex-end;
  font-size: 12px;
}

.opacity{
  opacity:0.75
}
.opacity:not(:active){
  opacity:1
}

.fixed {
  position:fixed;
  bottom: 0;
  right: 0;
  left: 0;
}

.index-space{
  height: 60px !important;
  line-height: 60px !important;
}

@media screen and (min-width:600px) {
  .index-space {
    line-height: 40px !important;
  }
}

#scrollBtn button {
  position: fixed;
  bottom: 20%;
  right: 0;
  text-align: center;
  font-size: 15px;
  background-color: #23b8c5;
  color: #ffffff;
  padding: 5px;
  right: calc(50% - 550px);
  cursor: pointer;
  width: 212px;
  font-weight: 700;
}
.color-type-01 #scrollBtn button{background-color:#cc2495;}
.color-type-02 #scrollBtn button{background-color:#a0c81f;}
.color-type-03 #scrollBtn button{background-color:#ecc02a;}
.color-type-04 #scrollBtn button{background-color:#ffaff8;}
.color-type-05 #scrollBtn button{background-color:#ec6d2a;}
.color-type-06 #scrollBtn button,.color-type-07 #scrollBtn button{background-color:#000;}
.color-type-08 #scrollBtn button{background-color:#a36e00;}
.color-type-09 #scrollBtn button{background-color:#8d62db;}

@media screen and (max-width:1100px) {
  #scrollBtn button {
    right: 5px;
  }
}