@charset "utf-8";
.shopdetail_container{
  margin: 0 auto;
}

.shopdetail_slide_contents{
  perspective-origin: bottom;
  position: absolute;
}

.shopdetail_container .childpage_ttl{
  margin: 0 auto clamp(3.438rem, 2.813rem + 2.5vw, 3.75rem);
}

.shopdetail_container .article_area{
  padding: 0 calc(var(--space-side) + var(--space-inner-side));
}

.shopdetail_slide_contents .swiper-slide{
  width: clamp(15.625rem, -3.219rem + 75.38vw, 25rem);
  height: clamp(15.625rem, -3.219rem + 75.38vw, 25rem);
  max-width: 70%;
  margin: 0 auto;
  background-color: #fff;
}

.shopdetail_slide_contents .swiper-slide:not(.swiper-slide-active) img{
  opacity: 60%;
}

.shopdetail_slide_contents .swiper-slide img{
  margin: 0 auto;
  width: 100%;
  height: inherit;
  object-fit: contain;
}

@media (600px <= width) {
  .shopdetail_container .childpage_ttl{
    margin: 0 auto min(8vw, 81px);
  }

  .shopdetail_slide_contents .swiper-slide{
    width: clamp(25rem, -2.5rem + 73.33vw, 31.875rem);
    height: clamp(25rem, -2.5rem + 73.33vw, 31.875rem);
  }
}

@media (1024px < width) {
  .shopdetail_container{
    position: relative;
  }
  
  .shopdetail_container .childpage_ttl{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    margin: 0 auto;
  }

  .shopdetail_slide_container{
    padding: 0 calc(var(--space-side) + var(--space-inner-side));
  }
}

.shop_profile_contents{
  margin: min(10.666vw, 80px) auto min(13.333vw, 100px);
  display: grid;
  grid-template-columns: max-content 1fr clamp(5.938rem, -0.621rem + 32.79vw, 14.75rem);
  grid-template-rows: auto 1fr;
  gap: min(4vw, 30px) 0;
}

.shop_date{
  grid-column: 2 / 4;
  grid-row: 1 / 2;
  letter-spacing: .06em;
  padding: 0 0 0 42px;
  justify-self: end;
  align-self: end;
}

.shop_date time{
  font-size: clamp(1rem, 0.143rem + 3.43vw, 1.75rem);
}

.shop_date .badge_new{
  margin: 0 24px 0 0;
  font-size: clamp(1rem, -0.143rem + 4.57vw, 2rem);
}

.shop_date .badge_new_vshape::before, .badge_new_vshape::after{
  bottom: 4px;
}

.shop_date .badge_new_vshape::before{
  left: -8px;
}

.shop_date .badge_new_vshape::after{
  right: -4px;
}

.shop_floor{
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  width: 100%;
  min-width: 40px;
  height: 40px;
  line-height: 38px;
  background-color: var(--color-primary);
  color: #fff;
  font-family: var(--font-en);
  font-size: clamp(1.25rem, 0.321rem + 3.71vw, 2.063rem);
  text-align: center;
  font-weight: var(--font-medium);
  padding: 0 10px;
}

.shop_name_contents{
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  display: grid;
  grid-template-rows: 1fr repeat(2, auto);
  padding: 0 min(5.333vw, 40px) 0 0;
}

.shop_name, .shop_category{
  font-weight: var(--font-semibold);
}

.shop_name{
  font-size: clamp(1.125rem, -0.018rem + 4.57vw, 2.125rem);
  letter-spacing: .025em;
  margin: 0 0 20px;
}

.shop_name_ruby, .shop_category{
  letter-spacing: .05em;
}

.shop_name_ruby{
  font-weight: var(--font-light);
  font-size: clamp(0.938rem, 0.723rem + 0.86vw, 1.125rem);
  margin: 0 0 min(4vw, 30px);
}

.shop_category{
  font-size: clamp(1rem, 0.571rem + 1.71vw, 1.375rem);
}

.shop_logo{
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  width: 100%;
  height: clamp(3.688rem, -0.545rem + 21.16vw, 9.375rem);
  border: 1px solid var(--color-border-img);
}

.shop_logo img{
  object-fit: contain;
  height: calc(clamp(3.688rem, -0.545rem + 21.16vw, 9.375rem) - 2px);
  margin: 0 auto;
}

@media (600px <= width) {
  .shop_profile_contents{
    grid-template-columns: max-content 1fr clamp(5.938rem, -0.621rem + 32.79vw, 14.75rem);
  }

  .shop_date .badge_new_vshape::before, .badge_new_vshape::after{
    bottom: 7px;
  }
  
  .shop_date .badge_new_vshape::before{
    left: -10px;
  }
  
  .shop_date .badge_new_vshape::after{
    right: -6px;
  }

  .shop_floor{
    min-width: 60px;
    height: 60px;
    line-height: 55px;
  }
}

@media (1024px < width) {
  .shop_profile_contents{
    max-width: 900px;
    margin: 85px auto 80px;
    grid-template-columns: max-content auto minmax(12.291vw, 236px);
    grid-template-rows: auto 1fr;
    gap: 0;
  }

  .shop_date{
    grid-column: 2 / 3;
    padding: 0 0 0 42px;
    margin: 0 0 10px;
    justify-self: start;
    align-self: start;
  }

  .shop_date time{
    font-size: clamp(1.25rem, 0.518rem + 1.14vw, 1.375rem);
  }

  .shop_date .badge_new{
    font-size: 1rem;
  }

  .shop_date .badge_new_vshape::before, .badge_new_vshape::after{
    bottom: 4px;
  }

  .shop_date .badge_new_vshape::before{
    left: -6px;
  }

  .shop_date .badge_new_vshape::after{
    right: -4px;
  }

  .shop_floor{
    grid-row: 2 / 3;
    min-width: 37px;
    height: 37px;
    line-height: 30px;
    font-size: 1.125rem;
  }

  .shop_name_contents{
    grid-column: 2 / 3;
    padding: 0 min(4.687vw, 90px) 0 min(2.083vw, 40px);
  }

  .shop_logo{
    grid-column: 3 / 4;
    grid-row: 1 / 3;
    height: 150px;
  }

  .shop_logo img{
    height: 148px;
  }

  .shop_name{
    font-size: clamp(1.188rem, 0.089rem + 1.71vw, 1.375rem);
    margin: 0 0 10px;
  }

  .shop_name_ruby{
    font-size: .75rem;
    margin: 0 0 6px;
  }

  .shop_category{
    font-size: .875rem;
  }
}

.shop_detail_contents{
  margin: min(10.666vw, 80px) 0 min(13.333vw, 100px);
}

.shop_detail_list{
  display: grid;
  grid-template-columns: 35% 65%;
  border-bottom: 1px solid var(--color-base);
  font-weight: var(--font-semibold);
  letter-spacing: .025em;
  padding: 24px 0;
}

.shop_detail_list > dt{
  grid-column: 1 / 2;
  font-size: clamp(0.938rem, 0.295rem + 2.57vw, 1.5rem);
  line-height: 1.45;
}

.shop_detail_list > dd{
  grid-column: 2 / 3;
  font-size: clamp(0.875rem, 0.304rem + 2.29vw, 1.375rem);
  line-height: 1.45;
}

.shop_detail_list a{
  display: inline;
  word-break: break-all;
  transition: opacity var(--hover-animation);
}

.shop_detail_list a:hover{
  opacity: var(--hover-opacity);
}

.shop_detail_list span{
  display: none;
}

.detail_service_lists{
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 30px;
}

.detail_sns_lists{
  display: flex;
}

.detail_service_lists dd{
  position: relative;
}

.detail_service_lists dd[aria-label="あり"]::after, .detail_service_lists dd[aria-label="なし"]::after, .detail_service_lists dd[aria-label="なし"]::before{
  content: "";
  position: absolute;
  line-height: 2;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.detail_service_lists dd[aria-label="なし"]::after, .detail_service_lists dd[aria-label="なし"]::before{
  width: 1px;
  height: 16px;
  left: 7px;
  background-color: var(--color-base);
}

.detail_service_lists dd[aria-label="なし"]::after{
  transform: translateY(-50%) rotate(45deg);
}

.detail_service_lists dd[aria-label="なし"]::before{
  transform: translateY(-50%) rotate(-45deg);
}

.detail_service_lists dd[aria-label="あり"]::after{
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-base);
  border-radius: 50%;
}

.detail_sns_lists li{
  width: 30px;
  aspect-ratio: 1 / 1;
}

.detail_sns_lists li:not(:last-of-type){
  margin: 0 20px 0 0;
}

@media (600px <= width) {
  .shop_detail_list{
    grid-template-columns: 40% 60%;
    padding: 35px 0;
  }

  .detail_service_lists dd[aria-label="なし"]::after, .detail_service_lists dd[aria-label="なし"]::before{
    height: 20px;
    left: 9px;
  }
  
  .detail_service_lists dd[aria-label="あり"]::after{
    width: 20px;
    height: 20px;
  }

  .detail_sns_lists li:not(:last-of-type){
    margin: 0 7.46% 0 0;
  }

  .detail_sns_lists li{
    width: 46px;
  }
}

@media (1024px < width) {
  .shop_detail_contents{
    margin: 100px 0;
  }

  .shop_detail_list{
    grid-template-columns: 20% 80%;
    padding: 25px 0;
  }

  .shop_detail_list > dt{
    font-size: 1.063rem;
    line-height: 2;
  }
  
  .shop_detail_list > dd{
    font-size: 1rem;
    line-height: 2;
  }

  .shop_detail_list span{
    display: inline;
    margin: 0 .5rem;
  }

  .detail_service_lists{
    gap: 0;
  }

  .detail_service_lists, .detail_sns_lists{
    display: flex;
  }

  .detail_service_lists dt:not(:first-of-type){
    margin: 0 0 0 40px;
  }

  .detail_service_lists dd, .detail_service_lists dd[aria-label="なし"]{
    margin: 0 0 0 10px;
  }

  .detail_service_lists dd[aria-label="なし"]::after, .detail_service_lists dd[aria-label="なし"]::before{
    height: 1rem;
  }
  
  .detail_service_lists dd[aria-label="あり"]::after{
    width: 1rem;
    height: 1rem;
  }

  .detail_sns_lists li{
    width: 25px;
  }

  .detail_sns_lists li:not(:last-of-type){
    margin: 0 30px 0 0;
  }
}
/*
.btn_primary_contents{
  display: flex;
  justify-content: center;
  flex-direction: column;
}
*/
.btn_primary_contents .btn_primary{
  min-height: clamp(3.438rem, 0.223rem + 12.86vw, 6.25rem);
  width: 90%;
  max-width: 380px;
  margin: 0 auto;
  color: #fff;
}

.btn_primary_contents .btn_reserve{
  margin: 0 auto min(10.666vw, 80px);
}

.btn_primary_contents .btn_primary a{
  grid-template-columns: repeat(3, auto);
}

.btn_reserve a::before, .btn_order a::before{
  content: "";
  display: inline-block;
  background-size: contain;
  vertical-align: middle;
  margin: 0 10px 0 0;
  justify-self: end;
}

.btn_reserve a::before{
  width: 30px;
  height: 27px;
  background-image: url("../images/icon_netreserve.svg");
}

.btn_order a::before{
  width: 19px;
  height: 30px;
  background-image: url("../images/icon_netorder.svg");
}

.shopdetail_container .freespace_contents{
  margin: min(20vw, 150px) 0;
}

.othernews_container{
  background-color: var(--color-bg-gray);
  padding: min(12vw, 90px) 0 0;
  margin: min(20vw, 150px) 0 0;
}

.othernews_contents{
  margin: 0 auto;
}

.othernews_contents .result_contents{
  padding: 0 calc(var(--space-side) + var(--space-inner-side)) 10px;
  margin: 0;
}

.btn_container_shopguide{
  background-color: var(--color-bg-gray);
  padding: min(8vw, 60px) 0 0;
  position: relative;
}

.btn_container_shopguide::after{
  content: "";
  width: 100%;
  height: 150px;
  background-color: var(--color-bg-gray);
  position: absolute;
  z-index: -1;
}

.btn_shopguide{
  margin: 0 auto;
  padding: 0 calc(var(--space-side) + var(--space-inner-side));
  display: flex;
  justify-content: center;
}

.btn_shopguide .btn_primary{
  width: 90%;
  max-width: 380px;
}

@media (400px <= width) {
  .btn_primary_contents .btn_primary{
    width: 85%;
  }

  .btn_shopguide .btn_primary{
    width: 85%;
  }
}

@media (600px <= width) {
  .btn_primary_contents .btn_primary{
    width: 66.6%;
  }
  
  .btn_reserve a::before{
    width: 48px;
    height: 43px;
  }
  
  .btn_order a::before{
    width: 31px;
    height: 48px;
  }

  .btn_shopguide .btn_primary{
    width: 66.6%;
  }
}

@media (1024px < width) {
  .btn_primary_contents{
    display: flex;
    justify-content: center;
    flex-direction: row;
  }

  .btn_primary_contents .btn_primary{
    min-height: 70px;
    width: 333px;
    margin: 0;
  }

  .btn_primary_contents .btn_reserve{
    margin: 0 75px 0 0;
  }

  .btn_shopguide{
    justify-content: flex-end;
  }

  .btn_shopguide .btn_primary{
    width: auto;
  }

}