@charset "UTF-8";

/*
========================================

	/business/case/css/case_add.css
 
========================================
*/

body.case {
	background-color: #fff;
}

div#gr_pagetitle_area_static {
	background:url(/business/img/bg_case.jpg) no-repeat;
	background-size: cover;
	background-position:top center;
}

  div.cases_list { /*=#sortDisplay*/
	scroll-margin-top: 184px;/*section#gr_pagetitle_area  最終的に数字をあわせる  */
  }

  @media only screen and (min-width: 1024px) {

	div.cases_list { /*=#sortDisplay*/
		scroll-margin-top: 800px;/*section#gr_pagetitle_area  PCはスクロールしない＝そのままの高さ＝多めにとる*/
	}

}/*@media end*/


/*tag box*/

  .case_card .card_tag {
	/*margin-left:calc( (34.5% + 16px) * -1 );
	margin-bottom: 100px;*/

	/*visibility: hidden;非表示 高さを残す*/
	display: none;/*非表示 高さを残さない*/
  }

@media (min-width: 640px) {

  .case_card .card_tag {
	margin-left:0;
	margin-bottom: 100px;
  }

}/*@media end*/


.badge-tag {
    border: 1px solid #8989ba;
    color: #8989ba;
}

.case_card .card_footer {
	position: absolute;
	bottom:0;
	right: 0;
	width: 100%;
	background: #fff;
}

.case_card .service_name {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	min-height: 68px;
	padding: 2px 8px;
	text-align: center;
}

.case_card .service_name p {
	font-size: clamp(0.75rem, 0.725rem + 0.13vw, 0.875rem);
	font-weight: 500;
	line-height: 1.5;
}
  
.case_card .service_name img.service_logo {
	width: auto;
	height: 40px;
}

@media only screen and (min-width: 640px) {

	.case_card .card_footer {
		width: 60%;
	}

}/*@media end*/

@media only screen and (min-width: 1024px) {

	.case_card .card_footer {
		width: 100%;
	}

}/*@media end*/

.case_card p.title span.title_l {
	font-feature-settings: "palt";/*『』を詰める*/
	letter-spacing: 0.05rem;/*『』以外の間隔を調整*/
}

/*
.case_card.new {
	position: relative;
	background: #ccc;
}
*/

/*----------------------------------------
	other parts ---> common.css
----------------------------------------*/
/*extlink btn icon --- add common.css*/

div.btn_icon_extlink {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	/*border:1px dotted #c33;★ガイド*/
	margin-right: 0;
	margin-left: auto;
	padding-right: 24px;
	height: 32px;
	font-size: clamp(0.625rem, 0.588rem + 0.19vw, 0.813rem);
	background-color: #dbf0db;
}

div.btn_icon_extlink p::before,
div.btn_icon_extlink p::after,
div.btn_icon_extlink p::before,
div.btn_icon_extlink p::after {
	border-color: #999 !important;
}
