@charset "UTF-8";

/* グラデ共有 */
:root {
	--main-gradient: linear-gradient(to right, rgb(255, 0, 0), rgb(229, 46, 25), rgb(237, 117, 80));
}

/* ----- 特徴：フロー図 ----- */
/* Flow */
.flow {
	margin: 0 auto;
	padding: 40px 20px 0;
	list-style: none;
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 70px;
}
@media screen and (max-width: 768px) {
  .flow {
    flex-direction: column;
    gap: 60px;
  }
}
.flow__item {
  flex: 1;
  display: flex;
	position: relative;
}

/* Arrow */
.flow__item:first-child::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -55px;
	transform: translateY(-50%);
	width: 35px;
	height: 40px;
	background: var(--main-gradient);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	z-index: 1;
}
@media screen and (max-width: 768px) {
  .flow__item:first-child::after {
    top: auto;
    bottom: -50px;
    right: 50%;
    transform: translateX(50%);
    width: 40px;
    height: 35px;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
  }
}

/* Flow-Card */
.flow-card {
	padding: 15px 25px 20px;
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--main-gradient);
}
.flow-card__label {
	font-size: 16px;
	color: #fff;
}
.flow-card__title {
	margin-bottom: 10px;
	color: #fff;
	font-size: 30px;
	font-weight: 700;
}
.flow-card__box {
	padding: 30px 20px;
	background: #fff;
	border-radius: 10px;
	flex: 1;
}
.flow-card__text,
.flow .number_list li {
  color: #333;
  line-height: 1.6;
  font-size: 14px;
}
.flow-card__text li,
.flow .number_list li {
  margin-bottom: 10px;
}
.flow-card__text li {
  padding-left: 1em;
  text-indent: -1em;
}
.flow-card__text li::before {
  content: "・";
}
.flow-card__text li:last-child,
.flow .number_list li:last-child {
  margin-bottom: 0;
}

/* ----- 関連技術 ボタンリスト ----- */
/* Cards Layout */
.solution-cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
}
@media screen and (max-width: 1024px) {
  .solution-cards {
    grid-template-columns: repeat(2, 1fr);
		padding: 40px 15px;
  }
}
@media screen and (max-width: 600px) {
  .solution-cards {
    grid-template-columns: 1fr;
    max-width: 400px;
  }
}
.solution-cards_2 {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.solution-cards_3 {
  list-style: none;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.solution-cards_3 .solution-cards__item {
  width: 312px;
}
@media screen and (max-width: 730px) {
  .solution-cards_3 {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .solution-cards_3 .solution-cards__item {
    width: 100%;
  }
}
.solution-cards_4 {
  list-style: none;
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.solution-cards__item {
  display: flex;
}
.solution-cards_4 .solution-cards__item {
  display: inline-block;
}

/* Card */
.solution-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 75px 20px 30px;
  background-color: #fff;
  border: 2px solid #ff0000;
  border-radius: 8px;
  text-decoration: none;
  transition: 0.3s;
  min-height: 120px;
	position: relative;
}
@media screen and (max-width: 768px) {
	.solution-card {
		padding: 15px 50px 15px 25px;
		min-height: 100px;
	}
}
.solution-cards_4 .solution-card {
  padding-right: 90px;
}
@media screen and (max-width: 768px) {
	.solution-cards_4 .solution-card {
		padding-right:50px;
	}
}
.solution-card__title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  text-align: left;
}

/* right-arrow */
.sub_content .right-arrow {
  display: grid;
  place-content: center;
  height: clamp(25px, 6.6666666666vw, 6.6666666666vw);
  width: clamp(25px, 6.6666666666vw, 6.6666666666vw);
  padding-bottom: clamp(1px, 0.2666666667vw, 0.2666666667vw);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #f00 50%, transparent 50%) right center/200% no-repeat;
  border-radius: 100vmax;
  border: 1px solid #f00;
  transition: background-position-x 0.25s;
}
@media (min-width: 769px) {
  .sub_content .right-arrow {
    height: 60px;
    width: 60px;
    padding-bottom: 1px;
  }
}
.sub_content .right-arrow::before {
  content: "";
  height: clamp(15px, 4vw, 4vw);
  width: clamp(15px, 4vw, 4vw);
  background: url(/jp/eng/common/img/right_arrow_rd.svg) center center/contain no-repeat;
}
@media (min-width: 769px) {
  .sub_content .right-arrow::before {
    height: 17px;
    width: 17px;
  }
}
.sub_content .solution-card:hover .right-arrow {
  background-position-x: left;
}
.sub_content .solution-card:hover .right-arrow::before {
  background-image: url(/jp/eng/common/img/right_arrow_wh.svg);
}
.sub_content .solution-card .right-arrow {
  right: clamp(10px, 2.6666666667vw, 2.6666666667vw);
}
@media (min-width: 769px) {
  .sub_content .solution-card .right-arrow {
    right: 10px;
  }
}

/* ----- 他 ----- */
.caption {
	text-align: center;
	font-size: 16px;
}
.heading__4 {
	font-size:18px;font-weight:400;margin:32px 0 0
}
@media only screen and (max-width: 768px) {
	.heading__4 {
		font-size: 16px;
		line-height: 1.31;
		margin: 24px 0 0;
	}
}

.sub-content__end {
	margin-bottom: 40px;
}
@media (min-width: 769px) {
  .sub-content__end {
    margin-bottom: 60px;
  }
}

.link-url__wrap {
  overflow-wrap: anywhere;
}

.icn_blank {
  vertical-align: text-top !important;
  width: auto !important;
  height: auto !important;
  max-height: 0.7em !important;
  padding-left: 5px;
}
.text__Detail .icn_blank {
  vertical-align: middle !important;
}

/* ----- 上位CSS調整 ----- */
@media only screen and (min-width:769px){
	.imgTxt03__ColText.left {
		padding-left: 0;
		padding-right: 32px;
	}
}
.imgTxt03.left {
  margin: 20px 0 0;
}
@media only screen and (max-width: 768px) {
  .left .imgTxt03__ColText {
    margin-top: 0;
  }
  .left .imgTxt03__ColImg {
    margin-top: 20px;
  }
}

.text__Detail dt {
  margin-top: 24px;
  font-weight: normal;
}
.text__Detail dt:first-child {
  margin-top: 0;
}

.flow .number_list ol {
  list-style-type: decimal;
}

.mb0 {
  margin-bottom: 0vw !important;
}
.mt0 {
  margin-top: 0vw !important;
}
.pt0 {
  padding-top: 0vw !important;
}
.mt5 {
  margin-top: 1.3333333333vw !important;
}
@media (min-width: 769px) {
  .mt5 {
    margin-top: 5px !important;
  }
}