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

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

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

	/business/case/css/case.css( = case_dist.css )
 
========================================
*/

.case_wrapper {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

@media (min-width: 640px) {
  .case_wrapper {
    padding: 1rem;
  }
}

.case_wrapper {
  /*ガイド*/
}

.cases_list {
  position: relative;
  min-height: 75vh;
  width: 100%;
  padding-bottom: 6rem;
}

.filter_menu {
  width: 100%;
}

@media (min-width: 1024px) {
  .filter_menu {
    padding: 0.25rem;
  }
}

@media (min-width: 1440px) {
  .filter_menu {
    padding: 1rem;
  }
}

.filter_menu {
  /*ガイド*/
}

.filter_menu h2.title {
  margin-bottom: 1rem;
  text-align: center;
}

/*
.filter_menu h3.title span.note {
  @apply flex justify-center text-sm text-left leading-more_relaxed;
}

.filter_menu h4.tagtitle {
  @apply bg-stone-700 lg:bg-stone-700 text-paper px-8 py-2 text-center font-medium lg:py-4;
}

.filter_menu h4.recommend {
  @apply border-t-2 border-stone-700 text-stone-800 px-8 py-2 text-center font-bold lg:py-4 mt-4;
}

.filter_menu hr {
  @apply mt-4 h-4;
}

h4.pickup {
  @apply px-8 py-2 text-center font-medium;
}

.filter_menu div.pickup_box01 {lg以上のサイドメニュー表示
  @apply hidden lg:block;
}

div.pickup_box02 { lg以下のサイドメニュー表示用
  @apply bg-paper order-3 lg:hidden flex flex-col items-center justify-center w-full py-8;
}*/

div.cases_list a.selectback  {
  /*スマホ表示用　選択結果の最上段から再びカテゴリ検索へ*/
  display: flex;
  align-items: center;
  justify-content: center;
  --tw-bg-opacity: 1;
  background-color: rgb(41 37 36 / var(--tw-bg-opacity));
  padding: 1rem;
  padding-top: 1.25rem;
  text-align: right;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

/*hero

.main_title {
  @apply lg:max-w-custom relative mx-auto w-full px-4 pt-8 pb-4;
}

.main_title .title_box {
  @apply mx-auto flex w-full max-w-screen-lg flex-col items-center justify-center;
}

.main_title .title_box p {
  @apply w-fit mx-auto text-center lg:my-1;
}

.main_title .title_box h2,
.main_title .title_box h3 {
  @apply text-center;
}

.main_title .title_box h2 span.num {
  @apply text-xl sm:text-2xl tracking-normal block;
}

.main_title .title_box h2 span.num_dp {装飾系
  @apply text-xl sm:text-2xl tracking-normal block;
}

.main_title .title_box h2 span.num_sk {手書き風
  @apply text-xl sm:text-2xl tracking-normal block;
}

.main_title .title_box h3 span.num {
  @apply text-3xl tracking-normal sm:text-4xl lg:text-5xl block;
}

.main_title .title_box h3 span.num_dp {装飾系
  @apply text-3xl tracking-normal sm:text-4xl lg:text-5xl block my-3;
}

.main_title .title_box h3 span.num_sk {手書き風
  @apply text-3xl tracking-normal sm:text-4xl lg:text-5xl block;
}*/

/*hero top page only

.main_title.top {
  @apply px-1 pt-16 pb-8 md:px-24 lg:px-8 lg:pt-20 lg:pb-12;
}

.main_title.top .title_box {
  @apply mx-auto flex w-full max-w-4xl flex-col items-center justify-center;
}

.main_title.top .title_box h2 span.num {
  @apply text-4xl tracking-normal sm:text-5xl lg:text-6xl xl:text-7xl block;
}

.main_title.top .title_box h2 span.num_dp {装飾系
  @apply text-3xl tracking-normal sm:text-4xl lg:text-5xl xl:text-6xl block bg-paper;
}

.main_title.top .title_box h2 span.num_sk {手書き風
  @apply text-4xl tracking-normal sm:text-5xl lg:text-6xl xl:text-7xl block;
}

.main_title.top .title_box p {
  @apply my-4 lg:my-6 text-center leading-loose;
}*/

/*case_card*/

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

@media (min-width: 768px) {
  .case_card {
    padding-bottom: 2rem;
  }
}

@media (min-width: 1024px) {
  .case_card {
    display: block;
    padding-bottom: 6rem;
  }
}

a.case_card {
  /*リンクあり*/
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  border-width: 1px;
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
  padding: 1rem;
  padding-bottom: 6rem;
  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.case_card:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  --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: 768px) {
  a.case_card {
    padding-bottom: 2rem;
  }
}

@media (min-width: 1024px) {
  a.case_card {
    display: block;
    padding-bottom: 6rem;
  }
}

.case_card img.card_img {
  margin-right: 1rem;
  aspect-ratio: 1 / 1;
  width: 25%;
  border-width: 1px;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (min-width: 640px) {
  .case_card img.card_img {
    aspect-ratio: 3 / 2;
    width: 40%;
  }
}

@media (min-width: 1024px) {
  .case_card img.card_img {
    margin: 0px;
    aspect-ratio: 16 / 9;
    width: 100%;
  }
}

.case_card picture {
  /*picture*/
  margin-right: 1rem;
  width: 25%;
}

@media (min-width: 640px) {
  .case_card picture {
    width: 40%;
  }
}

@media (min-width: 1024px) {
  .case_card picture {
    margin: 0px;
    width: 100%;
  }
}

.case_card picture img.card_img {
  /*picture内の画像*/
  margin-left: 0px;
  aspect-ratio: 1 / 1;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (min-width: 640px) {
  .case_card picture img.card_img {
    aspect-ratio: 3 / 2;
  }
}

@media (min-width: 1024px) {
  .case_card picture img.card_img {
    aspect-ratio: 16 / 9;
  }
}

.case_card div.card_box {
  width: 75%;
}

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

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

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

.case_card p.title {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  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) {
  .case_card p.title {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

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

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

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

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

.case_card .text {
  /*p ul span 共通*/
  margin-bottom: 2rem;
  padding: 0.5rem;
  font-weight: 500;
  line-height: 1.5;
}

@media (min-width: 640px) {
  .case_card .text {
    margin-bottom: 1.5rem;
  }
}

.case_card p.text {
  /*p ul span 共通*/
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .case_card p.text {
    margin-bottom: 5rem;
  }
}

@media (min-width: 1024px) {
  .case_card p.text {
    margin-bottom: 1.5rem;
  }
}

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

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

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

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

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