/* ==========================================
   基本設定
   ========================================== */

/*------------　導入事例ページ　------------*/

.page-case main>section{
   margin-bottom: 40px;
}

.page-case section>section{
   margin-bottom: 40px;;
}

.page-case main ul{
   margin-top: 16px;
}

.page-case main li a{
   margin-left: 8px;
   max-width: max-content;
}

.page-case main li p{
   margin-left: 24px;
   margin-bottom: 1rem;
}

.page-case .page-case-desc{
   padding-left: 8px;
   padding-right: 8px;
}

.page-case ul li:not(:last-child) .page-case-desc {
   padding-bottom: 24px;
}

/*------------　各導入事例詳細ページ　------------*/

.page-case-detail section{
   margin-bottom: 40px;
}

.page-case-detail section p{
   padding: 0 1rem;
}

.page-case-detail  p.case-study-lead{
   padding: 0 1rem;
   margin-bottom: 40px;
}

.page-case-detail main ul{
   margin-left: 1rem;
   margin-bottom: 16px;
}

.page-case-detail main img{
   margin-top: 16px;
}

.page-case-detail .case-img-grid{
   display: flex;
   flex-wrap: wrap;
   justify-content: left;
   gap:16px 0;
}

.page-case-detail .case-img-grid figure{
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center;
   align-self: baseline;
}

.cols-2 figure{
   width: 50%;width: calc(50% - 8px);
}

.cols-3 figure{
   width: 33%;width: calc(33% - 8px);
}

.cols-4 figure{
   width: 25%;width: calc(25% - 8px);
}


.page-case-detail .case-img-grid img{
   margin: 0 auto 16px;
}

.page-case-detail .case-img-grid figcaption {
   text-align: left;
}

.page-case-detail .contact-area{
   padding: 40px 32px;
   background-color: #ebf4fe;
   margin: 3rem auto;
}

.page-case-detail .contact-area h2{
   width: 100%;
   max-width: max-content;
   margin:0 auto 32px;
   text-align: left;
   font-size: 1.1em;

}

.page-case-detail .contact-lead{
   width: 100%;
   max-width: max-content;
   margin:0 auto 32px;
   text-align: left;
}

.case-study-table{
   margin-bottom: 16px;
   max-width: max-content;
}


/* ==========================================
   タブレットサイズ以上 (1024px ~)
   ========================================== */

@media (min-width: 1024px) {

}

/* ==========================================
   モバイルサイズ以上 / Desktop Small (768px ~)
   ========================================== */

@media (min-width: 768px) {

}

/* ==========================================
   タブレットサイズ以下 (1024px ~)
   ========================================== */

@media (max-width: 1023px) {

}

/* ==========================================
   モバイルサイズ以下 (1024px ~)
   ========================================== */

@media (max-width: 767px) {

   .page-case-detail img{
      margin: 16px auto 0;
   }

   .page-case-detail .case-img-grid figure{
      width: 100%;
      text-align: center;
   }

   .page-case-detail .case-img-grid figure:not(:last-child){
      margin-bottom: 24px;
   }

   .page-case-detail main .related-cases ul{
      margin-left: 0;
   }

}