@charset "utf-8";

.breadcrumb-wrap {
  margin-bottom: 0;
}

body {
  background: #fff;
}

#campaign {
  background-color: #fff;
  overflow: hidden;
  font-size: 14px;
}

#campaign p:last-of-type {
  margin-bottom: 0;
}

#campaign h2 {
  font-size: 150%;
}

#campaign h3 {
  font-size: 130%;
}

#campaign hr {
  border: transparent;
}

.flex-jc-center {
  justify-content: center;
}

.bg-color-other {
  background-color: #f9e5de;
}

.sub-font-color {
  color: #d91c25;
}

.bg-color-white {
  background-color: #fff;
}

.bg-color-white.cam-radius {
  background-color: #fff;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.font-big {
  font-size: 130%;
}

.bg-03 {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.font-color-white {
  color: #fff;
}

.font-size-30 {
  font-size: 30px;
}

.max-w,
.step {
  max-width: 720px;
  margin: 0 auto;
}

.w100 {
  width: 100%;
}

small,
.small {
  font-size: 90%;
}

.cam-radius {
  border-radius: 0.5em;
}

.cam-date {
  color: #f67457;
  background-color: #fff;
  padding: 10px 0;
  font-size: 22px;
}

.cam-date dt,
.cam-date dd {
  display: inline-block;
  font-weight: bold;
  color: #f67457;
}

.cam-date dt {
  background-color: #fff;
  color: #623b13;
  line-height: 1;
  border-radius: .2em;
  padding: .2em .5em;
  margin-right: .5em;
  font-weight: bold;
}

.num {
  background-color: #f7ff49;
  color: #333;
  width: 2em;
  min-width: 2em;
  display: inline-block;
  text-align: center;
  height: 2em;
  line-height: 2;
  border-radius: 100%;
  margin-right: .5em;
  border: 1px solid #333;
}

.step {
  margin: 1em auto;
  background-color: #fff;
  padding: 1em;
  border-radius: .5em;
}

.step .panel {
  box-shadow: none;
  border: 1px solid #ddd;
  padding-bottom: 15px !important;
}

.details {
  border: solid thin #ccc;
  background-color: #fff;
  display: flex;
  display: -webkit-flex;
  flex-flow: wrap;
}

.details dt {
  padding: .8em;
  width: 25%;
}

.details dt:not(:first-child),
.details dd:not(:nth-child(2)) {
  border-top: solid thin #ccc;
}

.details dd {
  padding: .8em;
  width: 75%;
}

#campaign ul {
  padding-left: 1.5em;
}

#campaign li:not(:last-child) {
  margin-bottom: .5em;
}

.cam-mark {
  position: relative;
}

.cam-mark::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 0.1em;
  box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 4px #ff6e4d;
}

.not-hover {
  position: relative;
}

.not-hover::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}

#campaign .not-hover li {
  margin-bottom: 0;
}

.sp-float {
  padding: 20px 0;
}

.move {
  transition: .5s ease 0s;
  -moz-transition: .5s ease 0s;
  -webkit-transition: .5s ease 0s;
}

.recommend-salon .label-specialcoupon {
  top: 50px;
}

.menu-card-trycp2208 {
  background: #fff1f7;
  padding: 5px 5px 12px 5px;
  margin: 5px;
  font-size: 1.2rem;
}

.point-reader-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.2;
  height: 2.4em;
  margin-bottom: 2px;
}

.trycp2208-price {
  text-align: right;
  position: relative;
  top: 12px;
  font-weight: bold;
}

.trycp2208-price span {
  font-size: 18px;
  font-weight: bold;
  color: #fd453a;
  display: block;
}

.count-icon-danger {
  position: absolute;
  z-index: 1;
  width: 4.7em;
  height: 4.5em;
  padding-top: 1.2em;
  border-radius: 100%;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  font-size: 11px;
  background-color: #e84a3e;
  color: #fff;
  bottom: 16px;
}

.font-large {
  font-size: 18px;
}

@media (max-width: 767px) {
  .fs15 {
    font-size: 15px;
  }

  .fs14 {
    font-size: 14px;
  }
}

.text-emp {
  color: #ff5814;
  font-size: 120%;
  background: linear-gradient(transparent 70%, #fff600 70%);
}

/*ボタン*/
.btn-app , .btn-cam {
  max-width: 460px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 95vw;
  height: 54px;
  margin: 5px auto 5px auto;
  border-width: 2px;
  border-style: solid;
  border-color: #fff;
  border-radius: 100vh;
  background: linear-gradient(#ff8400, #ff0000);
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  line-height: 0;
  box-shadow: 0 2px 6px 2px rgb(255 96 0 / 20%);
}

.btn-app::before,
.btn-app-gray::before {
  content: '';
  background-image: url('https://pimage1.mitsuraku.jp/img/app/app_icon_200x200.png');
  display: inline-block;
  width: 36px;
  height: 36px;
  margin-right: 7px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.btn-cam:hover,
.btn-cam:active,
.btn-cam:focus,
.btn-app:hover,
.btn-app:active,
.btn-app:focus {
  color: #fff;
  text-decoration: none;
  opacity: 0.8;
}
@media (max-width: 490px) {
  .app-btn-bg02 {
    font-size: 17px;
  }
}
@media (max-width: 420px) {
  .app-btn-bg02 {
    font-size: 16px;
  }
}
@media (max-width: 390px) {
  .app-btn-bg02 {
    font-size: 15px;
  }
}

#campaign .button-fixed .fs-15 {
  font-size: 15px;
}

#campaign .button-fixed .fa-caret-right {
  font-size: 1.5em;
}

#campaign .button-fixed .btn_wrap {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
}

#campaign .button-fixed .btn_wrap .btn-login {
  max-width: 165px;
}

@media (min-width: 768px) {

  #campaign .button-fixed .btn_wrap .btn-login,
  #campaign .btn_wrap.btn_center .btn-login {
    max-width: 220px;
    margin: 10px;
  }

  .fs12 {
    font-size: 14px;
  }
}

@media (max-width: 767px) {

  .button-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 10px);
    padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
    padding-left: 10px;
    background-color: rgb(233 233 233 / 80%);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }

  .button-fixed .btn-cam {
    margin: 0 auto;
    width: 100%;
    padding: 0.8em;
  }

  .btn-app {
    max-width: 340px;
  }
}

/*都道府県*/
.area_list {
  background-color: #feffde;
}

.area_wrap ul a::after,
.btn-area::after {
  background-color: #e62110;
}

/*閲覧履歴*/
.swip-css {
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  text-align: center;
  padding-bottom: .2em;
}

.browsing-history-salon {
  display: inline-block;
  width: 41vw;
  white-space: normal;
  vertical-align: top;
  max-width: 200px;
  text-align: left;
  position: relative;
  margin-top: 20px;
}

.browsing-history-salon+.browsing-history-salon {
  margin-left: 5px;
}

.browsing-history-salon>a {
  color: #333;
  text-decoration: none;
  border: solid thin #ccc;
  border-radius: 4px;
  display: inline-block;
  overflow: hidden;
  width: 100%;
  background-color: #fff;
}

.browsing-history-salon>a:hover {
  color: #333;
  opacity: 0.75;
}

.browsing-history-salon>a>p {
  padding: 0 4px 4px;
  margin: 0;
  font-size: 85%;
}

.icon-explain-wrap .label-today,
.icon-explain-wrap .label-tomorrow {
  background-color: #dc5519;
}

.icon-explain-wrap .label-specialcoupon {
  background-color: #a4996d;
  top: 0;
  left: 0;
  border: solid thin #fff;
}

.icon-explain-wrap {
  padding-bottom: 2px;
  display: flex;
  min-height: 1.6em;
}

.icon-explain-wrap>.label {
  margin: 4px 0 0 4px;
  display: inline-block;
  border-radius: 0;
  font-weight: normal;
  padding: .3em .6em .2em;
}

.p-tooltip-vacancy {
  position: absolute;
  top: -18px;
  left: 0;
  height: 20px;
  padding-right: 8px;
  padding-left: 8px;
  margin-bottom: 10px;
  font-size: 11px;
  line-height: 20px;
  color: #fff;
  background-color: #dc5519;
  border-radius: 20px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

.p-tooltip-vacancy:before {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: 1em;
}

.p-tooltip-vacancy:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -4px;
  border: 4px solid transparent;
  border-top: 4px solid #dc5519;
}

/*カウントダウン*/
.count-down {
  display: none;
  background: #faffb9;
  font-size: 18px;
  text-align: center;
  width: 300px;
  margin: 10px auto;
  border-radius: 100px;
}

.count-down-body {
  display: inline-block;
  margin: 0 -2em;
  padding: .5em 0;
}

.count-down-panel {
  color: #ef0000;
  font-weight: bold;
}

.count-down-info {
  font-size: 14px;
}

@media (min-width: 768px) {
  .count-down {
    width: 450px;
  }

  .count-down-info {
    font-size: 18px;
  }
}

.count-down .day,
.count-down .hour,
.count-down .minute,
.count-down .second {
  position: relative;
  top: .1em;
  padding-left: .2em;
  font-size: 150%;
  line-height: .8;
  font-family: 'Heebo', sans-serif;
}

/*FAQ*/
#faq {
  background-color: #ffdee4;
}

#faq dt,
#faq dd {
  background-color: #fff;
  border-radius: .3em;
  margin-bottom: .4em;
  padding: .8em 2em;
  line-height: 1.4;
  cursor: pointer;
  position: relative;
}

#faq dt::before,
#faq dd::before {
  content: "Q";
  display: inline-block;
  font-weight: bold;
  color: #ff0808;
  position: absolute;
  left: .7em;
}

#faq dt::after {
  content: "\f078";
  font-family: 'FontAwesome';
  display: inline-block;
  position: absolute;
  right: .7em;
  top: 50%;
  margin-top: -.7em;
  font-weight: normal;
  color: #ff0808;
}

#faq dl dt.active::after {
  content: "\f077";
}

#faq dd {
  display: none;
  background-color: #f9f9f9;
  margin: -.8em 0 .4em 0;
}

#faq dd::before {
  content: "A";
  color: #0069eb;
}

.point-reader {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
}

.point-reader-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.2;
  height: 2.3em;
  margin-bottom: 2px !important;
  word-wrap: break-word;
}

.point-reader-2:before {
  font-family: 'FontAwesome';
  content: "\f238";
  margin-right: 3px;
}

.menu-card {
  background: #f1f1f0;
  padding: 4px;
  font-size: 1.2rem;
}

.menu-card .point-reader {
  text-align: center;
  font-weight: bold;
}

.point-reader span {
  font-weight: bold;
  color: #b53f3d;
  font-size: 1.5rem;
}

.recommend-salon .label-specialcoupon {
  top: 50px;
}

#campaign .select_area h2 {
  font-size: 120%;
}

#campaign .select_area h2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

#campaign .select_area h2:before,
#campaign .select_area h2:after {
  border-top: 1px solid;
  content: "";
  width: 3em;
}

#campaign .select_area h2:before {
  margin-right: 1em;
}

#campaign .select_area h2:after {
  margin-left: 1em;
}

/* キャンペーン終了表示 */
#cp_end {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1000;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 30px 0;
  background-color: rgba(28, 19, 18, 0.8);
  color: #fff;
  font-weight: bold;
  font-size: 140%;
  text-align: center;
  letter-spacing: 0.1em;
}

#cp_end a,
#cp_end a:hover,
#cp_end a:active,
#cp_end a:visited {
  color: #a1f6ff;
}

.q-style {
  font-weight: bold;
  color: #127667;
  font-size: 15px;
  margin-top: 20px;
}

.enq-bg-color {
  background: #e9f6f4;
}

.enq-bg-color .btn-cam {
  font-size: 16px;
}

.enq-bg-color .fn {
  font-weight: normal;
}

.enq-bg-color dl {
  color: #28aa96;
  border-bottom: 2px solid #28aa96;
}

.enq-bg-color dd {
  font-size: 120%;
  margin-bottom: 5px;
  color: #333;
}

.enq-bg-color label {
  margin-bottom: 10px;
  font-size: 15px;
}

.font-size-15 {
  font-size: 15px;
}

.font-size-16 {
  font-size: 16px;
}

.enq-bg-color .fa {
  color: #ff677c;
}

.enq-bg-color .radio,
.enq-bg-color .checkbox {
  font-size: 15px;
}

.enq-bg-color textarea.form-control {
  font-size: 16px;
}

.link-hover:hover {
  opacity: 0.8;
}

/*PCのとき*/
@media (min-width: 768px) {
  .main-bg-color-2000 {
    background-color: #fff;
    background-image: url(/images/campaign/trycp2208/main_2000_bg.png);
    background-position: center;
    background-repeat: repeat-x;
    background-size: contain;
  }

  .main-bg-color-1800,
  .main-bg-color-1700,
  .main-bg-color-1600,
  .main-bg-color-1500,
  .main-bg-color-1400,
  .main-bg-color-1300 {
    background-color: #fff;
    background-image: url(/images/campaign/trycp2208/main_1800_bg.png);
    background-position: center;
    background-repeat: repeat-x;
    background-size: contain;
  }

  .pc-big {
    font-size: 135%;
  }

  .mobile-fb {
    font-weight: bold;
  }

  .cam-banner img {
    width: 85%;
  }

  .cam-banner .font-size-15 {
    font-size: 20px;
  }

  .count-icon-danger {
    left: 10px;
  }

  .trycp2208-price {
    top: 6px;
    font-size: 10.5px;
  }
}

/*スマホのとき*/
@media (max-width: 767px) {
  .area_wrap dl {
    overflow: hidden;
    background-color: #f9f9f9;
    margin: 0;
    border-left: solid thin #ddd;
    border-right: solid thin #ddd;
  }

  .count-down {
    font-size: 12px;
  }

  .enq-bg-color .btn.btn-link {
    font-size: 12px;
    padding-right: 5px;
  }

  .count {
    font-size: 160%;
  }

  .mobile-fb {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px !important;
  }

  .cam-date {
    font-size: 16px;
  }

  #campaign {
    font-size: 13px;
  }

  #campaign .small {
    font-size: 10px;
  }

  .details dt {
    width: 100%;
    background: #f8f8f8;
    padding-bottom: 10px;
  }

  .details dd {
    width: 100%;
    border-top: none !important;
  }

  .new_year-btn_history {
    margin-bottom: 10px;
  }

  /*スマホフロート*/
  .sp-float {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    background-color: rgba(232, 232, 232, 0.9);
    padding: 10px 0;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 10px);
    padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
  }

  .btn-cam-set {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
  }

  .area_wrap dl {
    overflow: hidden;
    background-color: #f9f9f9;
    margin: 0;
    border-left: solid thin #ddd;
    border-right: solid thin #ddd;
  }

  .area_wrap dl dd ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
  }

  .area_wrap dl dd ul {
    padding: 0 5px !important;
  }

  .area_wrap dl dd ul li {
    width: 23%;
    margin: 0.4em 1%;
  }

  .js-station-search-panel .form-inline .input-group {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .trycp2208-price {
    font-size: 10px;
    line-height: 1.5em;
  }

  .trycp2208-price span {
    font-size: 16px;
    display: block;
  }

  .menu-card-trycp2208 {
    padding: 5px 5px 12px 5px;
  }

  .count-icon-danger {
    width: 4.7em;
    height: 4.7em;
    bottom: 15px;
    left: 8px;
    font-size: 10px;
  }

  .trycp2208-price {
    top: 5px;
  }

  .btn-app, .btn-cam {
    max-width: 340px;
  }
  /*終了対応*/
  #cp_end {
    font-size: 100%;
  }
}
@media (max-width: 490px) {
  .btn-app, .btn-cam {
    max-width: 360px;
  }
}
@media (max-width: 389px) {
  .btn-app, .btn-cam {
    max-width: 340px;
  }
}

/*SEのとき*/
@media (max-width: 320px) {
  #campaign {
    font-size: 12px;
  }

  .mobile-fb {
    font-size: 13px;
  }

  .count-icon-danger {
    width: 4.5em;
    height: 4.5em;
    bottom: 10px;
    left: -6px;
    font-size: 10px;
  }
  .btn-app, .btn-cam, .app-btn-bg02 {
    max-width: 310px;
    font-size:13px;
  }
}

/*MV上お知らせ*/
#cam-check {
  background-color: #fff;
}

#cam-check dt,
#cam-check dd {
  padding: 1em 2em 0 1em;
  line-height: 1.4;
  position: relative;
}

#cam-check dt {
  cursor: pointer;
  z-index: 2;
  text-decoration: underline;
}

#cam-check dd {
  padding: 0.8em .5em;
  display: none;
  z-index: 1;
}

#cam-check dt::after {
  content: "\f078";
  font-family: FontAwesome;
  display: inline-block;
  position: absolute;
  right: 4em;
  top: 50%;
  margin-top: -0.7em;
  font-weight: normal;
  color: #5c5c5c;
}

#cam-check dt.active::after {
  content: "\f077";
}

@media (min-width: 768px) {
  #cam-check dt {
    font-size: 15px !important;
  }

  #cam-check dt::after {
    right: 29% !important;
  }

  #cam-check .pt20 {
    padding-top: 2em !important;
  }

  #cam-check .pb20 {
    padding-bottom: 2em !important;
  }

  .cam-date {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  #cam-check .xs-indent {
    text-indent: 5em;
    display: inline-block;
  }

  .cp-end-info {
    font-size: 13px;
  }

  #cam-check dt,
  #cam-check dd {
    padding: 1em 2em 1em 1em;
  }
}

/*特典金額変更のお知らせ*/
#cam-check {
  max-width: 645px;
  margin: 10px auto;
}

#cam-check dt {
  padding: 10px;
  color: #cb0000;
}

#cam-check dd {
  padding: 10px;
  background: #f7f7f7;
  border-radius: 10px;
}

#cam-check .text-indent {
  text-indent: 0.1em;
}

#cam-check .w-245 {
  width: 245px;
  display: inline-block;
}

#cam-check .w-100 {
  width: 100px;
  display: inline-block;
}

@media (max-width: 600px) {
  #cam-check {
    margin: 5px;
  }

  #cam-check dt {
    font-size: 1.1em;
    padding: 6px;
    text-indent: -1em;
  }

  #cam-check dd {
    padding: 5px;
    letter-spacing: -0.01em;
    font-size: 11.8px;
  }

  #cam-check .w-245 {
    width: 230px;
  }

  #cam-check .w-100 {
    width: 90px;
  }

  #cam-check .text-indent {
    text-indent: 0;
    padding-left: 0.6em;
  }
}
/*MV上お知らせ*/
#cam-check {
  background-color: #fff;
}

#cam-check dt,
#cam-check dd {
  padding: 1em 2em 0 1em;
  line-height: 1.4;
  position: relative;
}

#cam-check dt {
  cursor: pointer;
  z-index: 2;
  text-decoration: underline;
}

#cam-check dd {
  padding: 0.8em .5em;
  display: none;
  z-index: 1;
}

#cam-check dt::after {
  content: "\f078";
  font-family: FontAwesome;
  display: inline-block;
  position: absolute;
  right: 4em;
  top: 50%;
  margin-top: -0.7em;
  font-weight: normal;
  color: #5c5c5c;
}

#cam-check dt.active::after {
  content: "\f077";
}

@media (min-width: 768px) {
  #cam-check dt {
    font-size: 15px !important;
  }

  #cam-check dt::after {
    right: 29% !important;
  }

  #cam-check .pt20 {
    padding-top: 2em !important;
  }

  #cam-check .pb20 {
    padding-bottom: 2em !important;
  }

  .cam-date {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  #cam-check .xs-indent {
    text-indent: 5em;
    display: inline-block;
  }

  .cp-end-info {
    font-size: 13px;
  }

  #cam-check dt,
  #cam-check dd {
    padding: 1em 2em 1em 1em;
  }
}

/*特典金額変更のお知らせ*/
#cam-check {
  max-width: 645px;
  margin: 10px auto;
}

#cam-check dt {
  padding: 10px;
  color: #cb0000;
}

#cam-check dd {
  padding: 10px;
  background: #f7f7f7;
  border-radius: 10px;
}

#cam-check .text-indent {
  text-indent: 0.1em;
}

#cam-check .w-245 {
  width: 245px;
  display: inline-block;
}

#cam-check .w-100 {
  width: 100px;
  display: inline-block;
}

@media (max-width: 600px) {
  #cam-check {
    margin: 5px;
  }

  #cam-check dt {
    font-size: 1.1em;
    padding: 6px;
    text-indent: -1em;
  }

  #cam-check dd {
    padding: 5px;
    letter-spacing: -0.01em;
    font-size: 11.8px;
  }

  #cam-check .w-245 {
    width: 230px;
  }

  #cam-check .w-100 {
    width: 90px;
  }

  #cam-check .text-indent {
    text-indent: 0;
    padding-left: 0.6em;
  }
}