@charset "utf-8";
/*	共通化したコンポーネントのCSS */

/*----------------------------------------------
		TRUST & SECURITY
----------------------------------------------*/
#trust_security{
    background-image: repeating-linear-gradient(90deg, var(--white), var(--white) 1px, transparent 1px, transparent .11rem), linear-gradient(0deg, #e8dcc7, rgba(255, 255, 255, 0));
    padding-block: .8rem .5rem;
    margin-top: 0;
}
#trust_security h2{
    color: var(--gold);
    font-size: .32rem;
    margin-bottom: .15rem;
    font-family: 'Bodoni Moda', serif;
    font-weight: 900;
    font-optical-sizing: auto;
    line-height: 1.5;
}
#trust_security p{
    font-size: clamp(.1rem, 2.5vw, .2rem);
}
.trust_security_wrap{
    align-items: flex-start;
    gap: .8rem;
    margin-block: .5rem;
}
.trust_security_wrap li{
    width: calc((100% - .2rem) / 3);
}
    .trust_security_wrap li h3 {
        color: var(--gold);
        font-size: .24rem;
        margin-block: .1rem;
        font-family: "EB Garamond", serif;
        font-weight: 700;
        font-style: normal;
        font-optical-sizing: auto;
    }
    .trust_security_wrap li p {
        font-family: "Noto Sans", sans-serif;
        font-weight: 300;
        font-size: .15rem;
        text-align: center;
    }

@media screen and (min-width: 768px) and (max-width:1023px) {}

@media (max-width: 767px) {
    .trust_security_wrap{
        flex-direction: column;
        gap: .25rem;
    }
    .trust_security_wrap li {
        width: 80vw;
        border-bottom: 1px solid var(--gold);
        padding-bottom: .25rem;
    }
    .trust_security_wrap li:last-of-type {
        border-bottom: none;
    }
    .trust_security_wrap li h3 {
        font-size: .32rem;
    }
    .trust_security_wrap li p {
        font-size: .18rem;
    }
}
/*----------------------------------------------
		PRICING TABLE
----------------------------------------------*/
#pricing_dtl {
  background-color: #f7f3ec;
  padding: .5rem 0 .6rem;
}

.rank_pricing_area {
  background-color: var(--white);
  margin-top: .4rem;
  padding: .2rem 0;
}

.rank_pricing_area p{
  text-align: center;
}

.list_rank {
  display: flex;
  flex-wrap: wrap;
  margin-top: .2rem;
}
.list_rank li {
  border-left : 1px dotted var(--black);
  width: calc(100% / 3);
  padding: 0 .2rem;
}
.ranking_pricing .list_rank li {
  border-left : 1px solid var(--black);
}
.list_rank li:nth-of-type(3n+1) {
  border-left : none;
}
.rank_pricing_area h4 {
  font-size: .32rem;
  padding: .1rem;
  color: var(--white);
  text-align: center;
  font-weight: 600;
  margin: 0 .2rem;
}
.list_rank h5 {
  font-size: .24rem;
  padding: .1rem;
  color: var(--white);
  text-align: center;
  font-weight: 600;
}
.list_rank h5 span {
  font-size: .20rem;
}
.list_rank p {
  font-size: .32rem;
  padding: .1rem .1rem;
  text-align: center;
}

.ranking_pricing .list_rank h5 {
  background-color: var(--gold);
}
.silver_rank_pricing h4,
.silver_rank_pricing .list_rank h5 {
  background-image: linear-gradient(90deg, #a3afb2, #d0d6d7 50%, #a3afb2);
}
.gold_rank_pricing h4,
.gold_rank_pricing .list_rank h5 {
  background-image: linear-gradient(90deg, #794c2a, #c19b5b 50%, #794c2a);
}
.diamond_rank_pricing h4,
.diamond_rank_pricing .list_rank h5 {
  background-image: linear-gradient(90deg, #646fb2, #45b8a2);
}
.ask_rank_pricing h4 {
  background-image: linear-gradient(90deg, #1d1a1c, #78797a 50%, #1d1a1c);
}
.ask_rank_pricing .list_rank h5 {
  background-color: #797a7b;
}
.ask_rank_pricing .list_rank li {
  width: 33vw;
  margin: 0 auto;
}
.drinking_plan {
  background: url("../images/price/price_photo_01.png") no-repeat right bottom #c19b5b;
  color: var(--white);
}
.drinking_plan h4 {
  background-color: #916520;
  margin: 0;
}

.drinking_plan h5 {
  background-color: var(--white);
  color: var(--gold);
}

.drinking_plan .lead_txt {
  font-size: .2rem;
}

.drinking_plan span {
  font-size: .2rem;
  display: block;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .list_rank {
    flex-direction: column;
  } 
  #pricing_dtl {
    margin-top: 0;
  }
  .rank_pricing_area {
    padding: .2rem 0 0;
  }
  .list_rank h5 {
    font-size: .32rem;
  }
  .list_rank li,
  .ranking_pricing .list_rank li,
  .ask_rank_pricing .list_rank li {
    width: 100%;
    border-left: none;
  }
  .list_rank p {
    font-size: .38rem !important;
  }
  .drinking_plan {
    padding-bottom: 2.5rem;
  }
  .drinking_plan .lead_txt {
    font-size: .28rem;
  }
  .drinking_plan span {
    font-size: .3rem;
  }
}


/*----------------------------------------------
		FOOTER CONTACT
----------------------------------------------*/

#foot_contact {
    background-image: url("../images/common/bg_circle.webp"), url("../images/common/bg_circle.webp");
    background-position: calc(100% + 5%) calc(100% - 3rem), -10% calc(100% + 1rem);
    background-repeat: no-repeat, no-repeat;
    background-size: 30vw, 30vw;
    padding: .7rem 0 .6rem;
    text-align: center;
    margin-top: 0;
  }
  .foot_logo {
    text-align: center;
    margin-bottom: .3rem;
  }
  .foot_logo img {
    width: 3rem;
    display: inline-block;
  }
  #foot_contact p {
    font-size: 0.18rem;
  }
/*----------------------------------------------
		Book Your Experience
----------------------------------------------*/

.book-section {
  background-color: var(--white);
  background-image: var(--bg-section-roses-only);
  background-repeat: repeat-y, repeat-y;
  background-position: left, right;
  background-size: clamp(10%, 20vw, 25%), clamp(10%, 20vw, 25%);
  padding-block: 1rem;
}

.book-section__subtitle {
  text-align: center;
  margin: 0 0 .28rem;
  font-size: .2rem;
  line-height: 1.5;
}

.book-section__cta {
  margin: 0 auto .36rem;
}

.book-section__cta .booking-overlay__cta-item {
  max-width: 3.4rem;
}

.book-section input[type="date"],
.book-section select[name="service_duration"] {
  font-family: var(--font-basic);
}

.book-section input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.5);
}

.book-section input[type="date"]::-webkit-datetime-edit,
.book-section input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.book-section input[type="date"]::-webkit-datetime-edit-text,
.book-section input[type="date"]::-webkit-datetime-edit-month-field,
.book-section input[type="date"]::-webkit-datetime-edit-day-field,
.book-section input[type="date"]::-webkit-datetime-edit-year-field {
  font-family: var(--font-basic);
  direction: ltr;
}

.book-section input[type="date"]::-moz-datetime-edit,
.book-section input[type="date"]::-moz-datetime-edit-month-field,
.book-section input[type="date"]::-moz-datetime-edit-day-field,
.book-section input[type="date"]::-moz-datetime-edit-year-field {
  font-family: var(--font-basic);
  direction: ltr;
}

@media (max-width: 767px) {
  .book-section__title {
    font-size: .28rem;
    text-align: center;
  }
  .book-section__subtitle {
    font-size: .18rem;
    text-align: center;
  }
}


/*----------------------------------------------
		Messaging Icons
----------------------------------------------*/

.mirai-app-icons {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mirai-app-icons__item {
  margin: 0;
}

.mirai-app-icons__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .18rem;
  text-align: center;
  width: 100%;
}

.mirai-app-icons__thumb {
  width: 100%;
  max-width: 2rem;
  margin: 0 auto;
}

.mirai-app-icons__thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.mirai-app-icons__meta {
  display: flex;
  flex-direction: column;
  gap: .08rem;
}

.mirai-app-icons__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .08rem;
  text-decoration: none;
  color: inherit;
}

.mirai-app-icons__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .14rem;
  width: 100%;
}

.mirai-app-icons__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .14rem .36rem;
  border-radius: 999px;
  border: 1px solid var(--black);
  background-color: transparent;
  color: var(--black);
  font-size: .2rem;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
  font-family: inherit;
}

.mirai-app-icons__action--copy {
  background-color: var(--black);
  color: var(--white);
}

.mirai-app-icons__action--copy:hover,
.mirai-app-icons__action--copy:focus {
  background-color: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}

.mirai-app-icons__action--open:hover,
.mirai-app-icons__action--open:focus {
  background-color: var(--black);
  color: var(--white);
}

.mirai-app-icons__action:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.mirai-app-icons__actions .mirai-app-icons__action {
  min-width: 2.6rem;
}

.mirai-app-icons__link img {
  display: block;
  width: 100%;
  height: auto;
}

.mirai-app-icons__label,
.mirai-app-icons__id {
  display: block;
  font-size: .22rem;
  line-height: 1.3;
  text-align: center;
}

.mirai-app-icons__id {
  font-weight: 600;
  word-break: break-word;
}

.mirai-copy-toast {
  position: fixed;
  left: 50%;
  top: 1.4rem;
  transform: translate(-50%, -160%);
  padding: .18rem .42rem;
  border-radius: .32rem;
  background-color: var(--gold);
  color: var(--black);
  font-size: .22rem;
  line-height: 1.4;
  letter-spacing: .01rem;
  z-index: 13000;
  box-shadow: 0 .16rem .32rem rgba(0, 0, 0, .12);
  border: 1px solid rgba(0, 0, 0, .08);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}

.mirai-copy-toast.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

.mirai-copy-toast.is-error {
  background-color: rgba(162, 25, 25, .92);
  color: var(--white);
  border-color: transparent;
}

.mirai-copy-toast.is-success {
  background-color: var(--gold);
  color: var(--black);
}

@media (max-width: 767px) {
  .mirai-app-icons__card {
    gap: .16rem;
  }

  .mirai-app-icons__thumb {
    max-width: 1.6rem;
  }

  .mirai-app-icons__action {
    min-width: 2.2rem;
    font-size: .18rem;
    padding: .12rem .3rem;
  }

  .mirai-copy-toast {
    top: .9rem;
    font-size: .2rem;
    width: calc(100% - .6rem);
    max-width: 5.4rem;
  }
}


body.mirai-copy-modal-open {
  overflow: hidden;
}

.mirai-copy-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: .32rem;
  z-index: 12000;
}

.mirai-copy-modal.is-active {
  display: flex;
}

.mirai-copy-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
}

.mirai-copy-modal__dialog {
  position: relative;
  z-index: 1;
  background: var(--white);
  border-radius: .24rem;
  width: 100%;
  max-width: 4.8rem;
  padding: .42rem .38rem .46rem;
  box-shadow: 0 .3rem .8rem rgba(0, 0, 0, .25);
  outline: none;
}

.mirai-copy-modal__close {
  position: absolute;
  top: .2rem;
  right: .2rem;
  width: .34rem;
  height: .34rem;
  border: none;
  background: transparent;
  cursor: pointer;
}

.mirai-copy-modal__close::before,
.mirai-copy-modal__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--black);
  transform-origin: center;
}

.mirai-copy-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.mirai-copy-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.mirai-copy-modal__body {
  display: flex;
  flex-direction: column;
  gap: .24rem;
  text-align: center;
}

.mirai-copy-modal__title {
  font-size: .3rem;
  letter-spacing: .01rem;
  margin: 0;
}

.mirai-copy-modal__message {
  margin: 0;
  font-size: .22rem;
  line-height: 1.46;
}

.mirai-copy-modal__id {
  margin: 0;
  font-size: .24rem;
  font-weight: 600;
  letter-spacing: .02rem;
  word-break: break-word;
}

.mirai-copy-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .18rem;
}

.mirai-copy-modal__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .14rem .38rem;
  border-radius: 999px;
  border: 1px solid var(--black);
  background-color: transparent;
  color: var(--black);
  font-size: .22rem;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.mirai-copy-modal__action--copy {
  background-color: var(--black);
  color: var(--white);
}

.mirai-copy-modal__action--copy:hover,
.mirai-copy-modal__action--copy:focus {
  background-color: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}

.mirai-copy-modal__action--open:hover,
.mirai-copy-modal__action--open:focus {
  background-color: var(--black);
  color: var(--white);
}

.mirai-copy-modal__action:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .mirai-copy-modal {
    padding: .18rem;
  }

  .mirai-copy-modal__dialog {
    padding: .34rem .28rem .4rem;
  }

  .mirai-copy-modal__title {
    font-size: .26rem;
  }

  .mirai-copy-modal__message {
    font-size: .2rem;
  }

  .mirai-copy-modal__action {
    padding: .12rem .3rem;
    font-size: .2rem;
    min-width: 2.4rem;
  }
}