@charset "UTF-8";

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

	/business/solution/css/solution_add.css
 
========================================
*/

body.solution {
	background-color: #fff;
}

div#gr_pagetitle_area_static {
	background: url(/business/img/bg_business.jpg) no-repeat;
	background-size: cover;
	background-position:center;
}

@supports (background-image: url('/business/img/bg_business.webp')) {
	div#gr_pagetitle_area_static {
	  background-image: url('/business/img/bg_business.webp');
	}
  }

  div.solutions_list { /*=#sortDisplay*/
	scroll-margin-top: 184px;/*section#gr_pagetitle_area  最終的に数字をあわせる  */
  }

  @media only screen and (min-width: 1024px) {

	div.solutions_list { /*=#sortDisplay*/
		scroll-margin-top: 800px;/*section#gr_pagetitle_area  PCはスクロールしない＝そのままの高さ＝多めにとる*/
	}

}/*@media end*/


/*tag box*/

  .solution_card .card_tag {
	margin-left:calc( (34.5% + 16px) * -1 );
	margin-bottom: 16px;

	display: none;/*非表示*/
  }

@media (min-width: 640px) {

  .solution_card .card_tag {
	margin-left:0;
	margin-bottom: 32px;
  }

}/*@media end*/


.solution_card .card_tag .badge-tag  {
	max-width: 100%;
}

.solution_card .card_tag .badge-tag span.long {
	display: block;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.badge-tag {
    border: 1px solid #8989ba;
    color: #8989ba;
}

/*card_footer*/

.solution_card .card_footer {
	position: absolute;
	bottom:0;
	right: 0;
	width: 100%;
	background: #fff;
}

@media only screen and (min-width: 640px) {

	.solution_card .card_footer {
		/*width: 60%;*/
		width: 100%;
	}

}/*@media end*/

@media only screen and (min-width: 1024px) {

	.solution_card .card_footer {
		width: 100%;
	}

}/*@media end*/

.solution_card p.title span.title_l {
	font-feature-settings: "palt";/*『』を詰める*/
	letter-spacing: 0.05rem;/*『』以外の間隔を調整*/
}

.solution_card.new {
	position: relative;
	background: #ccc;
}

.solution_card.new div.more,
.solution_card.new div.more span {
	background: #ccc;
}

.solution_card.new:hover div.more {
	border-color: transparent;
	background:  transparent;
}

/*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.6rem + 0.13vw, 0.75rem);
}

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: #7088bf !important;
}