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

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

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

	/about/sustainability/css/sus.css( = sus_dist.css )
  sustainability内共通
 
========================================
*/

/*SDGs

#gr_contents ul.sdgs_section li {
  @apply py-8 bg-neutral-200 border border-red-500 mb-0;
}

#gr_contents ul.sdgs_section li:nth-child(2n) {
  @apply bg-neutral-300;
}

#gr_contents ul.sdgs_section li h2  {
  @apply flex flex-col justify-start items-start w-fit lg:px-8 mb-4;
}

#gr_contents ul.sdgs_section li h2 span.subtitle {
  @apply border border-red-500 block text-md lg:text-xl p-4 mb-4 w-full text-center;
}

#gr_contents ul.sdgs_section li h2 + p {
  @apply lg:px-8;
}

#gr_contents div.section_list div.section {
  @apply py-8 bg-neutral-200 border border-red-500 mb-0;
}

#gr_contents div.section_list div.section:nth-child(2n) {
  @apply bg-neutral-300;
}

#gr_contents div.section_list div.section h2  {
  @apply flex flex-col justify-start items-start w-fit lg:px-8 mb-4;
}

#gr_contents div.section_list div.section h2 span.subtitle {
  @apply border border-red-500 block text-md lg:text-xl p-4 mb-4 w-full text-center;
}

#gr_contents div.section_list div.section h2 + p {
  @apply lg:px-8;
}*/

#gr_contents div.section_list div.section h2 {
  display: flex;
  flex-direction: column;
  justify-content: center
}

#gr_contents div.section_list div.section h2.sdgs {
  margin-bottom: 1rem;
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start
}

@media (min-width: 1024px) {
  #gr_contents div.section_list div.section h2.sdgs {
    padding-left: 2rem;
    padding-right: 2rem
  }

  #gr_contents div.section_list div.section h2.sdgs + p {
    padding-left: 2rem;
    padding-right: 2rem
  }
}

#gr_contents div.section_list div.section h2.sdgs span.subtitle {
  margin-bottom: 1rem;
  display: block;
  width: 100%;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(112 136 191 / var(--tw-border-opacity));
  padding: 1rem;
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.375rem;
  --tw-text-opacity: 1;
  color: rgb(112 136 191 / var(--tw-text-opacity))
}

@media (min-width: 1024px) {
  #gr_contents div.section_list div.section h2.sdgs span.subtitle {
    font-size: 1.25rem;
    line-height: 1.75rem
  }
}

#gr_contents div.slogan {
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
  display: flex;
  width: 100%;
  max-width: 1280px;
  align-items: center;
  justify-content: center
}

#gr_contents div.sdgs {
  padding-top: 1rem
}

@media (min-width: 1024px) {
  #gr_contents div.sdgs {
    display: flex;
    padding: 2rem
  }

  #gr_contents div.sdgs div.icon {
    width: 41.666667%
  }
}

#gr_contents div.sdgs div.icon ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap
}

#gr_contents div.sdgs div.icon ul li {
  aspect-ratio: 1 / 1;
  width: 6rem;
  padding: 0.125rem
}

@media (min-width: 1024px) {
  #gr_contents div.sdgs div.icon ul li {
    width: 8rem
  }

  #gr_contents div.sdgs div.act {
    width: 58.333333%
  }
}

#gr_contents div.sdgs dl {
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 1rem
}

@media (min-width: 1024px) {
  #gr_contents div.sdgs dl {
    padding: 2rem
  }
}

#gr_contents div.sdgs dl dt {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700
}

@media (min-width: 1024px) {
  #gr_contents div.sdgs dl dt {
    font-size: 1.125rem;
    line-height: 1.75rem
  }
}

/*#gr_contents div.sdgs dl dd --> sus_add.css*/

#gr_contents div.sdgs_photo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0px
}

@media (min-width: 1024px) {
  #gr_contents div.sdgs_photo {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }
}

#gr_contents div.sdgs_photo img {
  aspect-ratio: 3 / 2;
  -o-object-fit: cover;
     object-fit: cover
}