@charset "UTF-8";
.case_archive_title {
  text-align: center;
  font-size: clamp(24px, 22px + 0.7vw, 32px);
  margin-top: 48px;
  position: relative;
}
.case_archive_title::after {
  position: absolute;
  content: "";
  display: block;
  width: 100px;
  height: 3px;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #44AE35;
}
.heading{
  margin: 40px 0 32px;
}
.heading h2{
  font-size: clamp(18px, 15.5px + 0.7vw, 24px);
  margin-bottom: 0.618em;
  text-align: center;
}
.heading p{
  font-size: clamp(14px, 11px + 0.7vw, 16px);
  text-align: center;
}
.logo_carousel{
  margin-bottom: 32px;
}
.filtering{
  padding: 0px 2px 40px;
}
.case_filter_box{
  background: #F3FAF3;
  width: 100%;
  margin: 0 auto;
  border-radius: 8px;
  position: relative;
  padding: 16px 8px;
}
/* 一部ブラウザ */
.case_filter_box summary::-webkit-details-marker {
  display:none;
}
.case_filter_box details summary{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  position: relative;
}
.case_filter_box details summary::after{
  content: '';
  position: absolute;
  display: block;
  background: url(../images/icon_acco_down.svg) 50% 50% no-repeat;
  background-size: contain;
  width: 1em;
  height: 1em;
  right: 8px;
}
.case_filter_box details[open] summary::after{
  transform: rotateX(180deg);
}
.case_filter_box details summary img{
  width: 14px;
  height: 14px;
  object-fit: contain;
}
.case_filter_box details summary span{
  font-weight: bold;
  font-size: 14px;
}
.filter_conditions{
  border-top: 1px solid #D0EBCD;
  margin-top: 16px;
}
.filter_group{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.filter_group h3{
  width: 100%;
  font-size: 14px;
  margin-bottom: 10px;
}
.filter_group ul{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
}
.filter_group ul li input[type="checkbox"]{
  display: none;
}
.filter_group ul li label{
  display: block;
  color: #1C1C1C;
  background-color: #ffffff;
  border: 1px solid #BDBDBD;
  border-radius: 4px;
  font-size: 12px;
  padding: 8px 10px;
}
/* 選択（チェック）状態 */
.filter_group ul li label:has(:checked){
  background:#61BB55;   /* 緑背景 */
  color:#fff;           /* 白文字 */
  border:1px solid #61BB55;
}

/* 選択状態での hover は見た目を固定（変化させない） */
.filter_group ul li label:has(:checked):hover{
  background:#61BB55;
  color:#fff;
  border:1px solid #61BB55;
  box-shadow:none;
}

.filter_group ul li label:hover{
  background-color: #fff;
  color: #61BB55;
  border: 1px solid #61BB55;
}

.filtering_reset{
  position: relative;
  display: table;
  margin: 20px 0 0 auto;
  font-size: 14px;
  padding: 4px;
  font-weight: bold;
  color: #38CA69;
  cursor: pointer;
}
.filtering_reset:hover{
  color: #23B553;
}
.case_articles{
  background: #F5F5F5;
  position: relative;
  padding: 56px 2px;
}
.case_articles::before{
  content: '';
  position: absolute;
  width: 100vw;
  height: 100%;
  z-index: 0;
  background: #f5f5f5f5;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.case_article_list{
  padding: 0 2px 0;
  display: grid;
  gap: 24px;
  position: relative;
  z-index: 2;
}
.case_article_item{
  background: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
  transition: 0.24s ease;
}
.case_article_item:hover{
  box-shadow: 0 4px 13px 0px rgba(0, 0, 0, 0.1);
  opacity: 0.9;
}
.case_article_item a{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.case_article_item a > img{
  aspect-ratio: 3/2;
  object-fit: cover;
}
.case_text_box{
  padding: 20px;
  flex: auto;
  display: flex;
  flex-direction: column;
}
.case_title{
  color: #1C1C1C;
  font-size: 16px;
  margin-bottom: 0;
}
.case_company_name{
  color: #1C1C1C;
  font-size: 14px;
  font-weight: bold;
}
.case_category{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 24px 0 32px;
}
.case_category span{
  color: #757575;
  padding-right: 6px;
}
.case_category span:not(:last-of-type)::after{
  content: "|";
  position: relative;
  left: 6px;
}
.read_post{
  font-size: 14px;
  font-weight: bold;
  text-align: right;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5em;
  margin-top: auto;
  color: #38CA69;
}
.read_post::after{
  content: '';
  width: 1em;
  height: 1em;
  background: url(../images/icon_link_right.svg) 50% 50% no-repeat;
  background-size: contain;
}
.case_article_item a:hover .read_post{
  color: #23B553;
}
#more_case_btn{
  display: flex;
  justify-content: center;
  align-items: center;
  color: #44AE35;
  background-color: #fff;
  position: relative;
  z-index: 5;
  width: 300px;
  height: 60px;
  border-radius: 12px;
  border: 2px solid #44AE35;
  font-size: 16px;
  font-weight: bold;
  margin: 40px auto 0;
}
.case-noresult{
  text-align: center;
  grid-column: auto / span 3;
  font-size: clamp(13px, 10px + 0.7vw, 20px);
}


@media screen and (min-width:768px) {
  .case_filter_box{
    width: calc(100% - 32px);
  }
  .case_article_list{
    width: calc(100% - 32px);
    margin: 0 auto;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
    .case_title{
    min-height: 104px;
  }
}
@media screen and (min-width:920px) {
  .case_archive_title::after {
  width: 150px;
}
.heading{
  margin: 48px 0 40px;
}

  .case_filter_box{
    width: calc(100% - 32px);
    max-width: 1200px;
    padding: 40px 64px 40px 56px;
  }
  .case_filter_box details summary{
    justify-content: center;
    pointer-events: none;
    cursor: default;
  }
  .case_filter_box details summary::after{
    content: none;
  }
  .case_filter_box details summary span{
    font-size: 16px;
  }
  .case_filter_box details summary img{
    width: 16px;
    height: 16px;
  }
  .filter_group {
    align-items: baseline;
    gap: 0;
  }
  .filter_group h3{
    width: 180px;
  }
  .filter_group ul{
    width: calc(100% - 180px);
  }
  .filtering_reset{
    position: absolute;
    margin: 0;
    top: 40px;
    right: 64px;
  }
  .case_article_list{
    max-width: 1200px;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
  }
  .case_title{
    min-height: 77px;
  }
  .case_text_box{
    border: 2px solid #D9D9D9;
    border-top: none;
    border-radius: 0 0 8px 8px;
  }
  #more_case_btn:hover {
    background: #E8F5E6;
  }
}
@media screen and (min-width:1200px) {

}




/*-------導入事例紹介記事ページ------*/
.case_article{
  position: relative;
}
.case_header{
  position: static;
  background: #fff;
  padding-top: 24px;
  overflow: hidden;
}
.case_header_inner{
  width: calc(100% - 24px);
  max-width: 720px;
  margin-inline: auto;
}
.case_article_title{
  font-size: clamp(16px, 13.7px + 0.5797vw, 20px);
  position: relative;
  margin-bottom: 1em;
  padding: 0 16px;
}
.case_article_title::before{
  content: '';
  position: absolute;
  background: url(../images/icon_dq_before.svg) 50% 50% no-repeat;
  background-size: contain;
  top: -0.414em;
  left: -0.414em;
  width: 1em;
  height: 1em;
}
.case_article_title::after{
  content: '';
  position: absolute;
  background: url(../images/icon_dq_after.svg) 50% 50% no-repeat;
  background-size: contain;
  bottom: -0.414em;
  right: -0.414em;
  width: 1em;
  height: 1em;
}
.case_eyecatch{
  position: relative;
  z-index: 1;
}
.case_eyecatch::before{
  content: '';
  position: absolute;
  width: 100vw;
  height: 200%;
  background: #E8F5E6;
  top: 75%;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
.case_eyecatch img{
  width: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.article_summary{
  background-color: #fff;
  box-shadow: 0px 1px 10px 5px rgba(0,0,0,0.08);
  border-radius: 8px;
  width: calc(100% - 30px);
  max-width: 480px;
  margin: -3em auto 0;
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
}
.article_summary h2{
  font-size: clamp(10px, 7px + 0.75vw, 14px);
  padding: 4px 16px;
  background: #44AF35;
  color: #ffffff;
  border-radius: 8px 0 8px 0;
}
.a_summary_before{
  width: 100%;
  padding: 0 12px;
}
.a_summary_after{
  width: 100%;
  padding: 0 12px 12px;
}
.separator{
  width: calc(100% - 24px);
  height: 1px;
  margin: 0 auto;
  background: #BDBDBD;
}
.article_summary h3{
  color: #44AE35;
  font-size: 10px;
}
.article_summary p{
  font-size: 10px;
  padding-left: 1em;
  position: relative;
}
.article_summary p::before{
  content: '・';
  position: absolute;
  left: 0em;
}
@media screen and (min-width:768px){
  .case_header{
    padding-top: 16px;
  }
  .case_eyecatch img{
  }
  .article_summary{
    width: calc(100% - 100px);
    max-width: 800px;
    min-height: 112px;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    gap: 0;
    margin: -5em auto 0;
  }
  .article_summary h2{
    padding: 0px 16px;
    border-radius: 8px 0 0 8px;
    writing-mode: vertical-rl;
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 0.2em;
  }
  .a_summary_before{
    width: 50%;
    flex: auto;
    padding: 16px 12px;
  }
  .a_summary_after{
    width: 50%;
    flex: auto;
    padding: 16px 12px;
    position: relative;
  }
  .separator{
    width: 1px;
    height: auto;
    margin: 16px 0;
  }
  .article_summary h3{
    color: #44AE35;
    font-size: 14px;
  }
  .article_summary p{
    font-size: 11px;
  }
}
@media screen and (min-width:1080px){
  .case_header_inner{
    max-width: 800px;
  }
  .case_eyecatch img {
    height: 350px;
  }
  .case_eyecatch::before{
    top: 324px;
  }
  .article_summary{
    /* margin: -6em auto 0; */
    margin: 0 auto;
    transform: translateY(calc(-100% + 32px));
    height: 138px;
  }
  .a_summary_before,.a_summary_after{
    padding: 12px 8px 8px;
    gap: 1px;
    display: flex;
    flex-direction: column;
  }
  .article_summary p{
    font-size: 13px;
  }
}


.case_article_cta{
  text-align: center;
  font-weight: bold;
  position: relative;
  z-index: 2;
  margin-top: 40px;
}
.w_hands{
  position: relative;
  display: table;
  margin: 0 auto 0.618em;
  font-size: 16px;
  color: #000000;
}
.w_hands::before{
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  background: #000000;
  position: relative;
  transform: translateX(-1em) translateY(0.2em) rotate(-20deg);
}
.w_hands::after{
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  background: #000000;
  position: relative;
  transform: translateX(1em) translateY(0.2em) rotate(20deg);
}
.case_body{
  padding: 64px 0 80px;
  background: #E8F5E6;
}
.case_inner{
  width: calc(100% - 24px);
  max-width: 1000px;
  margin-inline: auto;
  background: #ffffff;
  padding: 56px 16px 40px;
  border-radius: 8px;
}
.case_meta{
  padding: 0 16px;
}
.case_meta .customer_name{
  font-size: clamp(16px, 13px + 1vw, 24px);
  margin-bottom: 0.618em;
}
.case_meta .customer_descr{
  font-size: clamp(14px, 12.87px + 0.2899vw, 16px);
}
.customer_data{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: baseline;
  padding-bottom: 24px;
  border-bottom: 1px solid #BDBDBD;
  margin: 16px 0 32px;
  gap: 0.618em 16px;
}
.customer_data dt{
  width: 64px;
  font-size: 14px;
  font-weight: bold;
}
.customer_data dd{
  width: calc(100% - 80px);
  font-size: 14px;
}
.customer_data dd a{
  text-decoration: underline;
  font-size: inherit;
  color: #38CA69;
}
.customer_data dd a:hover{
  color: #23B553;
  text-decoration: none;
}

.case_wp_content{
  padding: 0 16px;
}
.case_wp_content h2,.this_case_service h3{
  font-size: clamp(16px, 13px + 1vw, 24px);
  padding: 0.5em 0 0.4em 0.7em;
  margin: 2em 0 1em;
  background-color: #E8F5E6;
  border-left: 4px solid #44AE35;
}
/* .case_wp_content h2::before,.this_case_service h3::before{
  content: '';
  display: inline-block;
  width: 4px;
  background: #44AE35;
  top: 0.2em;
  left: -0.618em;
  position: relative;
} */
.case_wp_content h3,
.case_wp_content h4,
.case_wp_content h5,
.case_wp_content h6{
  font-size: clamp(14px, 11px + 0.7vw, 20px);
  margin: 1.2em 0 0.618em;
  padding: 0;
}
.case_wp_content > h3,
.case_wp_content > h4,
.case_wp_content > h5,
.case_wp_content > h6{
  padding-left: 0.7em;
  border-left: 4px solid #44AE35;
}
.case_wp_content p,
.case_wp_content ul,
.case_wp_content ul li,
.case_wp_content ol,
.case_wp_content ol li,
.case_wp_content table,
.this_case_service p{
  font-size: clamp(14px, 11px + 0.5vw, 16px);
  margin-top: 1em;
}
.case_wp_content ul li:last-child,
.case_wp_content ol li:last-child{
  margin-bottom: 0em;
}
.this_case_service{
  padding: 0 16px;
  margin-top: 5em;
}
@media screen and (min-width:768px){
  .case_inner{
    width: calc(100% - 48px);
    padding: 88px 0px 96px;
    border-radius: 8px;
  }
  .case_meta,.case_wp_content,.this_case_service{
    max-width: 800px;
    margin-inline: auto;
  }
  .customer_data dt,.customer_data dd{
    font-size: 16px;
  }
  .case_header .case_article_cta{
    margin-top: 1em;
  }
}
@media screen and (min-width:1080px){
  .case_body{
    padding-top: 0;
  }
  .case_header .case_article_cta{
    margin-top: 0em;
    bottom: 80px;
  }
}
/*---- .case_aside ----*/
.case_aside{
  background: #fff;
}
.related_cases{
  padding: 80px 0;
}
.related_cases h2{
  text-align: center;
}
.related_cases_grid{
  width: calc(100% - 24px);
  margin: 40px auto 40px;
}
.related_cases_grid .case_article_item{
  background: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
}
.related_cases_grid .case_article_item .case_text_box {
  border: 2px solid #D9D9D9;
  border-top: none;
  border-radius: 0 0 8px 8px;
}


.case_dl_contact{
  background: #B9E1B3;
  padding: 64px 0;
}
.case_dl_contact .case_inner{
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.dl_contact_box{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}
.dl_box{
  background: #fff;
  border-radius: 8px;
  width: 100%;
  max-width: 360px;
  padding: 16px 16px 24px;
}
.dl_box p{
  text-align: center;
  font-size: clamp(16px, 13px + 1vw, 24px);
  font-weight: bold;
  margin: 1em auto 1em;
}
.contact_box{
  background: #fff;
  border-radius: 8px;
  width: 100%;
  max-width: 360px;
  padding: 16px 16px 24px;
}
.contact_box p{
  text-align: center;
  font-size: clamp(16px, 13px + 1vw, 24px);
  margin: 1em auto 1em;
}
.contact_box .case_article_cta{
  margin-top: 0;
}
.contact_box .push_btn{
  width: 300px;
}
.ghost_btn{
  width: 300px;
  height: 60px;
  position: relative;
  text-align: center;
  background: transparent;
  color: #44AE35!important;
  border: 2px solid #44AE35;
  padding: 14px 24px;
  font-weight: bold;
  font-size: 16px;
  display: table;
  margin-inline: auto;
  border-radius: 8px;
}
.ghost_btn:hover{
  background: #E8F5E6;
}
.ghost_btn::after{
  content: "";
  display: block;
  position: absolute;
  background: url(../images/icon_next_green.svg) 50% 50% no-repeat;
  background-size: contain;
  width: 18px;
  height: 18px;
  top: 50%;
}
.go_to::after{
  right: 24px;
  transform: translateY(-50%);
}
.go_back::after{
  left: 24px;
  transform: translateY(-50%) rotate(180deg);
}
.service_link a {
  color: #38CA69;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.service_link a:hover  {
  color: #23B553;
  transition : 0.7s;
  text-decoration:none;
}

@media screen and (min-width:768px){
  .case_dl_contact{
    padding: 80px 0;
  }
  .dl_contact_box{
    flex-wrap: nowrap;
  }
  .dl_box,.contact_box{
    max-width: 440px;
  }
  .dl_box .ghost_btn,.contact_box .push_btn{
    width: 360px;
  }
}
@media screen and (min-width:920px){
  .related_cases_grid{
    margin-bottom: 64px;
  }
  .dl_box,.contact_box{
    padding: 24px 16px 48px;
  }
  .ghost_btn{
    font-size: 16px;
    /* padding: 20px 24px; */
  }
  .go_to.ghost_btn {
    height: 72px;
    font-size: 20px;
    padding: 18px 24px;
  }
}

/* ----------------
動画埋め込み
------------------ */
.wp-block-embed iframe {
    margin: 0 auto;
}