#staffdetail{padding: 10rem 1rem 0 1rem; margin-bottom: 8rem; background: linear-gradient(25deg, #fff 0%, #fff 50%, #fbcada 50%, #fdf1f5 100%);position: relative;overflow: hidden;}
#staffdetail h2{color:#f69 !important;}
#staffdetail h2 span::before, #staffdetail h2 span::after{background-color:#f69;}
#staffdetail .discri{border-top: 30px solid #f69;}
#staffdetail .discri p{ color: #fff;}

#staffdetail h3{color: #333;position: relative; font-size: 18px; padding: 10px 0px 10px 15px;font-weight: bold;margin-bottom: 10px; border-bottom: solid 1px #f69;}
#staffdetail h3::before {
    position: absolute;
    content: "";
    display: inline-block;
    height: 25px;
    width: 5px;
    background: #f69;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
#staffdetail #photoarea{-moz-box-shadow: 0 0 3px 3px #eee;box-shadow:0 0 3px 3px #eee; padding: 10px;border-radius: 3px;-moz-border-radius: 3px;-ms-border-radius: 3px; margin-bottom: 20px; width: 100%; background: #fff; box-sizing: border-box;}
#staffdetail #profarea{-moz-box-shadow: 0 0 3px 3px #eee;box-shadow:0 0 3px 3px #eee; padding: 10px;border-radius: 3px;-moz-border-radius: 3px;-ms-border-radius: 3px; margin-bottom: 20px; background: #fff; box-sizing: border-box;}

#photoarea{background: #000; padding:2rem 0px;}
#photoarea .slick-slide:not(.slick-current) {opacity: 0.2; transition: 0.5s linear;}
#photoarea .slick-prev {left: 25%;}
#photoarea .slick-next {right: 25%;}
#photoarea .slick-slide img {
  max-width: 100%; max-height:400px;
}
#photoarea .slick-prev,#photoarea .slick-next{z-index: 100; width: 30px; height: 30px;}
#photoarea .slick-prev::before,#photoarea .slick-next::before{font-size: 30px; color: #666;}

#profarea .btns{text-align: center; margin-bottom: 10px; width: 25%; margin: 0 auto 30px;}
#profarea .btns a{background: #008CBA;transition:all .5s ease; color: #fff; border-radius: 5px; box-sizing: border-box; padding: 1rem 2rem; text-align: center; display: block; margin: 0 auto;}
#profarea .btns button {
  background-color: #008CBA;transition:all .5s ease;
  border: none; border-radius: 5px;
  color: #fff;
  padding: 1rem 3rem; box-sizing: border-box; margin: 0 auto; width: 50%;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px; cursor: pointer;
}
#profarea .btns a:hover,.btns button:hover{background-color: #033242;}

#staffdetail .section{display: flex; padding: 0 10px 0 10px; box-sizing: border-box; flex-direction: column;}
#profarea .inner{display: flex;}
#profarea .rate{color: #ffd100; font-size: 20px;}
#profarea .hd-flex{display: flex;}

.namearea{padding: 20px; box-sizing: border-box; margin-bottom: 10px; width: 50%;}
.namearea h3{border-bottom: none !important; padding-bottom: 0 !important; padding-top: 0 !important; margin-bottom: 0 !important;}
.namearea .in-flex{display: flex; align-items: center; border-bottom: solid 1px #f69; padding-bottom: 10px; box-sizing: border-box; margin-bottom: 10px;}
.namearea .in-flex p{margin-left: auto; text-align: right;}
.namearea .d-flex{display: flex;}
.namearea .box-l p{margin-bottom: 5px;}
.namearea .box-l p:last-child{margin-bottom: 0;}

.namearea .btns{width: 75% !important; margin-top: 20px !important;}
.namearea .btns a{background: #e17075 !important;}
.namearea .btns a:hover{background: #ee565e !important;}

.namearea .snsbtn{width: 64px; margin: 0 auto;}
.namearea .snsbtn img{width: 100%;}
.namearea .snsbtn a{display: block; line-height: 0;}

.namearea .box-r{margin-left: auto; text-align: right; background: #fff; padding: 10px; box-sizing: border-box; width: 50%;}
.namearea .box-r a{background: #008CBA;transition:all .5s ease; color: #fff; border-radius: 5px; box-sizing: border-box; padding: 10px 20px; text-align: center; display: block;}
.namearea .box-r a:hover{background-color: #033242;}
.namearea .rate{margin:0 5px;}

 .likeButton__icon {
 display: inline-block;
 fill: currentColor;
 width: 0.8em;
 height: 0.8em;
 margin-right: 0.2em;
 }
/*モーダルを開くボタン*/
.modal-open{
  background-color: #008CBA;transition:all .5s ease; width: 100%;
  border: none; border-radius: 5px;
  color: #fff;
  padding: 1rem 3rem; box-sizing: border-box; margin: 0 auto;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px; cursor: pointer;
}
.modal-open:hover{background-color: #033242;}

.modal-open.liked{background-color: #f69;}
.modal-open.liked:hover{background-color: #6b1b36;}

/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0,0,0,50%);
  padding: 40px 20px;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  box-sizing: border-box;
}
/*モーダル本体の擬似要素の指定*/
.modal-container:before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active{
  opacity: 1;
  visibility: visible;
}
/*モーダル枠の指定*/
.modal-body{
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 500px;
  width: 90%;
}
/*モーダルを閉じるボタンの指定*/
.modal-close{
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
background: #f69; color: #fff; padding: 10px 20px; box-sizing: border-box;
border: none; width: 50%;
}
.modal-close.type2{background: #eee; color: #333;}
/*モーダル内のコンテンツの指定*/
.modal-content{
  background: #fff;
  text-align: center;
  padding: 30px;
}
.modal-content .d-flex{margin-top: 10px;}

.profile{background: #fff; padding: 20px; box-sizing: border-box; width: 100%; margin-bottom: 10px; flex: 1;}
.comment{height: 280px; overflow-y: scroll; padding: 15px; background: #fff; border: solid 1px #ccc; border-radius: 10px; font-size: 16px; line-height: 24px;}
.tx01{color:#fff; background-color: #f77474; padding: 5px; font-size:14px; margin-bottom: 5px;border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;}

.price{padding:0 20px; box-sizing: border-box; width: 100%;}
.price dl{display: flex; flex-wrap: wrap; margin-bottom: 10px;}
.price dt,.price dd{padding: 10px; text-align: left; border: solid 1px #ccc; box-sizing: border-box;margin-top: -1px;}
.price dt{width: calc(25% + 1px);margin-left: -1px; background: #fcebda; color: #333; font-weight: bold;}
.price dd{width: calc(25% + 1px);margin-left: -1px; background: #fff;}
.price .prcomment{height: 150px; overflow-y: scroll; padding: 15px; background: #fff; border: solid 1px #ccc; border-radius: 10px; font-size: 16px; line-height: 24px;}

.schedule{background: #fff; padding:20px 20px; box-sizing: border-box; flex: 1;}
.schedule dl{display: flex; flex-wrap: wrap;}
.schedule dt,.schedule dd{padding: 10px; text-align: left; border: solid 1px #ccc; box-sizing: border-box;margin-top: -1px;}
.schedule dt{width: calc(40% + 1px);margin-left: -1px; background: #fcebda; color: #333; font-weight: bold;}
.schedule dd{width: calc(60% + 1px);margin-left: -1px; background: #fff;}
.schedule .rebtns{text-align: center; margin-left: 10px;}
.schedule .rebtns a{background: #e17075;transition:all .5s ease; color: #fff; border-radius: 5px; box-sizing: border-box; padding: .5rem 2rem; text-align: center; display: inline-block; margin: 0 auto;}
.schedule .rebtns a:hover{background-color: #ee565e;}

.review{background: #eee; padding: 20px; box-sizing: border-box; width: 100%; margin-bottom: 10px;}
.review .box{background: #fff; border: solid 1px #ccc; border-radius: 10px; padding: 15px;box-shadow:2px 2px 3px 0px #ccc; margin-bottom: 10px;word-wrap:break-word;}
.review .box span{margin-left: 5px;}
.review .rvbox{padding: 5px 0; box-sizing: border-box;}
.review ul.rvpost{display: flex; flex-wrap: wrap;}
.review ul.rvpost li{width: 50%; padding: 10px; box-sizing: border-box;}

.play{clear: both; margin:0 auto 20px auto;border-radius: 3px;-moz-border-radius: 3px;-ms-border-radius: 3px;}
.play table{border-collapse: collapse; width: 100%;}
.play table th,.play table td{border: solid 1px #666;padding: 5px;}
.play table th{font-weight: normal; background-color: #eee; width: 30%; text-align: left;}
.play table td{background: #fff;text-align: center;}

.twbox{padding: 10px; margin-right: 10px; width: 50%;}
.twbox .box{padding: 10px; background: #eee;}

.blogbox{padding: 10px; flex: 1;}
.blogbox .box{padding: 10px; background: #eee;}
.blogbox .box iframe{height: 500px; border: 0; width: 100%;}

video{margin-bottom: 0px;}

.pager{margin: 50px 0 0; font-size: 14px;}
.pager ul.pagination {text-align: center;margin: 0;padding: 0;}
.pager .pagination li {display: inline;margin: 0 2px;padding: 0;display: inline-block;background:#666;width: 50px;height: 50px;text-align: center;position: relative;}
.pager .pagination li a{vertical-align: middle;position: absolute;top: 0;left: 0;width: 100%;height: 100%;text-align: center;display:table;color: #fff;text-decoration: none; transition: all  0.3s ease;}
.pager .pagination li a span{display:table-cell;vertical-align:middle;}
.pager .pagination li a:hover,.pager .pagination li a.active{color: #fff;background: #f69;}

@media only screen and (max-width: 480px){
.pager .pagination li{display: none;}
.pager .pagination li.pre,.pager .pagination li.next{display: inline-block;width: 40%;height: 50px;text-align: center;}
.pager .pagination li.pre a,.pager .pagination li.next a{width: 100%;text-align: center;}
.pager .pagination li.pre span::after{content: "　前の10件へ";}
.pager .pagination li.next span::before{content: "次の10件へ　";}
}

.wblock{background: #fff; padding: 2rem;box-shadow:0 0 3px 3px #eee; box-sizing: border-box; border-radius: 10px; margin-bottom: 3rem;}

.progressbar {
  display: flex;
  flex-wrap: wrap; margin-bottom: 4rem;
}
.progressbar p{color: #900; width: 100%; text-align: center;}
.progressbar .item {
    position: relative;
    width: 25%;
    text-align: center;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 13px 0;
    line-height: 1.5;
    background: #F5F5F5;
    color: #999999; letter-spacing: 0; margin-bottom: 1rem;
}
.progressbar .item:not(:last-child)::before,
.progressbar .item:not(:last-child)::after {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 100%;
    content: '';
    border: 37px solid transparent;
    border-left: 20px solid #F5F5F5;
    margin: auto;
}
.progressbar .item:not(:last-child)::before {
    margin-left: 1px;
    border-left-color: #FFF;
}

@media screen and (max-width: 767px) {
.progressbar .item {
    font-size: 11px;
    line-height: 1.4;
    padding: 10px 0;
}
.progressbar .item:not(:last-child)::before,
.progressbar .item:not(:last-child)::after {
    border-width: 25px;
    border-left-width: 12px;
}
}

.progressbar .item.active {
    z-index: 1;
    background: #0070BD;
    color: #FFF; overflow: inherit;
}
.progressbar .item.active:not(:last-child)::after {
    border-left-color: #0070bd;
}
.progressbar .item.active:not(:last-child)::before {
    border-left: none;
}

.wblock .inner{display: flex;}
.wblock .fw-bold{font-weight: bold;}
.wblock .rate{color: #ffd100; font-size: 20px;}
.wblock .hd-flex{display: flex;}
.wblock .d-flex{display: flex;}
.wblock .topblock{width: 50%; display: flex; flex-wrap: wrap; margin-right: 2rem;}
.wblock .namearea{padding: 20px; box-sizing: border-box; margin-bottom: 10px; flex:1;}
.wblock .btns{text-align: center;}
.wblock .btns a{background: #e17075;transition:all .5s ease; color: #fff; border-radius: 5px; box-sizing: border-box; padding: .5rem 2rem; text-align: center; display: inline-block; margin: 0 auto;}
.wblock .btns a:hover{background-color: #ee565e;}
.wblock .prcomment{padding: 15px; clear: both; color: #900; background: #fff; border: solid 1px #ccc; border-radius: 10px; font-size: 16px; line-height: 30px; margin-bottom: 2rem;}

.radphoto{width: 120px; height: 120px; overflow: hidden;border-radius: 50%;}
.radphoto img {width: 100%; height: 100%; object-fit: cover;}

.rtable{font-size: 12px;}
.rtable th,.rtable td{border: solid 1px #ccc; border-collapse: collapse; text-align: center;padding: 1rem 0 1rem 0rem !important; line-height: 1; font-weight: normal;}
.rtable th span{display: block;}
.rtable .sat{color: #2424e1;}
.rtable .sun{color: #f70e0e;}
.rtable thead th{width: 11.5%;}
.rtable thead th.times{width: 19.5%;}
.rtable tbody th{font-size: 16px;}
.rtable tbody .accept{background-color: #17a817; color: #fff; padding:0 !important;}
.rtable tbody .work{background-color: #ff3399;}
.rtable tbody .not-work{background-color: #333;}
.rtable tbody .schedule-off{background-color: #aaa;}
.rtable tbody td{font-size: 20px;-webkit-font-smoothing: auto;}
.rtable tbody td a{color: #fff; text-decoration: underline; display: block; padding:1rem 0 !important;}

.rtable2{font-size: 12px;}
.rtable2 th,.rtable2 td{border: solid 1px #ccc; border-collapse: collapse; text-align: center;padding: 1rem 0 1rem 0rem !important; line-height: 1; font-weight: normal;}
.rtable2 th span{display: block;}
.rtable2 .sat{color: #2424e1;}
.rtable2 .sun{color: #f70e0e;}
.rtable2 thead th{width: 11.5%;}
.rtable2 tbody .accept{background-color: #17a817; color: #fff;}
.rtable2 tbody td{-webkit-font-smoothing: auto;}
.rtable2 tbody td a{color: #fff; text-decoration: underline; display: block;}

.rtable3{font-size: 12px; flex: 1; margin-right: 2rem;}
.rtable3 th,.rtable3 td{border: solid 1px #ccc; border-collapse: collapse; text-align: center;padding: 1rem 0 1rem 0rem !important; line-height: 1; font-weight: normal;}
.rtable3 th span{display: block;}
.rtable3 .sat{color: #2424e1;}
.rtable3 .sun{color: #f70e0e;}
.rtable3 thead th{width: 11.5%;}
.rtable3 thead th.times{width: 19.5%;}
.rtable3 tbody th{font-size: 16px;}
.rtable3 tbody .accept{background-color: #17a817; color: #fff;}
.rtable3 tbody td{font-size: 20px;-webkit-font-smoothing: auto;}
.rtable3 tbody td a{color: #fff; text-decoration: underline; display: block;}

.schedule2{background: #fff; box-sizing: border-box; width: 100%;}
.schedule2 dl{display: flex; flex-wrap: wrap;}
.schedule2 dt,.schedule2 dd{padding: 10px; text-align: left; border: solid 1px #ccc; box-sizing: border-box;margin-top: -1px;}
.schedule2 dt{width: calc(30% + 1px);margin-left: -1px; background: #fcebda; color: #333; font-weight: bold;}
.schedule2 dd{width: calc(70% + 1px);margin-left: -1px; background: #fff; display: flex; align-items: center; flex-wrap: wrap;}
.schedule2 dd span{margin-left: auto;}
.schedule2 dd p{width: 100%;}

.price2{box-sizing: border-box; width: 100%; margin-bottom: 3rem;}
.price2 .form-select{width: 100%; margin-bottom: 1rem;}
.price2 dl{display: flex; flex-wrap: wrap; margin-bottom: 10px;}
.price2 dt,.price2 dd{padding: 10px; text-align: left; border: solid 1px #ccc; box-sizing: border-box;margin-top: -1px;}
.price2 dt{width: calc(25% + 1px);margin-left: -1px; background: #fcebda; color: #333; font-weight: bold;}
.price2 dd{width: calc(75% + 1px);margin-left: -1px; background: #fff; display: flex; align-items: center;}
.price2 dd span{margin-left: auto;}

.area{box-sizing: border-box; width: 100%; margin-bottom: 3rem;}
.area .btns{width: 40%; margin: 2rem auto;}
.area .btns a{display: block;}
.area dl {display: flex; margin-bottom: 1rem;}
.area dt,.area dd{padding: 10px 10px 10px 20px; box-sizing: border-box;}
.area dt {width: 35%;background-color: #f1f1f1;border-bottom: 1px solid #ccc;display: flex; align-items: center;}
.area dd {flex: 1;background-color: #fff;border-bottom: 1px solid #ccc;}
.area textarea{height: 250px;}
.area dt span,.area dd span{color: #900; font-size: 14px;}
.area .form-select{margin-right: 1rem;}
.area dd p{color: #900;}

.confirm{box-sizing: border-box; width: 100%; margin-bottom: 3rem;}
.confirm dl {display: flex; margin-bottom: 1rem;}
.confirm dt,.confirm dd{padding: 10px 10px 10px 20px; box-sizing: border-box;}
.confirm dt {width: 35%;background-color: #f1f1f1;border-bottom: 1px solid #ccc;display: flex; align-items: center;}
.confirm dd {flex: 1;background-color: #fff;border-bottom: 1px solid #ccc;}
.confirm textarea{height: 250px;}
.confirm dt span{color: #900; font-size: 14px;}
.confirm dd span{color: #900; font-size: 16px; display: block;}
.confirm .form-select{margin-right: 1rem;}



.btnblock{background: #fff; padding: 2rem;box-shadow:0 0 3px 3px #eee; box-sizing: border-box; border-radius: 10px; margin-bottom: 3rem;}
.btnblock .btns{text-align: center; width: 50%; margin: 0 auto 3rem;}
.btnblock .btns a{background: #008CBA;transition:all .5s ease; color: #fff; border-radius: 5px; box-sizing: border-box; padding: 1rem 2rem; text-align: center; display: block; margin: 0 auto;}
.btnblock .btns button {
  background-color: #008CBA;transition:all .5s ease;
  border: none; border-radius: 5px;
  color: #fff;
  padding: 1rem 3rem; box-sizing: border-box; margin: 0 auto; width: 50%;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px; cursor: pointer;
}
.btnblock .btns a:hover,.btns button:hover{background-color: #033242;}

.btnblock .backbtn{text-align: center;}
.btnblock .backbtn a{background: #e17075;transition:all .5s ease; color: #fff; border-radius: 5px; box-sizing: border-box; padding: .5rem 2rem; text-align: center; display: block; margin: 0 auto; width: 50%;}
.btnblock .backbtn a:hover{background-color: #ee565e;}

.hissu{border: 1px solid #fff; padding: 5px 10px; border-radius: 5px; color: #fff !important;box-sizing: border-box; text-align: center; background-color: #900; margin-right: 10px;}