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


.service-page{
	max-width: 1200px;
	padding: 120px 100px;
	margin: 0 auto;
}
.service-page-inner{
	width: 100%;
	

}
.service{
	text-align: center;
	margin-bottom: 60px; 
}
.title{
	font-size: 1.75rem;
	letter-spacing: 3px;
}
.service-contents{
	padding-top: 60xp;
}

.service-inner{
	display: flex;
	justify-content: space-between;
}

.service-category{
	font-size: 1rem;
	font-weight: 600;
	position: relative;
}

.service-category ul{
	position:sticky;
    left: 0;
    top: 130px;
	width: 150px;
}

.service-category ul li{
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: solid 0.5px #c0c0c0;
	width: 100px;
}

.service-category .category{
	color: #464646;
}

.service-category .category:hover{
	color: #c0c0c0;
}

.category i{
	transform: rotate(-90deg);
	margin-right: 3px;
	}

.category-title{
	display: flex;
	margin-bottom: 30px;
	align-items: center;
}
.category-title span{
	width: 50px;
	height: 1px;
	background: #333;
}

.category-title h3{
	margin: 0 15px;
	font-size: 1.25rem;
}

.discription{
	font-size: 1rem;
	line-height: 1.75rem;
    letter-spacing: 0.08rem;
	margin-bottom: 30px;
}

.annotation{
	font-size: 0.75rem;
}

.item{
	background-color: #DBD7CA;
	padding: 25px;
	font-size:1rem;
	margin-bottom: 40px;
	letter-spacing: 1px;
}

.flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-bottom: 80px;
}

.flow-box {
  width: 100%;
  background-color: #f8f8f8;
  padding: 20px;
  box-sizing: border-box;
}

.flow-number {
  font-family: 'Shippori Mincho', serif;
  font-size: 1.5625rem;/*25px*/
  letter-spacing: 2px;
  color: #959595;
  margin-bottom: 10px;
  font-weight: 600;
}

.flow-title {
  font-size: 1.125rem;/*18px*/
  color: #333333;
  margin-bottom: 10px;
  font-weight: 600;
}

.flow-text {
  font-size: 0.875; /*14px*/
  color: #333333;
  line-height: 1.8;
  letter-spacing: 0.5px;
}
.f-annotation{
  font-size: 0.75rem;  /*12px*/
  line-height: 1px;
}
@media(max-width:900px) {
	.service-category ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 50px;
	}
	.category {
		white-space: nowrap;
		margin-right: 40px;
	}
	
	.service-inner{
		display: block;
	}
	.service-category ul li{
	margin-bottom: 0px;
	padding-bottom: 10px;
	border-bottom: none;
	width: auto;
}
}

@media(max-width:900px) {
	.service-page {
    padding: 120px 60px;
    margin: 0 auto;
}
	.flow {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    margin-bottom: 80px;
}
}
@media(max-width:500px) {
	.service-page {
    padding: 120px 30px;
    margin: 0 auto;
}
	.flow {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    width: 100%;
    margin-bottom: 80px;
}
}
@media(max-width:400px) {
	.w{
		white-space: normal;
	}
}