/*
@tailwind base; ---> base_group.css
@tailwind components; ---> base_group.css
@tailwind utilities; ---> base_group.css
*/

/*@layer components  {----@layer don’t use*/

/*
========================================

	/business/amenity/css/amenity.css( = amenity_dist.css )
 
========================================
*/

.works_modal_content div.sheet div.boxes {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 640px) {
  .works_modal_content div.sheet div.boxes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .works_modal_content div.sheet div.boxes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .works_modal_content div.sheet div.boxes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1440px) {
  .works_modal_content div.sheet div.boxes {
    margin-left: -4rem;
    margin-right: -4rem;
  }
}

/*modal_card*/

.modal_card {
  /*リンクなし*/
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  border-width: 1px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 1rem;
}

@media (min-width: 1024px) {
  .modal_card {
    display: block;
  }
}

a.modal_card {
  /*リンクあり*/
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  border-width: 1px;
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
  padding: 1rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

a.modal_card:hover {
  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

@media (min-width: 640px) {
  a.modal_card {
    display: block;
  }
}

.modal_card img.card_img {
  margin-right: 1rem;
  aspect-ratio: 1 / 1;
  width: 25%;
  border-width: 1px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  -o-object-fit: contain;
     object-fit: contain;
}

@media (min-width: 640px) {
  .modal_card img.card_img {
    margin: 0px;
    aspect-ratio: 16 / 9;
    width: 40%;
  }
}

@media (min-width: 1024px) {
  .modal_card img.card_img {
    width: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
}

.modal_card div.card_box {
  position: relative;
  width: 75%;
}

@media (min-width: 640px) {
  .modal_card div.card_box {
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .modal_card div.card_box {
    padding-top: 0.75rem;
  }
}

.modal_card div.card_box img.new {
  margin-top: -0.25rem;
  height: 2.25rem;
}

.modal_card p.title {
  margin-bottom: 1rem;
  margin-top: 0.5rem;
  display: inline-block;
  width: 100%;
  border-bottom-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(68 64 60 / var(--tw-border-opacity));
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
}

@media (min-width: 1024px) {
  .modal_card p.title {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

.modal_card p.title span.title_s {
  display: inline-block;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

@media (min-width: 1024px) {
  .modal_card p.title span.title_s {
    font-size: 0.9375rem;
    line-height: 1.375rem;
  }
}

.modal_card p.title span.title_l {
  display: inline-block;
  padding-bottom: 0.75rem;
  padding-top: 0.25rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
}

@media (min-width: 1024px) {
  .modal_card p.title span.title_l {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.modal_card .text {
  /*p ul span 共通*/
  font-size: 0.75rem;
  line-height: 1rem;
}

.modal_card p.text span.text_l {
  display: block;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
}

@media (min-width: 1024px) {
  .modal_card p.text span.text_l {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

.modal_card p.text span.text_s {
  display: inline-block;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

@media (min-width: 1024px) {
  .modal_card p.text span.text_s {
    font-size: 0.9375rem;
    line-height: 1.375rem;
  }
}

.modal_card .card_tag {
  display: none;
}

.modal_card .card_footer {
  position: absolute;
  bottom: 0px;
  top: auto;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  font-size: 0.75rem;
  line-height: 1rem;
}

/*extlink btn --> case_add.css*/