@charset "utf-8";
/* CSS Document */

/* ページタイトル */
.page_title {
	background: url("../../../common/img/title/service.webp") no-repeat center center;
	background-size: cover;
}

.breadcrumb {
	margin-bottom: 0;
}

.service_lead {
	width: 100%;
	padding: var(--space-80) 5%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 30px 50px;
	background: var(--base-color);
	margin-bottom: var(--space-80);
	p {
		max-width: 494px;
	}
	@media screen and (max-width: 767px){
		p {
			max-width: 100%;
		}
	}
}
.service_item--img {
	max-width: 480px;
	width: 100%;
	height: 340px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 20px 20px 40px #00000033;
	img {
		height: 100%;
		object-fit: cover;
	}
}

.table_2rows {
	margin-bottom: 10px;
	th {
		vertical-align: middle;
	}
}
.table_2rows--flex {
	th {
		width: 100px;
		padding: 0;
	}
}
.table_2rows--flex th:has(.table_num) {
	padding: 0;
}
.table_num {
	width: 100%;
}

.border_box--list {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 50px;
	li {
		max-width: calc(50% - 25px);
		width: 100%;
	}
}
.net_flexBox {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0 auto var(--space-45);
}
.net_flexBox .color_box {
  max-width: calc(50% - 10px);
	width: 100%;
	@media screen and (max-width: 767px){
		max-width: 100%;
	}
}
.circle_list li {
  align-items: flex-start;
}

/* 三角フロー図
============================================== */
.flow-triangle{
  width:100%;
	padding-right: 30px;
	display:table;
  overflow:hidden;
	margin-bottom: 10px;
	@media screen and (max-width: 767px){
		padding-right: 15px;
	}
}
.flow-triangle li {
  display: table-cell;
  position: relative;
  background: var(--main-color);
  padding: 0.7em 0.5em 0.6em 2.5em;
  color: #fff;
  font-weight: bold;
  text-align: center;
  width: 33%;
	position: relative;
	@media screen and (max-width: 767px){
		height: 40px;
		line-height: 1.5;
		font-size: 1.4rem;
		padding: 0.5em 0.5em 0.5em 1em;
	}
}
.flow-triangle li:before,
.flow-triangle li:after{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  margin: auto;
}
.flow-triangle li:before{
  top:-15px;
  right:-2em;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  border-width: 40px 0 40px 2.5em;
  z-index: 1;
	@media screen and (max-width: 767px){
		border-width: 35px 0 35px 1.5em;
		right:-1em;
	}
}
.flow-triangle li:after{
  top:-15px;
  right:-1.8em;
  border-style: solid;
  border-color: transparent transparent transparent var(--main-color);
  border-width: 40px 0 40px 2.5em;
  z-index: 1;
	@media screen and (max-width: 767px){
		border-width: 35px 0 35px 1.5em;
		right:-0.8em;
	}
}
.flow_txt {
	display: flex;
	gap: 1em 20px;
	margin-bottom: var(--space-45);
	p {
		max-width: calc(100% / 3 - 60px / 3);
	  width: 100%;
	}
}
.sp_block {
	display: none;
}

@media screen and (max-width: 767px){
  .service_item--img {
    height: 150px;
  }
	.table_2rows--flex th {
		width: 100%;
		height: 50px;
		padding: 1em 10px;
	}
	.table_num::after {
		right: 0;
		left: 0;
		margin: auto;
		top: initial;
		bottom: -16px;
		transform: translate(0) rotate(90deg);
	}
	.border_box--list li {
		max-width: 100%;
	}
	.sp_block {
		display: flex;
	}
	.flow-triangle {
		min-width: 1024px;
	}
	.flow_txt {
		min-width: 1024px;
	}
	.scroll_box {
		overflow: auto;
	}
}