:root {
  --blue-color: #1C1876;
  --green-color: #45B300;
}

/* mc-shop_overlay-inner */
.mc-shop_overlay-inner {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(255,255,255,0.9);
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* mc-shop_loading */
.mc-shop_loading {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #1C1876;
  --_m:
    conic-gradient(#0000 0%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
  mask: var(--_m);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  animation: l3 1s infinite linear;
}
@keyframes l3 {
  to{
    transform: rotate(1turn)
  }
}

/* c-searchInput */
.c-searchInput {
  position: relative;
  width: 700px;
  margin: 0 auto .75rem auto;
  @media (max-width: 840px) {
    width: 100%;
  }
}
.c-searchInput.is-prefectures {
  display: none;
}
[data-search="prefectures"] .is-prefectures {
  display: block;
}
.c-searchInput.js-city {
  display: none;
}
.js-city.is-visible {
  display: block;
}
.p-searchIndex {
  width: 100%;
  display: flex;
  justify-content: center;
}
.p-searchIndex--wrapper {
  width: 100%;
}
.c-searchInput--input {
  width: 100%;
  margin: 0;
  height: 3rem;
  font-size: 1rem;
  letter-spacing: -0.05em;
  background: #F7F7F7;
  border: 1px solid #E6E6E6;
  box-sizing: border-box;
  border-radius: 0.2rem;
  padding: 0 4rem 0 1.3rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  box-shadow: none;
  @media (max-width: 840px) {
    font-size: .8rem;
  }
}
.c-searchInput--input::placeholder {
  color: rgba(0,0,0,0.2);
}
.c-searchInput--input::-webkit-search-decoration,
.c-searchInput--input::-webkit-search-cancel-button,
.c-searchInput--input::-webkit-search-results-button,
.c-searchInput--input::-webkit-search-results-decoration {
  display: none;
}
.c-searchInput--reset {
  background: none;
  position: absolute;
  inset: 0 2.6rem 0 auto;
  display: none;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 0.5rem;
  padding: 0;
  margin: auto 0;
  cursor: pointer;
  z-index: 3;
}
.c-searchInput--reset.is-visible {
  display: block;
}
.c-searchInput--reset:before {
  position: absolute;
  inset: -0.5rem;
  display: block;
  content: '';
}
.c-searchInput--icon {
  transition: opacity .35s cubic-bezier(.39,.575,.565,1) 0s;
  position: absolute;
  inset: 0 0.2rem 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  background: #E6E6E6;
  border: none;
  border-radius: 0.2rem;
  padding: 0;
  margin: auto 0;
  cursor: pointer;
  z-index: 1;
  @media (max-width: 840px) {
    img {
      width: 20px;
      height: 20px;
    }
  }
}
.c-searchInput--icon:hover {
  opacity: 0.7;
}
.c-searchInput--select {
  display: block;
  width: 100%;
  height: 3rem;
  font-size: 1rem;
  letter-spacing: -0.05em;
  color: rgba(0,0,0,0.2);
  background: #fff;
  border: 1px solid #E6E6E6;
  border-radius: 0.2rem;
  appearance: none;
  padding: 0 4rem 0 1.3rem;
  @media (max-width: 840px) {
    font-size: .8rem;
  }
  option {
    color: rgba(0,0,0,0.8);
    &:disabled {
      color: rgba(0,0,0,0.2);
    }
  }
}
.c-searchInput--arw {
  position: absolute;
  inset: 0 1rem 0 auto;
  display: block;
  width: 1rem;
  height: auto;
  margin: auto 0;
  @media (max-width: 840px) {
    width: 14px;
    height: 8.4px;
  }
}
.c-searchBrand {
  width: 100%;
  margin: 0 0 3.5rem 0;
  .c-searchBrand--toggle-wrapper {
    width: 700px;
    margin: 0 auto 1rem auto;
    @media (max-width: 840px) {
      width: 100%;
    }
    & + .c-searchBrand--wrapper {
      display: none;
    }
    &.is_open {
      .c-searchBrand--toggle:after {
        transform: rotate(-180deg);
      }
    }
    &.is_open + .c-searchBrand--wrapper {
      display: flex;
    }
  }
  .c-searchBrand--toggle {
    font-size: .8rem;
    cursor: pointer;
    appearance: none;
    border: none;
    background: none;
    outline: none;
    display: flex;
    align-items: center;
    &:after {
      content: '';
      background: url(../img/icon/search_arw.svg) left center no-repeat;
      background-size: contain;
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-left: 0.5rem;
      transition-duration: 0.2s;
    }
  }
  .c-searchBrand--wrapper {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.875%;
    justify-content: flex-start;
    @media (max-width: 840px) {
      column-gap: 2%;
    }
    label {
      width: 18.5%;
      margin-bottom: 1.875%;
      border: 1px solid #E6E6E6;
      border-radius: 0.2rem;
      cursor: pointer;
      padding: .5rem .75rem;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      @media (max-width: 840px) {
        width: 49%;
      }
      span {
        flex: 3;
        input {
          appearance: none;
          width: 20px;
          height: 20px;
          min-width: 20px;
          min-height: 20px;
          background-color: rgba(0, 0, 0, 0.07);
          border: 1px solid rgba(0, 0, 0, 0.15);
          border-radius: 45em;
          display: inline-block;
          position: relative;
          margin: 0;
          &:checked {
            background-color: #1C1876;
          }
          &:checked::before {
            content: "";
            width: 12px;
            height: 8px;
            border-left: 3px solid #fff;
            border-bottom: 3px solid #fff;
            position: absolute;
            vertical-align: middle;
            top: 4px;
            left: 3px;
            transition: all 250ms ease;
            transform: rotate(-45deg);
          }
        }
      }
      picture {
        flex: 9;
        img {
          max-width: 120px;
          max-height: 84px;
        }
      }
    }
  }
}

/* c-searchWidget */
.c-searchWidget {
  margin-top: 0;
}
.c-searchWidget--head {
  width: 700px;
  margin: 0 auto 3rem auto;
  display: flex;
  font-size: .8rem;
  align-items: center;
  justify-content: space-between;
  @media (max-width: 840px) {
    width: 100%;
  }
}
.c-searchWidget--head.is_disabled {
  display: none;
}
.c-searchWidget--result {
  font-size: .8rem;
  letter-spacing: 0;
}
.c-searchWidget--result .emp {
  font-weight: 700;
}
.c-searchWidget--result .red {
  color: var(--blue-color);
}
.c-mapSwitch {
  position: relative;
  display: flex;
  align-items: center;
  letter-spacing: 0;
  color: inherit;
}
.c-mapSwitchButton {
  width: 42px;
  height: 22px;
  position: relative;
  border: none;
  border-radius: 12px;
  background-color: #BCBDBD;
  cursor: pointer;
}
.c-mapSwitchButton:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  left: 1px;
  top: 1px;
  background: #FFFFFF;
  border: 1px solid #BCBDBD;
  transition: all 0.1s ease 0s;
}
.c-mapSwitchLabel {
  color: #1E2121;
  margin-right: 12px;
  cursor: pointer;
}
.is_active .c-mapSwitchButton {
  background: var(--blue-color);
}
.is_active .c-mapSwitchButton::after {
  border-color: var(--blue-color);
  transform: translateX(100%);
}
.c-searchWidget--map {
  display: none;
  aspect-ratio: 1100 / 450;
  border-radius: 0.2rem;
  margin: 5rem max(calc((100% - 100vw + 4rem) / 2), -10rem) 0;
  overflow: hidden;
  @media (max-width: 840px) {
    margin: 2rem -15px 2rem -15px;
    aspect-ratio: 375 / 500;
  }
}
.c-searchWidget--map.is_visible {
  display: block;
}

/* p-searchList */
.p-searchList {
  background-position: left top;
  background-size: 30rem auto;
  width: 700px;
  margin: 0 auto;
  @media (max-width: 840px) {
    width: 100%;
  }
}
.p-searchList.is_disabled {
  display: none !important;
}
.p-searchList--wrapper {
  max-width: calc(90rem + 7rem * 2);
  margin-right: auto;
  margin-left: auto;
}
.p-searchList--head {
  display: none;
}
.p-searchList--list {
  display: grid;
  gap: 1.5rem;
}
.p-searchList--foot {
  margin-top: 6rem;
}
html[data-switch='map'] .p-searchList {
  display: none;
}

/* mc-shop */
.mc-shop {
  background: #fff;
  border-radius: .2rem;
  box-shadow: 0 0 8px -3px rgba(28,24,118, .45);
  padding: 1.5rem 2rem;
  @media (max-width: 840px) {
    padding: 1.25rem 1rem;
  }
}
.mc-shop__head {
  border-bottom: 1px solid rgba(0,0,0, 0.1);
  padding-bottom: .75rem;
}
.mc-shop__name {
  position: relative;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
  color: #1C109A;
}
.mc-shop__name .number {
  position: absolute;
  top: 0.1rem;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  aspect-ratio: 1/1;
  font-size: .8rem;
  line-height: 1;
  color: #fff;
  background: var(--blue-color);
  box-sizing: border-box;
  padding-bottom: .2rem;
}
.mc-shop__name .number[data-length="2"] {
  font-size: .65rem;
}
.mc-shop__name .number[data-length="3"] {
  font-size: .65rem;
}
@media not all and (min-width:1024px) {
  .mc-shop__name .number[data-length="2"] {
    font-size: 1rem;
  }
  .mc-shop__name .number[data-length="3"] {
    font-size: .65rem;
  }
}
.mc-shop__name .number:after {
  position: absolute;
  inset: auto 0 -0.3rem;
  display: block;
  content: '';
  width: 0;
  height: 0;
  border-top: 0.4rem solid var(--blue-color);
  border-right: 0.2rem solid transparent;
  border-left: 0.2rem solid transparent;
  margin: 0 auto;
}
.mc-shop__name .c-hoverLine {
  position: relative;
  display: block;
  padding-left: 2rem;
}
.mc-shop__details {
  display: flex;
  align-items: flex-start;
  margin-top: .75rem;
}
.mc-shop__distance {
  color: var(--blue-color);
  font-weight: 500;
  position: relative;
  display: flex;
  align-items: flex-end;
  line-height: 1.278;
  padding-left: 1.2rem;
}
.mc-shop__distance:before {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  content: '';
  width: 0.9rem;
  aspect-ratio: 9/12;
  background-image: url('../img/icon/search_shop_pin.svg');
  background-repeat: no-repeat;
  background-size: contain;
  translate: 0 -50%;
  margin-top: 0.1rem;
}
.mc-shop__distance .number {
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: var(--blue-color);
}
.mc-shop__distance .suffix {
  font-size: .9rem;
  letter-spacing: -0.05em;
  color: var(--blue-color);
}
.mc-shop__distance .caption {
  color: #000;
  font-weight: 400;
  font-size: .65rem;
  letter-spacing: 0;
  margin-left: .5rem;
}
.mc-shop__access {
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1875;
  margin-top: .6rem;
}
.mc-shop__business_hour {
  position: relative;
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  padding-top: .75rem;
  padding-bottom: .75rem;
  margin-top: .75rem;
  border-top: 1px dashed rgba(0, 0, 0, .2);
  border-bottom: 1px dashed rgba(0, 0, 0, .2);
}
.mc-shop__business_hour em {
  display: block;
  width: 100%;
  font-weight: 400;
  color: #000 !important;
  font-style: normal;
  text-decoration: none !important;
}
.mc-shop__business_hour strong {
  display: block;
  width: 100%;
  font-weight: 400;
  border-bottom: 1px dashed rgba(0, 0, 0, .2);
  padding-bottom: .75rem;
  margin-bottom: .75rem;
}
.mc-shop__foot {
  position: relative;
  padding-top: 2.6rem;
  margin-top: 2.2rem;
}
.mc-shop__services {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.mc-shop_pagination .c-hoverLine--text {
  pointer-events: none;
}
.mc-shop_pagination .page-numbers {
  transition: opacity .35s cubic-bezier(.39,.575,.565,1) 0s !important;
}
@media(hover) {
  .mc-shop_pagination .page-numbers:not(.current):hover {
    opacity: 0.5;
  }
}
.mc-shop_map-popup {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  font-size: .85rem;
  font-weight: 700;
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Helvetica Neue", arial, meiryo, sans-serif;
  font-feature-settings: 'palt' on;
  background-color: var(--blue-color);
}
.mc-shop_map-popup[data-length="2"] {
  font-size: .85rem;
}
.mc-shop_map-popup[data-length="3"] {
  font-size: .75rem;
}
.mc-shop_map-popup::after {
  border-left: 0.3rem solid transparent;
  border-right: 0.3rem solid transparent;
  border-top: 0.5rem solid var(--blue-color);
  content: "";
  height: 0;
  left: 50%;
  position: absolute;
  top: 95%;
  transform: translate(-50%, 0);
  width: 0;
}
.mc-shop_map-popup .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding-bottom: 0.2rem;
}
.mc-shop_map-popup .icon svg {
  height: 2rem;
  width: auto;
}
.mc-shop_map-popup .details {
  display: none;
  flex-direction: column;
  flex: 1;
  font-weight: 400;
  position: relative;
}
.mc-shop_map-popup .mc-shop_shop-name {
  position: relative;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4375;
  color: #1c0f9d;
  padding-left: 1.6rem;
}
.mc-shop_map-popup .mc-shop_shop-name .number {
  position: absolute;
  top: 0.1rem;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  aspect-ratio: 1/1;
  font-size: .7rem;
  font-weight: normal;
  line-height: 1;
  color: #fff;
  background: var(--blue-color);
}
.mc-shop_map-popup[data-length="2"] .mc-shop_shop-name .number {
  font-size: .65rem;
}
.mc-shop_map-popup[data-length="3"] .mc-shop_shop-name .number {
  font-size: .65rem;
}
.mc-shop_map-popup .mc-shop_shop-name .number:after {
  position: absolute;
  inset: auto 0 -0.3rem;
  display: block;
  content: '';
  width: 0;
  height: 0;
  border-top: 0.4rem solid var(--blue-color);
  border-right: 0.2rem solid transparent;
  border-left: 0.2rem solid transparent;
  margin: 0 auto;
}
.mc-shop_map-popup .info {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.3rem;
  border-top: 1px solid rgba(0,0,0,0.1);
  padding-top: 0.5rem;
  margin-top: 0.6rem;
}
.mc-shop_map-popup .info .number {
  color: var(--blue-color);
  font-weight: 700;
}
.mc-shop_map-popup .info .caption {
  position: relative;
  bottom: 0.1rem;
  font-size: .8rem;
  letter-spacing: 0;
  margin-left: 0.4rem;
}
.mc-shop_map-popup .distance {
  color: var(--blue-color);
  position: relative;
  font-size: 1rem;
  letter-spacing: -0.05em;
  line-height: 1;
  padding-left: 1rem;
}
.mc-shop_map-popup .distance:before {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  content: '';
  width: 0.6rem;
  aspect-ratio: 9/12;
  background-image: url('../img/icon/search_shop_pin.svg');
  background-repeat: no-repeat;
  background-size: contain;
  translate: 0 -50%;
}
.mc-shop_map-popup .distance .caption {
  color: #000;
}
.mc-shop_map-popup .waiting {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.667;
}
.mc-shop_map-popup .waiting .number {
  position: relative;
  top: 0.1rem;
  font-size: 1rem;
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 0 0.2rem 0 0.5rem;
}
.mc-shop_address {
  font-size: .9rem;
  letter-spacing: 0;
  line-height: 1.215;
  margin: 0.9rem 0 -0.3rem;
}
.mc-shop_reservation {
  transition: opacity .35s cubic-bezier(.39,.575,.565,1) 0s;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: none;
  color: #fff;
  background: var(--green-color);
  box-shadow: 0 0.3rem 0 0 #2F7B00;
  border-radius: 0.5rem;
  padding-bottom: 0.2rem;
  margin: 2rem 0.1rem 0 0;
}
@media (hover) {
  .mc-shop_reservation:hover {
    opacity: 0.7;
  }
}
.mc-shop_map-popup.is_visible {
  width: 16.5rem;
  height: auto;
  background-color: #fff;
  border-radius: .4rem;
  box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, 0.1);
  padding: 1rem 1.5rem 1.5rem;
}
.mc-shop_map-popup.is_visible::after {
  top: 99.55555%;
  border-left: 0.3rem solid transparent;
  border-right: 0.3rem solid transparent;
  border-top: 0.5rem solid #fff;
}
.mc-shop_map-popup.is_visible .details {
  display: flex;
}
.mc-shop_map-popup.is_visible .mc-shop_pin-num {
  display: none;
}
.mc-shop_map-popup.is_visible .mc-shop_map-popup-close {
  transition: background-color .35s cubic-bezier(.39,.575,.565,1) 0s;
  position: absolute;
  top: -1.7rem;
  right: -2.2rem;
  width: 1.5rem;
  aspect-ratio: 1/1;
  background: #000;
  color: #fff;
  border-radius: 50%;
  border: 1px solid #fff;
  box-shadow: 0 0 1px rgba(0,0,0,0.25);
}
.mc-shop_map-popup.is_visible .mc-shop_map-popup-close:before {
  position: absolute;
  inset: 0;
  display: block;
  content: '';
  width: 1rem;
  height: 1px;
  background: #fff;
  border-radius: 10rem;
  margin: auto;
  rotate: -45deg;
}
.mc-shop_map-popup.is_visible .mc-shop_map-popup-close:after {
  position: absolute;
  inset: 0;
  display: block;
  content: '';
  width: 1rem;
  height: 1px;
  background: #fff;
  border-radius: 10rem;
  margin: auto;
  rotate: 45deg;
}
@media(hover) {
  .mc-shop_map-popup.is_visible .mc-shop_map-popup-close:hover {
    background: var(--blue-color);
  }
}

/* c-searchError */
.p-searchError {
  display: none;
  background-position: left top;
  padding: 4.5rem 0;
}
.p-searchError.is_visible {
  display: block;
}
.p-searchError--wrapper {
  max-width: 1080px;
  margin-right: auto;
  margin-left: auto;
}
.c-searchError {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  font-feature-settings: 'palt' on;
  padding: 0;
}
.c-searchError__text {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.45;
  padding-right: 2.3rem;
  text-align: center;
}
.c-searchError__text .emp {
  font-size: 1.25rem;
  color: var(--blue-color);
}
.c-searchError__caption {
  font-size: .8rem;
  letter-spacing: -0.05em;
  line-height: 1.429;
  color: #000;
  padding-right: 2.9rem;
  margin-top: 1.8rem;
  opacity: 0.5;
  text-align: center;
}
.c-searchError__captionList {
  list-style: disc;
  font-size: .8rem;
  letter-spacing: -0.05em;
  line-height: 1.429;
  color: #000;
  padding-right: 2.9rem;
  margin-top: 1.8rem;
  opacity: 0.5;
  li {
    font-size: .8rem;
  }
}
