@charset "UTF-8";

/* ショップ一覧
------------------------ ̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶ */
.info-block {
  margin: 4rem auto 8rem;
}

.shop-area + .shop-area {
  margin-top: 8rem;
}

.p-grid-shoplist {
  --min-col: 24rem;
  --max-col: 25%;

  display: grid;
  grid-template-columns: repeat(auto-fit ,minmax(var(--min-col),var(--max-col)));
  margin: -1.6rem;
}

.p-grid-shoplist__item {
  position: relative;
  padding: 1.6rem;
}

@media (any-hover: hover) {
  .p-grid-shoplist__item .inner:hover {
    opacity: .8;
    transition: all ease .3s;
    transform: translateY(-1px);
    transition-duration: 0.5s;
    box-shadow: rgba(100, 100, 111, 0.2) 0 7px 20px 0;
  }
}

.p-grid-shoplist__item .inner {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  height: 100%;
  position: relative;
}

.p-grid-shoplist__item .info {
  padding: 1.6rem 1.6rem 3.2rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.p-grid-shoplist__item .shop-title {
  font-size: 1.2rem;
  padding-bottom: 2.4rem;
}

.shop-statustag {
  position: absolute;
  top: 10px;
  left: 0;
  z-index: 2;
}

.shop-statustag__item {
  background-color: rgba(148, 148, 148, 0.8);
  color: #fff;
  padding: 1rem;
  min-width: 4.8rem;
  font-size: 1rem;
  line-height: 1;
  display: inline-block;
  text-align: center;
}

.shop-infotag {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.shop-infotag__item {
  font-size: 0.8rem;
  text-align: center;
  background-color: #fff;
  border: 1px solid #949494;
  color: #949494;
  padding: 0.2rem 0.4rem;
}

.shop-categorytag {
  --column-gap: 0.8rem;
  --row-gap: 0.8rem;
  --min-tag-width: 6rem;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--min-tag-width), 1fr));
  gap: var(--row-gap) var(--column-gap);
}

.shop-categorytag__item {
  background-color: #949494;
  color: #fff;
  font-size: 0.8rem;
  line-height: 1;
  font-family: "TTCommons-Regular", sans-serif;
  padding: 1rem 0 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.p-grid-shoplist__item .info__bottom > * + * {
  margin-top: 1rem;
}

@media (min-width: 1200px) {
  .p-grid-shoplist {
    --max-col: 25%;
  }
}

@media (max-width: 768px) {
  .shop-area + .shop-area {
    margin-top: 0;
  }

  .p-grid-shoplist__item .inner .pic, .p-grid-shoplist__item .inner .shop-categorytag, .p-grid-shoplist__item .inner .shop-infotag__item:not(.tax-free) {
    display: none;
  }

  .p-grid-shoplist {
    grid-template-columns: repeat(1, 1fr);
    margin: 0;
  }

  .p-grid-shoplist__item {
    padding: 0;
    border-bottom: 1px solid #eee;
  }

  .p-grid-shoplist__item .inner {
    border: none;
  }

  .shop-area {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  .shop-area__title {
    background-color: #eee;
    padding: 2.4rem 1.5rem;
    text-align: center;
    margin-bottom: 0;
  }

  .p-grid-shoplist__item .info{
    flex-direction: row;
    align-items: center;
    padding: 2.4rem 1.6rem;
  }

  .p-grid-shoplist__item .shop-title {
    padding-bottom: 0;
  }

  .p-grid-shoplist__item .info__top {
    display: flex;
    align-items: center;
  }

  .p-grid-shoplist__item .info__bottom {
    padding-left: 1rem;
    margin-left: auto;
    min-height: auto;
  }

  .p-grid-shoplist__item .shop-statustag {
    position: static;
    margin-right: 1rem;
  }

  .p-grid-shoplist__item .shop-statustag__item {
    padding: 0.8rem;
    background-color: #949494;
  }

  .shop-infotag {
    flex-shrink: 0;
  }
}

/* 店舗ページ
------------------------ ̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶ */
.shop-block + .shop-block {
  margin-top: 4rem;
  padding-top: 4rem;
  border-top: 1px solid #ccc;
}
.shop-layout {
  display: grid;
  gap: 0 4rem;
  align-items: flex-start;
  grid-template-columns: minmax(0, 5.5fr) minmax(0, 4.5fr);
  grid-template-rows: auto;
  grid-template-areas:
  'shop-slide shop-info'
  'shop-concept shop-info'
  '. shop-info';
}

.shop-slide {
  grid-area: shop-slide;
  position: relative;
}
.shop-info {
  grid-area: shop-info;
}
.shop-concept {
  grid-area: shop-concept;
}

.shop-basicinfo {
  margin: 3.2rem 0;
}

.shop-basicinfo > * + *,.shop-accessinfo > * + * {
  margin-top: 1.6rem;
}

.shop-block__title {
  font-size: 2rem;
  line-height: 1.5;
  margin-bottom: 2.4rem;
}

.info-icon {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  text-align: left;
}

.info-icon::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 2em;
  height: 2em;
  background: url("/ec/images/icon/ico_pin.svg") no-repeat center / contain;
  margin-top: -0.1em;
}

.info-icon.tel::before {
  background: url("/ec/images/icon/ico_tel.svg") no-repeat center / contain;
}

.info-icon.calendar::before {
  background: url("/ec/images/icon/ico_calendar.svg") no-repeat center / contain;
}

.info-icon.car::before {
  background: url("/ec/images/icon/ico_car.svg") no-repeat center / contain;
}

.info-icon.train::before {
  background: url("/ec/images/icon/ico_train.svg") no-repeat center / contain;
}

.info-text > * + * {
  margin-top: 1.6rem;
}

.shop-concept__content {
  padding: 3.2rem 2.4rem;
  text-align: justify;
}

.shop-concept__title {
  font-size: 1.6rem;
  margin-bottom: 2.4rem;
}

.shop-access {
  display: flex;
}

@media (min-width: 769px) {
  .tel-link {
    pointer-events: none;
    color: inherit;
  }
}

.shop-access {
  display: grid;
  gap: 0 4rem;
  align-items: flex-start;
  grid-template-columns: minmax(0, 5.5fr) minmax(0, 4.5fr);
  grid-template-rows: auto;
  grid-template-areas:
  'shop-map shop-title'
  'shop-map shop-guide'
  'shop-map .';
}

.shop-map {
  grid-area: shop-map;
}
.shop-title {
  grid-area: shop-title;
}
.shop-guide {
  grid-area: shop-guide;
}


@media (max-width: 768px) {
  .shop-layout {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2.4rem;
    grid-template-areas:
      "shop-slide"
      "shop-info"
      "shop-concept";
  }

  .shop-slide {
    margin: 0 -1.5rem;
  }

  .shop-info__name {
    font-size: 1.8rem;
  }

  .shop-concept__content {
    background-color: #fff;
    border-top: 1px solid #eee;
    padding: 3.2rem 0 0;
  }

  .shop-access {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2.4rem;
    grid-template-areas:
      "shop-title"
      "shop-map"
      "shop-guide";
  }

  .shop-map iframe {
    height: 24rem;
  }
}